Skip to content

Making a card pattern that is completely clickable.

Notifications You must be signed in to change notification settings

ltw-webdev-1/link-card

Repository files navigation

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


Hand in

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

About

Making a card pattern that is completely clickable.

Resources

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

 

Packages

No packages published