In this exercise, you will focus on CSS Transform, Transition, and Animation properities.
First of all, please download these starter files.
Next, download the screenshots.
Finally, study this Loom movie on how the page needs to behave.
If this a test, you may use the Internet or your notes, but you may not communicate with anyone other than me or our Instructional Assistant (if we have one).
Details
Most of the details are in the Loom movie or the screenshots, but here are a some general details.
Fonts: All fonts in the document are using the System UI stack.
The Text: All text is in the supplied html file. There are comments to add images in that file. As the screenshots show, you only need to add the first one.
Icons: Icons come from Font Awesome. You do not need to use an actual hamburger icon like I did: a traditional two-or-three-bar-lines icon is fine.
The menus: the text for the two menus that slide out is already in the starter files—one near the top, one near the bottom.
The Search Form: You will need to make the search form. It is not included in the file.
Transition and Animation Behavior: Please consult the Loom video. The directions there are quite precise, and they would likely be confusing if delivered in written form.
What to Hand In
If you’re a Langara student, rename the project folder lastname-firstname-walrus, then zip it, and hand it into the course folder on Brightspace.