summary: "Style the beets HTML file from the previous week to match the screenshots."
time: "1.5 hours"
deliverables: "1 HTML file, 1 CSS file, images"
Stylish beets
Overview
- Fork this repository.
- Copy the
index.html
and the images
folder 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.
Details
- 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
Goal
Visually match the images in the “screenshots” folder and create the interaction shown in the linked video.
Hand in
Drop this folder into your Markbot application. Make sure to fix all the errors. And submit for grades using Markbot.