/stylish-beets

Style the beets HTML file from an earlier week to match the screenshots.

Primary LanguageHTML

summary time deliverables
Style the beets HTML file from the previous week to match the screenshots.
1 hour
1 HTML file, 1 CSS file, images

Stylish beets

Overview

  • Fork this repository.
  • Copy the index.html and the images folder from our earlier 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.
  • 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.