The main goal of this exercise is for you to practice using CSS Grid.
For this exercise, please download this package of files.
Here is a video description of the layout you will build.
This downloaded package contains some images, and a folder of screenshots. The HTML file contains all the text and images you will use in the exercise, but the markup is minimal.
Add whatever HTML is appropriate: make sure that it is semantic. Style the responsive states as closely as possible to how they are in the screenshots and demo video.
Note: the new screenshots will look a little bit different from the video: in the screenshots, I’ve gone back to a monochromatic palette.
The screenshots show five responsive states: open them and view them at full size.
The h1 (site title) and the article headings will use the Google font Oswald. All other typography is the system ui font stack (not the browser default).
Remember that grid is all about parent elements arranging child elements.
Pay particularly close attention to alignments and graphic design principles of grouping.
Make sure that the back to top link works.
If you have covered CSS Positioning in a previous class, set the header/navigation area — in medium and large view only — to not move as the page scrolls: when it is on side, in other words.
Finally, when items in the menu are hovered over, the background color changes to a lighter version of the background. That change of color must fill the entire box the link is in.
When You are Done
Rename the project folder yourname-jazzicons, then zip it, and hand it in to Brightspace (Langara) or our Moodle course shell (Emily Carr).