Skip to content

Practice using position, absolute, and relative in a responsive setting by recreating a responsive hero banner.

Notifications You must be signed in to change notification settings

ltw-webdev-4/responsive-banner

Repository files navigation

summary time deliverables
Practice some techniques from previous terms like modular CSS, grid systems, type systems and also practice position.
2 hours
1 HTML file, 4 CSS files, images

Responsive banner

Overview

  • Fork this repository.
  • Create the layout that matches the screenshots
  • Use modules.css, grid.css & type.css
  • Text can be found inside the content.txt file.
  • Run it through Markbot and make sure it passes all the checks.

Details

  • Typefaces: Georgia
  • Colours: #fff, #efefef, #97a49b, #495562, rgba(73, 85, 98, .9) (you’ll have to adjust the alpha)
  • Maximum heights: 500px
  • Modulifier settings: select all
  • Gridifier settings: defaults
  • Typografier settings: defaults

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

Practice using position, absolute, and relative in a responsive setting by recreating a responsive hero banner.

Resources

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

 

Packages

No packages published