KevinBMcIntyre / responsive-banner

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

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

summary time deliverables
Practice some techniques from last term like modular CSS, grid systems, type systems and also practice position.
1 hour
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), transparent
  • 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 to Canvas using Markbot.

About

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


Languages

Language:CSS 97.5%Language:HTML 2.5%