1. We need to add a bit of markup that encloses everything in the body of the document in an element that will serve as the grid container. Open the HTML document bakery.html, add a div around all of the content el- ements (from header to footer), and give it the id "container". Save the HTML file. .
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Black Goose Bakery</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Stint+Ultra+Expanded" rel="stylesheet">
<style>
@import url(bakery-styles.css);
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="">Menu</a></li>
<li><a href="">News</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
<h1><img src="images/bgb_logo.png" alt="Black Goose Bakery"></h1>
<p>The delicious baked goods you love at Black Goose Bistro...now available to go!</p>
</header>
<main>
<h2>Fresh from the Oven</h2>
<h3>Breads</h3>
<p><img src="images/bread.png" alt="round loaf of bread on cutting board"> Our breads are made daily from highest-quality whole grain flour, water, salt, and yeast or sourdough starter. Simply and naturally, and never any preservatives. Patience is key to achieving the proper level of fermentation and baking each loaf to perfection. Available in whole grain, sourdough, olive loaf, classic rye, and potato-onion.</p>
<p class="more"><a href="">Learn more about our baking process...</a></p>
<h3>Muffins</h3>
<p><img src="images/muffin.png" alt="one chocolate chip muffin"> Every day, we offer a large selection of muffins, including blueberry, multi-berry, bran, corn, lemon-poppyseed, and chocolate. Our muffins are made from scratch each day. Stop by to see our seasonal muffin flavors!</p>
<p class="more"><a href="">Learn more about how we make our muffins...</a></p>
</main>
<aside>
<h2>Hours</h2>
<p><span class="day">Monday:</span> 5am to 3pm</p>
<p><span class="day">Tuesday:</span> 5am to 3pm</p>
<p><span class="day">Wednesday:</span> 5am to 3pm</p>
<p><span class="day">Thursday:</span> 5am to 3pm</p>
<p><span class="day">Friday:</span> 5am to 3pm</p>
<p><span class="day">Saturday:</span> 6am to 4pm</p>
<p><span class="day">Sunday:</span> 6am to 4pm</p>
</aside>
<footer>
<p>All content copyright © 2017, Black Goose Bistro.</p>
<div id="award">
<img src="images/award.png" alt="Farmers' Market Award">
</div>
</footer>
</body>
</html>
Step by step
Solved in 3 steps with 2 images
