/distributed-cards

Use Flexbox in a column direction to create distributed cards.

Primary LanguageHTML

summary time deliverables
Use Flexbox in a column direction to create distributed cards.
1 hour
1 HTML file, 1 CSS file, images

Distributed cards

Overview

  • Fork this repository.
  • Use a combination of CSS Grid & Flexbox to make the layout: grid for columns & rows, flexbox for distribution.
  • DO NOT change the HTML file.
  • Run it through Markbot and make sure it passes all the checks.

Details

  • Typefaces: Georgia, Denk One
  • Line-heights: 1.5
  • Colours: #fff, #f5f2f0, #ede3db, #623b0c, #000
  • Margins: 1.5rem
  • Paddings: .5em .75em .6em, 1rem
  • Gaps: 1rem
  • Border-thicknesses: 2px
  • Corner-radii: 8px

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.