obaidazeino / distributed-cards

Use Flexbox in a column direction to create distributed cards.

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.

distributed-cards's Issues

21% difference

21% difference.. looks very close and im not sure what else to do to reduce the very small difference. my images appear a bit larger

also, not sure about the font family error

@abhaysharma
@anna-pokhilenko