Skip to content

Use the CSS float property to create a column layout with four cards inside.

Notifications You must be signed in to change notification settings

ltw-webdev-1/columns-of-cards

Repository files navigation

summary time deliverables
Use the CSS Flexbox properties to create a column layout with four cards inside.
1 hour
1 HTML file, 1 CSS file, images

Columns of cards

Overview

  • Fork this repository.
  • Write the HTML & CSS needed to create the four column layout.
  • Text can be found inside the content.txt file.
  • Run it through Markbot and make sure it passes all the checks.

Details

  • Typefaces: Open Sans (regular, italic, bold)
  • Text sizes: 2rem, 1rem, .875rem
  • Line height: 1.5
  • Colours: #f2f2f2, #333, #e2e2e2, #ccc, #aaa, #999
  • Paddings: 1.5rem, .75rem
  • Margins: 0, 0 auto 1.5rem, 0 0 1.5rem
  • Image width: 100px

The button is .btn & .btn-small from our buttons exercise.


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.

About

Use the CSS float property to create a column layout with four cards inside.

Resources

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

 

Packages

No packages published