CSS, HTML, JavaScript

“The Walrus” Layout Reconstruction Exercise

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.

I will add mobile menu screenshots at a later date, but this should be enough to work with for now.

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 too much about backward 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

WORK in groups of two or three. When you are done, make a TEXT FILE name “group-members” and include the names of each group member. Only one person per group needs to hand in the project: you will be marked for your group work.

Standard