/responsive-icon-cards

Use media queries and display to create responsive icon cards.

summary time deliverables
Use media queries and display to create responsive icon cards.
1 hour
1 HTML file, 1 CSS file, images

Responsive icon cards

Overview

  • Fork this repository.
  • Create the responsive layouts found in the screenshots.
  • Text can be found inside the content.txt file.
  • Run it through Markbot and make sure it passes all the checks.

Details

  • Typefaces: sans-serif
  • Text sizes: 1.5rem (other than the default media query sizes)
  • Margins: .75em (other than the default media query margins)
  • Image width: 50px
  • Expected class names: .cards, .card, .card-img, .card-body
  • Standard media query widths: 25em, 38em, 60em, 90em
  • Use the standard font-sizes, line-heights & margins

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.