ltw-webdev-1/responsive-typography

Use media queries to enhance the typography of a website for different screen sizes.

HTML

summary	time	deliverables
Use media queries to enhance the typography of a website for different screen sizes.	1 hour	1 HTML file, 1 CSS file

Responsive typography

Overview

Fork this repository.
Add the correct responsive typography properties to the content of this website.
Only the following properties need to be added:
- margin
- padding
- font
- font-size
- line-height
DO NOT change the HTML.
Some of the CSS is already complete.
Run it through Markbot and make sure it passes all the checks.

Details

Typefaces: Crimson Text (regular, italic)
Left/right text padding: 1rem
Standard media query widths: 38em, 60em, 90em
For the best vertical rhythm: remove the top margins from things & add bottom margins equal to the line-height. Follow the font-size and margin settings in the screen sizes cheat sheet.

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.