ltw-webdesign-2/modularity-mindfulness

Practice adjusting grids & flexbox items using media queries.

summary	time	deliverables
Practice adjusting grids & flexbox items using media queries.	2 hours	1 HTML file, 1 CSS file, images

Modularity mindfulness

Overview

• Fork this repository.
• Create the responsive layout using CSS Grid, Flexbox & media queries.
• Some HTML & CSS boilerplate has been started for you.
• Text can be found inside the content.txt file.
• Run it through Markbot and make sure it passes all the checks.

---

Details

• Typefaces: (Already included in your HTML)
• Text sizes: 1rem, 1.125rem, 1.5rem, 2rem
• Colours: #e2e2e2, #3783a3, #000
• Max lengths: 30em
• Gaps: 1rem
• Margins: 1.5rem
• Paddings: .5em 1em .6em, 1rem, .5rem
• Border thicknesses: .2rem
• Corner radii: .3rem

---

Goal

Visually match the images in the “screenshots” folder and create the interaction shown in the linked video.

• Final screenshots in the “screenshots” folder.

---

Hand in

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

modularity-mindfulness's Issues

Nav and header + paragraph aren't going side by side for the navigation

@MacKenzieRose
I'm not sure as to what I might be missing. I'd like the navigation sit on the right side, while the header and paragraph sit on the left side in one row.