# Increase Your Flexibility Lab

# Introduction

The flexible box model is a CSS one-dimensional layout model. Using flexbox, you can control the space distribution, alignment, and order of items.

# Objective

For this lab, you will be updated the layout of of the provided web page using Flexbox to match requirements and videos below.

# Requirements

The following instructions explain the different changes that need to be made to the site. The videos below shows what the final product should look like.

1. Download the Increase Your Flexibility Starter Files. Add the appropriate CSS to the style.css file to make the changes to the web page. No changes should be made to the index.html or base.css file.
2. Create a responsive navbar, with the "My New Site" link on the left side and the remaining link on the right. For small screens (<480px), the "My New Site" link should be on a separate row than the other three links. See the Header / Intro Section video.
3. Update the text "Your Name Here" with your name and "Your Title Here" with your title and center the text, both vertically and horizontally, inside the intro section. See the Header / Intro Section video.
4. Update the about section, so that the image and text are aligned horizontal on large screens (>768px) and aligned vertically on smaller screens (<768px). See the About Section video.
5. In the Work section, create a responsive grid of cards. See the Work Section video.
6. Update the contact section, so that the image and text are aligned horizontal on large screens with the form appearing on left side and the image on the right. As the screen gets too small to hold both form and image, the image and text should be aligned vertically with the image first. See the Contact Section video.
7. Once completed, submit the style.css file only to the Increase Your Flexibility assignment on BrightSpace.

Hint: Empty media queries have been provided in the style.css file to help with the completion of this lab.

# Header / Intro Section

# About Section

# Work Section

# Contact Section

The form is laid out differently in the following video. No changes need to be made to the form itself.