Essential Question: How can I use the new box model to format my web page?
Mastery Objectives:
SWBAT create spacing between elements in their web page.
SWBAT format margins and borders in their web page.
Directions: In this project, you will follow step-by-step instructions to fix a fictional restaurant’s website. All of the HTML and most of the CSS is intact, but the box model properties have yet to be set. You’ll use knowledge of height, width, padding, border, and margin to complete this project.
You’ll go through Mary Lou’s Burger’s menu item roughly from top to bottom. Let’s begin with styling the <nav> element containing the logo and navigation elements.
Set the width of the img to 180 pixels. width: 180px;
Center the img horizontally using the margin property. margin: 0 auto;
Set margin of span elements inside the nav to 10 pixels on the top and bottom, and 0 pixels on the left and right.
Now set some rules for the element with the class content. This element is a container for all the elements not included in <nav>.
Set the height to 500 pixels.
Create 10-pixel vertical margins and automatic horizontal margins.
Set .body elements inside .content to have no vertical margin and automatic horizontal margins so that it is centered.
With a 500-pixel height for .content, some elements will overflow out of its box if the browser window is made too small.
Make .content scrollable with the overflow property.
Resize the browser window so it is very skinny and notice that this section is now scrollable.
Now it’s time to tackle the .header and its h1 text: ‘BBQ BACON BURGER’.
Set the height of the .header class to 320 pixels.
Create a 20-pixel padding for the h1 element inside the .header.
Set vertical margins to 0 pixels and the horizontal margins to be determined automatically for the same h1 element.
Now add some box-model formatting to the ‘ORDER’ .button element. As you make each change, make sure to scroll down if necessary to view the effect on the button.
Set the width to 200 pixels.
Set the padding to 20 pixels.
Set the vertical margins to 40 pixels and the horizontal margins to automatic.
Give the button a 1-pixel, solid, blue border.
Finally, style the nutrition facts section at the bottom. In the element selected with ul.nutrition:
Set the padding of the ul.nutrition element to 20 pixels.
Set the width of li elements within the ul.nutrition to 200 pixels.
Set a 10-pixel vertical padding and 20-pixel horizontal padding to the same elements.
Add a 3-pixel bottom margin to the same elements.
<!DOCTYPE html>
<html>
<head>
<title>Mary Lou's Menu</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,500,700|Oswald:300,400,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- Navigation Section -->
<nav>
<img src="https://i0.wp.com/pickleballinsider.com/wp-content/uploads/2022/06/Mary-Lous-Milk-Bottle-Spokane-WA3.png?fit=1000%2C1002&ssl=1" />
<span><a href="#">MENU</a></span>
<span><a href="#">NUTRITION</a></span>
<span><a href="#">ORDER</a></span>
<span><a href="#">LOCATIONS</a></span>
</nav>
<!-- Content Section -->
<div class="content">
<!-- Content Header -->
<div class="header">
<h1>BBQ BACON BURGER</h1>
</div>
<!-- Content Body -->
<div class="body">
<p> Our BBQ Bacon Burger uses all fresh ingredients: ground sirloin beef, homemade BBQ sauce, lettuce, and a sesame seed bun. Our bacon is cured on site.
</p>
<!-- Order Button -->
<a href="#" class="button">ORDER</a>
<!-- Nutrition Information -->
<ul class="nutrition">
<li>
<span class="category">CALORIES</span>
<span class="value">800</span>
</li>
<li>
<span class="category">FAT</span>
<span class="value">28</span>
</li>
<li>
<span class="category">PROTEIN</span>
<span class="value">10</span>
</li>
<li>
<span class="category">CARBOHYDRATES</span>
<span class="value">30</span>
</li>
<li>
<span class="category">SODIUM</span>
<span class="value">150</span>
</li>
</ul>
</div>
</div>
</body>
</html>
/* Universal Styles */
body {
background-image: url("https://cdn4.vectorstock.com/i/1000x1000/16/03/food-love-logo-icon-design-vector-22821603.jpg");
text-align: center;
font-family: 'Roboto', sans-serif;
font-size: 18px;
}
a {
text-decoration: none;
}
/* Navigation */
nav {
text-align: center;
}
nav img {
display: block;
}
nav span {
display: block;
font-size: 16px;
font-weight: 100;
letter-spacing: 2px;
}
nav a {
color: #666666;
}
/* Content Container */
.content {
width: 100%;
}
/* Content Header */
.header {
background-image: url("https://images.pexels.com/photos/3915906/pexels-photo-3915906.jpeg?cs=srgb&dl=close-up-photo-of-burger-3915906.jpg&fm=jpg");
background-position: center;
background-size: cover;
}
.header h1 {
background-color: #05A8AA;
color: #FFF;
font-family: 'Oswald', sans-serif;
font-size: 40px;
font-weight: 300;
line-height: 40px;
width: 68%;
}
/* Content Body */
.content .body {
width: 90%;
}
.body p {
color: #333333;
font-weight: 100;
line-height: 34px;
width: 90%;
margin-top: 18px;
}
/* Content Button */
.button {
border-radius: 4px;
color: #05A8AA;
display: block;
font-weight: 700;
}
.button:hover {
background-color: #05A8AA;
border: 1px solid #05A8AA;
color: #FFF;
}
/* Content Nutrition */
ul.nutrition {
}
ul.nutrition li {
display: inline-block;
background-color: #05A8AA;
list-style: none;
}
.nutrition .category {
color: white;
font-weight: 100;
letter-spacing: 2px;
display: block;
}
.nutrition .value {
color: white;
font-size: 26px;
font-weight: 700;
letter-spacing: 2px;
}