| summary | time | deliverables |
|---|---|---|
Style the beets HTML file from the previous week to match the screenshots. |
1.5 hours |
1 HTML file, 1 CSS file, images |
- Fork this repository.
- Copy the
index.htmland theimagesfolder from last week’s beets code into this repo. - Attach a new CSS file,
main.css, and style colors and typography of the beets website. - Resize your browser window so it isn’t as wide.
- Don’t worry too much about the visual spacing in the design—we’ll look at that next week.
- Pay careful attention to all the small details that are changed.
- Run it through Markbot and make sure it passes all the checks.
- Typefaces:
PT Sans(bold),PT Serif(regular, italic, bold) — from Google Fonts - Text sizes:
1.5rem,1.125rem,0.8rem - Line height:
1.5 - Colours:
#c9b5ab,#8f2440,#222,#3f1622
Visually match the images in the “screenshots” folder and create the interaction shown in the linked video.
- Final screenshots in the “screenshots” folder.
- Watch this video to see how it interacts.
Drop this folder into your Markbot application. Make sure to fix all the errors. And submit for grades using Markbot.