paigeheff / link-card

Making a card pattern that is completely clickable.

summary	time	deliverables
Making a card pattern that is completely clickable.	1.5 hours	1 HTML file, 1 CSS file

Link card

Overview

• 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.

---

Details

• Typefaces: Georgia, Dosis
• Text sizes: 1.5rem, 1.125rem, 1rem, .875rem
• Line heights: 1.5, 1.5rem
• 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

---

Goal

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.

---

Hand in

Drop this folder into your Markbot application. Make sure to fix all the errors. And submit to Canvas using Markbot.

link-card's Issues

how to get into a two column list

How do I get my list to be in two columns?
and my text won't change colour and it won't take the underline out. Do I need to do anything else to make these things work?