Home page

The home page for the restaurant website will be split into four main parts: a primary image banner, an "about the restaurant" statement, a few food thumbnails that will link to our menu page, and a Bootstrap reviews carousel. Here's what the page that we'll be creating will look like:

Adding the primary header image

We're going to set up some reusable styles for this image banner, which will be present across multiple pages of the website. Here's the code for the home page banner:

<div class="public-banner">
    <div class="row">
      <div class="col-lg-12">
        <img src="img/banner.jpg" width="1170" height="500" alt="Public Restaurant Banner">
      </div>
    </div>
  </div>

The primary image for the design will stretch the entire width of the layout. The problem is that Bootstrap provides some padding here by default. Using the .public-banner class, we'll remove that default padding:

// here - allows image to go right to the edge
.public...