For this exercise, please download this package of files.
This package contains some images, and a folder of screenshots. Depending on when you downloaded it, it will contain one or two HTML files.
The screenshots show three responsive states: open them and view them at full size.
Please style the page responsive states as closely as possible to how they are in the screenshots. Add whatever HTML is appropriate.
All type is the regular system ui font stack.
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 we have covered CSS Positioning in this class or any other you’ve taken, set the nav menu in medium and large view t0 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 the same background color as in the top part of the header. That change of color must fill the 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).