summary | time | deliverables |
---|---|---|
Use Flexbox in a column direction to create distributed cards. |
1 hour |
1 HTML file, 1 CSS file, images |
- 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.
- 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
Visually match the images in the “screenshots” folder and create the interaction shown in the linked video.
- Final screenshots in the “screenshots” folder.
Drop this folder into your Markbot application. Make sure to fix all the errors. And submit for grades using Markbot.