gabeaster / droom-landing

droom-landing

Project title

DROOM - Changing the way you connect with employers/employees

Motivation

Our app helps job seekers find jobs and helps companies find qualified employees in a fun and innovative way. Droom's mission is to add a more personal approach to the job search process,and end that feeling of uncertainty as you toss your resume into the classified chasm.

An elegant single page lander with animated tabs for the tinder meets linkedin game changer.

Design inspired by the Netflix landing page.

Languages & tools HTML HTML5

JavaScript Javascript CSS Less Animate.css FontAwesome GoogleFonts - Fonts used: Teko, Montserrat.

Colors used: #98C1D9 #E0FBFC #EE6C4D #293241. Design features

Header: The header is composed of an animated background image, our logo, sign in button, h1, p, and a sign up button: Animated Background Image Three divs are assigned the following classes: ‘stars’, ‘twinkling’, and ‘clouds’. The stars class takes stars.png and is a static image. The twinkling class takes twinkling.png and is repeated across the viewport and is animated so it will translate across the stars image giving the appearance of twinkling. The clouds class takes the clouds1.png image and works similarly to the twinkling class. These classes are given a lower z-index to the content in the header.

Tabs: About: The first tab was animated with animate.css and is shown on page load. This serves as an introduction to Droom, the latest way to land your dream job. The tabs were created using Javascript as well as CSS. Event listeners handled the adding and removing of classes which allowed each of the tabs to either appear or hide. Selecting a tab also hides all other tabs so that only the information from a single tab is ever visible.

Responsiveness: Media breakpoints were set at max-width of 500 pixels for mobile and 800 pixels for our “tablet” view. Tablet view reduces clutter in the tab section by not displaying the images and bringing the three column Dev Tam tab-content, to a 2 column grid. For mobile view, The flavor text under the h1 under showcase was hidden and the size of the sign-up/sign-in was increased. The viewport height for the showcase area for both the tablet and mobile view was changed from 75vh to 100vh for cleanliness.

Credits

Team Lead

Ryan Clark

Front End Architect

Sulaiman 'Yemi' Abidemi Jaytee Padilla

Back End Architect

Cash Globe

Web UI Developer

Anthony Rende Deejay Easter Connor Claxton