summary	time	deliverables
Apply CSS Grid & Flexbox to a product listing page layout.	1 hour	1 HTML file, 1 CSS file, images

Pretty products

Overview

Fork this repository.
Use a combination of CSS Grid & Flexbox to complete the design.
Text can be found inside the content.txt file.
Run it through Markbot and make sure it passes all the checks.

Details

Typefaces: Karma, Oswald
Text sizes: 1.4rem, 2rem
Line-heights: 1.5
Colours: #6f00e7, #987ffa, #000
Gaps: 1rem
Margins: .25em, 1.5rem
Paddings: .5em 1.5em .7em, .25em, 1rem
Border thicknesses: 3px
Corner-radii: 3em, 6px

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.