Skip to content

Making a card pattern that is completely clickable.

Notifications You must be signed in to change notification settings

paigeheff/link-card

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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


Hand in

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

About

Making a card pattern that is completely clickable.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 54.7%
  • HTML 45.3%