In this project, we'll practice using Bootstrap.
- Click the "Clone or download" button.
- Select "Download ZIP".
- Extract and open the entire folder in Atom.
- Open
landing.html
in Chrome.
- I've already downloaded and included Bootstrap in the project for you.
- I have also included an
additional_styles.css
, which contains my standard vertical spacing classes. - I've already included all of the content without any formatting in
landing.html
. - Use Shoelace.io to create a skeleton grid for your layout, and then copy-paste it into your page.
- Move the content into the appropriate cell in your skeleton.
- Utilize Bootstrap classes to make the page look like the target. Here are some things that might come in handy:
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;
}