Unit 1 Lesson 6 Lab: Flexbox / Grid 🏁
Landing Page Recreation
Purpose
During the first week of class, you completed your first lab at the Marcy Lab School. You recreated a "landing page" using the basic markup, styling, and layout tools you learned. Well that was an eternity ago and you have since added a lot of HTML and CSS tools to your toolkit. You are revisiting (a different version of) that landing page mockup and you are going to use CSS Grid and Flexbox to recreate it!
This lab will illustrate for you, just how powerful layout tools are and how much more simply they allow you to write CSS!
Directions
You are to recreate this mockup. You must use either **Flexbox or Grid ** in this assignment! This is not expected to be pixel perfect. The layout should be identical. You should copy the styling as closely as possible, but you can customize the content and the colors. The key features of this layout must include a header, two columns, and a footer at the bottom of the page. As the page size grows and shrinks, the header, two columns, and footer should grow and shrink with it.
Again, you are not allowed to use any display properties other than grid or flex. 💪🏽
- If this is a Practice or Pairing Lab, fork this repo and clone down the forked repo OR if this is a Lab Assignment that was generate using Github classroom, then your repo name will end in your username. No need to fork, just clone this repo without forking it.
- Create your HTML and CSS files.
- Stage, commit, and push your changes regularly.
- If this is a Lab Assignment, submit the URL of your repo to Canvas. If this is a Practice or Pairing Lab, you can open a PR to denote that you are done.