/css-intro-imperfectfoods

Primary LanguageHTML

Intro to CSS Practice

Imperfect Foods Comp Recreation

You will be recreating a piece of this site. Scroll down to the section titled "How to Shop Imperfect Foods."

The Comp:

desktop

Set Up Instructions

  1. Fork and clone this repo
  2. cd into the directory
  3. Run open index.html to view your app in the browser

Instructions

Some notes:

  • The HTML is already there for you, but feel free to change that file as you wish (add elements, add IDs or classes, etc).
  • The CSS file has the font and colors listed for you. You do not need to import anything for the font, we've done that for you (HTML line 5).
  • Don't worry about the worn design in the background. We will just make the background one solid color.

Iteration 1 (after CSS: Fundamentals lesson):

  • Make the text match the font and sizing from the comp
  • Make the colors match the comp
  • Make the image sizes match the comp
  • Style the button to match the comp
  • Do not worry about the layout (where elements are on the page) yet! We'll get to that after your Flexbox lesson.

Iteration 2 (after CSS: Flexbox lesson):

  • Use flexbox to make the layout match the comp (hint: you may need to add container elements to your HTML to group the img, h2, and p elements)