/typographic-insets

Use the CSS float property to add some insets into a piece of text.

Primary LanguageHTML

Typographic insets

  • Approx. completion time: 1 hour
  • Deliverables: 1 HTML file, 1 CSS file, images

Use the CSS float property to add some insets into a piece of text.

  • Fork this repository.
  • Style the dropcap to match the screenshot.
  • Style the image and caption to match the screenshot.
  • Style the pull-quote to match the screenhots.
  • DO NOT change the HTML.
  • Some of the CSS is marked as DO NOT touch.
  • Run it through Markbot and make sure it passes all the checks.

Details

  • Colours: #333, #666, #f2f2f2
  • Border thickness: 3px
  • Text sizes: 5rem, 1.5rem
  • Image & pull-quote width: 300px

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.