Before we move forward, we have a quick pre-test to take. You have 30 minutes to complete the following task.
FYI, your timer started when you opened this page. We just want to know how long it takes you.
Here’s your test…
Use the following Codepen or JSFiddler instance and fork the code. Once completed submit the CSS code in the text area below.
There are two sections to complete. Header and Content area.
Core colors, paddings, margins, and floats have already been done. Paddings and margins should not be altered.
First section, the header, utilizes floats. Match the look of the example concept and fix the broken floats. We’re looking for DRY and KISS methods for solving the issue.
Second section, the main content will utilize flex. The call to action “cards” should be auto width, and adding new cards should auto-fit.
The color for the call to action buttons are provided at the top of the CSS. The buttons have a hover and active state and an ease transition
On hover, darken the button by 8%, active buttons should darken by 25%. The transition should ease in.
Make sure you fill out the fields below, and click Send.