# E6: Flexbox Exercise

Points: 20

Now that we've gone over several CSS techniques used to position elements on a page, it's time to start practicing how to use them. More specifically, you will be utilizing Flexbox to lay out a two-column organism.

Download this Packaged file. Included is a Sketch document, a PNG and PDF. Use the Sketch document to measure elements and set the typography. The PNG and PDF should be used as a quick reference.

# HTML

Open this base Codepen and fork it onto your account. The HTML has already been marked up for you and a few CSS Stylings have been left for your convenience.

# Fonts

The fonts used are Merriweather and Open Sans. You can get it from Google Fonts. For simplicities sake, it has already been copied into Codepen's settings > HTML > "Stuff for <head>"

# Flexbox and sizes, etc.

The main task of this exercise is to practice using Flexbox to position elements in an organism and continuing to practice setting appropriate element styles in your CSS. You should be able to determine colors, text stylings, margins, and paddings from the Sketch document.

It would be helpful to have A Complete Guide to Flexbox open in a new tab as a reference to all of the properties Flexbox contains.

# Turn in

Name your Codepen "DES-340: Exercise 6". Copy the URL and send to me via Slack.

Due Dates

April 29th

Last Updated: 11/25/2019, 2:20:51 AM