Skip to content

Use Flexbox in a column direction to create distributed cards.

Notifications You must be signed in to change notification settings

ltw-webdesign-1/distributed-cards

Repository files navigation

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.

About

Use Flexbox in a column direction to create distributed cards.

Resources

Stars

Watchers

Forks

Languages