We will be using the same codebase for Responsive Web Design I and II. You have been provided design mock ups for desktop, tablet, and mobile devices.

For this project you will build an adaptive website that has max-width breakpoints at 400px and 768px based on the designs provided to you in this repository located in the `design-. The initial styles in the project are fixed and

Concepts required to complete the task:

• How to use min and max-width
• Media queries using max-width
• Flexbox layout techniques are preferred

Remember that an adaptive layout updates at breakpoints only. Don't worry about fluid layouts for this challenge.

Tasks to complete:

• Introduce max-width media queries into your project at 400px, 768px.

• Review each design file and adjust your styles at each breakpoint. Hint: Change your container class to width: 100% at the 768px breakpoint.

• No horizontal scroll bars are acceptable at the exact breakpoint. At 400px and 768px you should only see a vertical scrollbar. Everything else is fine to have a horizontal scroll bar as this is not fully responsive.

• Stretch Goal: Once you have completed the project with max-width media queries, start over with min-width media queries to get a feel for how a mobile first approach would be like.

Now that you have introduced media queries into your project, it's time to upgrade your adaptive site to a full on responsive layout.

To accomplish this challenge you will need to incorporate your knowedges of max and min width, media queries, rem units, and percents.

Tasks to complete:

• Convert all fixed widths into percents.

• Convert all left and right margins and paddings into percents.

• Convert all font-size pixels into rem units.

• Stretch Goal: See how close you can get to the media query and still have your site look decent. Hint: you may need to introduce a few more media queries!