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:
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...