summary | time | deliverables |
---|---|---|
Making a card pattern that is completely clickable. |
1.5 hours |
1 HTML file, 1 CSS file |
- Fork this repository.
- Write the HTML and CSS necessary to make a link card.
- The hover state should match what’s shown in the video.
- The content can be found inside the
content.txt
file. - Run it through Markbot and make sure it passes all the checks.
- Typefaces:
Georgia
,Dosis
- Text sizes:
1.5rem
,1.125rem
,1rem
,.875rem
- Line heights:
1.5
- Paddings:
1rem
,.4em .75em .5em
- Margins:
0 0 1rem
- Colours:
#785439
,#cabdb2
,#512200
,#9a816d
,#dcd4cd
,#f0eee8
- Border widths:
3px
,2px
- Border radii:
3px
,8px
- Expected classes:
.link-card
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.