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.
The screenshots show five responsive states: open them and view them at full size.
All 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 nav menu in medium and large view to not move as the page scrolls.
The menu also has (various) rounded corners at each size.
Finally, when items in the menu are hovered over, the background color changes to a darker version of 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).