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 |
- 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.
- Typefaces:
Open Sans
(regular, italic, bold) - Text sizes:
2rem
,.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.
Visually match the images in the “screenshots” folder and create the interaction shown in the linked video.
- Final screenshots in the “screenshots” folder.
- Watch this video to see how it interacts.
Drop this folder into your Markbot application. Make sure to fix all the errors. And submit for grades using Markbot.