We are interested in your approach to the following project. Each of the given exercises have a handful of valid solutions, and possibly other solutions we haven't seen, so don't worry about finding "the" solution. We ask that it renders correctly in Chrome, and be responsive from mobile to desktop. Try not to use frameworks such as Bootstrap if possible.
Try to create your HTML as pixel perfect to each jpg as possible but we understand text sizes will not be 100% accurate as working from flat artwork. You should try to complete ALL the tasks within 2-3 hours, so plan accordingly and focus on the most important aspects.
Please feel free to create and bundle your project as you see fit. Please display your knowledge and expertise as best you can!
Fork this project.
Create a full width page with a header, a footer and a main section in index.html. Set the width of the content section to 100% with a maximum width of 1366 pixels.
index.html should include these assets:
- jQuery (if a dependency in your solution)
test.jstest.cssNunitoGoogle font in regular, bold and extra bold weights
In the header, content and footer sections of index.html build the included design. (exercise #1.jpg)
Create the roll over state as shown in the design. (exercise #2.jpg)
Create a modal which is launched when a post is clicked (exercise #3.jpg).
Commit your work once you've finished with it. Send us a link to your fork.