Unit 1 Lesson 5 Lab

Flexbox Layout

Directions

In this lab, you will have the opportunity to use your new Flexbox toolkit to create a simple webpage layout. The header and the two column display can all be laid out more easily using Flexbox.

Here is a bare bones mockup of the intended layout. You should feel free to keep your rendering equally as sparse. You may use lorem ipsum text and grab placeholder images from this icons website. I'm most concerned with the layout being nearly identical. Of course, if you want to make the design and content your own, go ahead!

Considerations

1. The key features of this layout that must be replicated are the navbar, header, and two-column section at the bottom of the page.
2. As the page size grows and shrinks, the navbar, header, and two-column sections should grow and shrink with it (take up all horizontally available space).
3. Ensure that you are rendering has one narrow column and one wide column (and you use flexbox to achieve this effect!)
4. Look at the border-radius property if you are stuck on how to make a picture round.
5. There should be no floats and minimal use of the text-align, display: block, and display: inline-block properties for this lab, as you should be leaning on your flexbox properties.

To submit...

1. If this is a practice lab, fork this repo and clone down your fork. Otherwise, if this is a Lab Assignment, you won't be able to fork, so you can clone it down.
2. Create your index.html and style.css files.
3. Commit changes often.
4. Push back up to your remote repo when done.