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

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.

• Final screenshots in the “screenshots” folder.
• Watch this video to see how it interacts.

---

Hand in

Drop this folder into your Markbot application. Make sure to fix all the errors. And submit for grades using Markbot.