Skip to content

Use CSS position to make a hero banner with text displayed in front of an image.

Notifications You must be signed in to change notification settings

paigeheff/hero-banner

 
 

Repository files navigation

summary time deliverables
Use CSS position to make a hero banner with text displayed in front of an image.
1 hour
1 HTML file, 1 CSS file, images

Hero banner

Overview

  • Fork this repository.
  • Use CSS position to make the hero banner text display in front of the image
  • Text can be found inside the content.txt file.
  • Run it through Markbot and make sure it passes all the checks.

Details

  • Typefaces: Open Sans
  • Text sizes: 4rem, 2rem
  • Colours: rgba(0, 0, 0, 0.5)
  • Expected class names: .img-flex, .banner
  • Banner maxiumum height: 500px

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

Use CSS position to make a hero banner with text displayed in front of an image.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 51.0%
  • HTML 49.0%