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 |
- 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.
- 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.
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 to Canvas using Markbot.