This exercise is meant to get you thinking about transitions, menus, responsive states, layouts, and as always web typography.
First, please download the files you will need.
In it, you will build a layout that was used to great effect by the Canadian literary magazine The Walrus.
I’ve put in some of the HTML, but not much. You’ll need to add more. Feel free to modify any I have put in.
There are two big editorial images. The first acts like a feature image. I’ve already put these two, and two ads, into the HTML, but notice the spacing of the images and the text at the various breakpoints.
For the three links in the header, use HTML button elements, and Font-Awesome—the new version that loads SVG instead of icon fonts.
The fonts used are two from Google — Source Sans Pro and Playfair Display — and the Georgia, Times, etc font-stack.
Make all your layouts as close as possible to the ones shown in the screenshots.
All menu states have transitions (from off-screen to on-screen) that take place over .5s.
You can use grid, flexbox, etc. Do not worry about any backwards compatibility.
You will definitely need JavaScript for:
– the classList method, to add classes to elements such as the body
– at least one condition to test how many menus are active