/modularity-mindfulness

Practice adjusting grids & flexbox items using media queries.

Primary LanguageHTML

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.