summary: 'Use CSS position to make a hero banner with text displayed in front of an image.' time: '1 hour' deliverables: '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 (regular, italic, bold)
• Text sizes: 4rem, 2rem
• Colours: rgba(0, 0, 0, .5)
• Expected class names: .img-flex, .banner
• Banner maximum height: 500px
• Content maximum width: 50em

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 for grades using Markbot.