There are three sections to this page: a header, a main area, and a footer.
The font used thoughout is the Google font Old Standard TT.
Header / Footer: 20%
Small, Medium, Large: 50%
Bonus Task: 20%
Header / Footer
The header and footer look and behave almost the same way: the only difference is that the footer does not have the site name (light). In the header, the site name box will take 1/3, while the nav element will take 2/3. It will look like this at full width:
As the page width decreases, the header area will arrange itself like this:
In the footer, make the menu take the full width of the page (the screenshot is showing a small slice of the MAIN area, so you get a better idea of how the footer behaves in relation to it).
You do not have to make the items into actual links. Just focus on getting the layout correct.
The main area consists of 30 articles. Each article has an h2, an image in a DIV, and a single paragraph.
There are four responsive states: small, medium, large, and extra-large. Click on any of the screenshots for a bigger view, or consult the screenshot files you downloaded from the top of this page.
For a 20% bonus, figure out how to add light grey background to alternating rows of articles, starting with the second row, without using classes or adding to the HTML.
Do not add the striping in single column view. Add it once the articles have rows of two, three, or four articles each.
Obviously, the striping must change with the responsive breakpoints.
All images in this exercise are from Flickr, with creative commons licensing. Attributions are here.