First download these files: DTN Magazine Layout
If inside the downloaded folder is a file called Instructions, delete it. It was for an older version of the exercise.
Your Task
Inside the downloaded content is a folder of screenshots. Your job here is to make the page look as close as possible to the layouts presented in those screenshots.
There is a starter index.html file. You will need to add additional HTML to it. Mark the content up semantically.
Google Fonts Used
- Site Name (dtn): Fjalla One / Color #707B7F;
- Article Titles: Open Sans Condensed / Font-Weight 700
- Paragraphs: Merriweather / Font-Weight 400
- Menu: Merriweather
- Sections h2: Merriweather
- Story Author Credits: Merriweather / Font-Weight 400 / Font-style italic
Authoring Method
Use a mobile first authoring method. It is almost always easier to build up, from the simplest layout (single-column, typically) to the largest layout (typically multi-column).
Begin by making the styles that are common to all screen sizes, and the styles that are needed for the inital, narrowest, screen width.
Then, use a series of increasing min-width media queries. With each query, code what needs to change to make the bigger, more complex, layout.