HageP / foodhub

Foodhub with Bootstrap

In this project, we'll practice using Bootstrap.

Here is your target.

Setup

1. Click the "Clone or download" button.
2. Select "Download ZIP".
3. Extract and open the entire folder in Atom.
4. Open landing.html in Chrome.

Suggested Steps

1. I've already downloaded and included Bootstrap in the project for you.
2. I have also included an additional_styles.css, which contains my standard vertical spacing classes.
3. I've already included all of the content without any formatting in landing.html.
4. Use Shoelace.io to create a skeleton grid for your layout, and then copy-paste it into your page.
5. Move the content into the appropriate cell in your skeleton.
6. Utilize Bootstrap classes to make the page look like the target. Here are some things that might come in handy:

• Buttons
• Responsive images and shapes
• Forms
• Media objects
• Unstyled lists

You will have to write some of your own custom CSS for this project in additional_styles.css.

A hint for the full-width images: rather than including <img> elements in your HTML, instead use the images as the background for existing elements in CSS.

.who-delivers {
  background: url("images/main-hero.jpg") no-repeat center center;
  background-size: cover;
  color: white;
  height: 500px;
  padding-top: 150px;
}

Resources:

• Official Bootstrap documentation
• Shoelace.io