USA: +1 (725) 712-1730 
Sign in
I got all the way to step 8 and got stuck because I'm lost to where to place/input the styles in steps 8-12 on the fbstyles.css file.PAGE 1
PAGE 2
foodbank.html
<!DOCTYPE html>
<!– This website template was created by: Student’s First Name Student’s Last Name, Today’s Date –>
<html lang=”en”>
<head>
<link rel=”stylesheet” href=”css/fbstyles.css”>
<title>New Harvest Food Bank</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
</head>
<body>
<div id=”container”>
<!– Use the header area for the website name or logo –>
<header>
<img src=”images/logo.jpg” alt=”Food Bank Logo”>
<p>New Harvest Food Bank</p>
</header>
<!– Use the nav area to add hyperlinks to other pages within the website –>
<nav>
<ul>
<li><a href=”index.html”>Home</a></li>
<li><a href=”about.html”>About</a></li>
<li><a href=”volunteer.html”>Volunteer</a></li>
<li><a href=”contact.html”>Contact</a></li>
</ul>
</nav>
<!– Use the main area to add the main content of the webpage –>
<main>
</main>
<!– Use the footer area to add webpage footer content –>
<footer>
<p>© Copyright 2015. All Rights Reserved.</p>
<p><a href=”mailto:new@harvest.net”>new@harvest.net</a></p>
</footer>
</div>
</body>
</html>
fbstyles.css
/* Style sheet created by: Student's First Name Student's Last Name, 04/19/2017 */
/* Style for body specifies a background color */
body {
background-color: #FFFFFF;
}
/* Style to create a fluid image */
img {
max-width: 100%;
}
/* Styles for Mobile Layout */
/* Style for the container centers the page and specifies the width */
#container {
width: 100%;
margin-left: auto;
margin-right: auto;
}
/* Style for the header specifies top margin, background color, rounded corners, and center align content */
header {
font-family: Verdana, Arial, serif;
font-size: 2em;
margin-top: 0.2em;
background-color: #FFFFFF;
border-radius: 0.5em;
text-align: center;
}
/* Style for nav specifies text properties */
nav {
font-family: Georgia, "Times New Roman", serif;
font-size: 1em;
font-weight: bold;
text-align: center;
}
/* Style specifies padding and margins for unorderd list */
nav ul {
padding: 0;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
/* Style for nav li specifies the background color, rounded corners, removes bullet style, and applies margins and padding for list items within the navigation*/
nav li {
background-color: #FF6600;
border-radius: 1em;
list-style-type: none;
margin: 0.3em;
padding: 0.4em;
}
/* Style for the main specifies a block display, text properties, margins, padding, rounded corners, and borders */
main {
display: block;
font-family: Georgia, "Times New Roman", sans-serif;
font-size: 1em;
margin-top: 0.2em;
padding: 0.5em;
border-top: solid 0.2em #FF6600;
border-bottom: solid 0.2em #FF6600;
}
/* Style for the footer specifies font size, text alignment, and top margin */
footer {
font-size: .70em;
text-align: center;
margin-top: 2em;
}
/* Style displays the mobile class */
.mobile {
display: inline;
}
@media screen and (min-width: 481px) { /* tablet */
img {
width: 25%
float: left;
}
header p {
margin-bottom: 4em;
padding-top: 1.5em;
}
nav li {
display: inline;
float: left;
margin-left: 1%;
margin-right: 1%;
padding-left: 0;
padding-right: 0;
width: 23%;
}
main {
clear: left;
margin-top: 12 em;
}
.mobile {
display: none;
}
.desktop {
display: inline;
}
}
@media screen and (min-width: 769px) { /* desktop */
#container {
width: 80%
}
nav {
margin-top: -5 em;
}
nav ul {
margin: 0;
padding-left: 0.50%;
padding-right: 0.50%
}
nav li {
background-color: #FFFFFF;
border-radius: 0;
margin-left: 0;
margin-right: 0;
padding: 0;
width: 18%;
}
nav li a {
color: #FF6600;
display: inline-block;
padding: 0.7 em;
font-size: 1.25 em;
}
nav li a:link {
color: #FF6600;
}
nav li a:hover {
color: #4C1F00;
font-style: italic;
}
main {
border: none;
border-radius: 1em;
box-shadow: 1em 1em 1em #331400;
margin-top: 1em;
}
}
//small screen sizes
@media (max-width: 481px) {
.mobile-only {
display:block !important;
}
.desktop-only {
display:none !important;
}
}
1: Integrating HTML5 Semantic Elements for the Lab Harvest Food Bank Website New lem ou volunteer at a local food bank called New Harvest Food Bank that collects ty food donations and provides food and other services to those in need. The communi ald section, article, and aside elements to the About page and then format them. Create and style the webpage shown in Figure 7-95 for the mobile, tablet, and desktop viewports has asked you to create a responsive website. You have already created the website but now company need to We Need Your Donations We Need Your Donations Items We Need Our pantry is in need of the following items: Items We Need Canned chicken or tuna Canned Vegetables Oatmeal Pasta Peanut butter Our pantry is in need of the following items: . Canned chicken or tuna Canned Vegetables Oatmeal . Rice Peanut butter Rice Food Drive If you would like to host a food drive, we will provide everything you need to get started. Food drives are a great way for employees to help their local community. Employees can donate food items or make monetary donations Food Drive If you would like to host a food drive, we will provide everything you need to get started. Food drives are a great way for employees to help their local community. Employees can donate food items or make monetary donations. Note that we cannot accept perishable goods, opened food containers, or home made goods. Note that we cannot accept perishable goods, opened food containers, or home made goods (b) Tablet viewport (a) Mobile viewport New Harvest Food Bank About Volunteer Contact Home Note that we cannol accept perishable goods, opeued food We Need Your Donations or home Items We Need made goods Our pantry is in aeed of the following itens . Canned chicken or tua Canned Vegetables Past Peanut batter – Rice Food Drive If you would Ike to host a food drive, we will everything you need to get started Food drives are a great way for Esuployees can doaate food itens or make employees to help thrir local (c) Desktop viewport Figure 7-95 Continued>
Expert Answer
/* Style sheet created by: Student’s First Name Student’s Last Name, 04/19/2017 */
/* Style for body specifies a background color */
body {
background-color: #FFFFFF;
}
/* Style to create a fluid image */
img {
max-width: 100%;
}
/* Styles for Mobile Layout */
/* Style for the container centers the page and specifies the width */
#container {
width: 100%;
margin-left: auto;
margin-right: auto;
}
/* Style for the header specifies top margin, background color, rounded corners, and center align content */
header {
font-family: Verdana, Arial, serif;
font-size: 2em;
margin-top: 0.2em;
background-color: #FFFFFF;
border-radius: 0.5em;
text-align: center;
}
/* Style for nav specifies text properties */
nav {
font-family: Georgia, “Times New Roman”, serif;
font-size: 1em;
font-weight: bold;
text-align: center;
}
/* Style specifies padding and margins for unorderd list */
nav ul {
padding: 0;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
/* Style for nav li specifies the background color, rounded corners, removes bullet style, and applies margins and padding for list items within the navigation*/
nav li {
background-color: #FF6600;
border-radius: 1em;
list-style-type: none;
margin: 0.3em;
padding: 0.4em;
}
/* Style for the main specifies a block display, text properties, margins, padding, rounded corners, and borders */
main {
display: block;
font-family: Georgia, “Times New Roman”, sans-serif;
font-size: 1em;
margin-top: 0.2em;
padding: 0.5em;
border-top: solid 0.2em #FF6600;
border-bottom: solid 0.2em #FF6600;
}
/* Style for the footer specifies font size, text alignment, and top margin */
footer {
font-size: .70em;
text-align: center;
margin-top: 2em;
}
/* Style displays the mobile class */
.mobile {
display: inline;
}
/* step 8 */
div p {
padding-left: 1em;
padding-right: 1em;
}
@media screen and (min-width: 481px) { /* tablet */
img {
width: 25%
float: left;
}
header p {
margin-bottom: 4em;
padding-top: 1.5em;
}
nav li {
display: inline;
float: left;
margin-left: 1%;
margin-right: 1%;
padding-left: 0;
padding-right: 0;
width: 23%;
}
main {
clear: left;
margin-top: 12 em;
}
.mobile {
display: none;
}
.desktop {
display: inline;
}
/* step 10 for tablet*/
section {
background-color: #FF6600;
}
article {
background-color: #FFFFFF;
border-top: 0;
border-radius: 0 3em 3em 3em;
border-bottom: 1em;
}
aside {
text-align: center;
color: #FF6600;
background-color: #FFFFFF;
box-shadow: 1em 1em 1em #000000
border-radius: 8em;
}
}
@media screen and (min-width: 769px) { /* desktop */
#container {
width: 80%
}
nav {
margin-top: -5 em;
}
nav ul {
margin: 0;
padding-left: 0.50%;
padding-right: 0.50%
}
nav li {
background-color: #FFFFFF;
border-radius: 0;
margin-left: 0;
margin-right: 0;
padding: 0;
width: 18%;
}
nav li a {
color: #FF6600;
display: inline-block;
padding: 0.7 em;
font-size: 1.25 em;
}
nav li a:link {
color: #FF6600;
}
nav li a:hover {
color: #4C1F00;
font-style: italic;
}
main {
border: none;
border-radius: 1em;
box-shadow: 1em 1em 1em #331400;
margin-top: 1em;
/* step 11 */
overflow: auto;
}
/* step 12 */
section {
float: left;
width: 60%;
}
aside {
float: right;
width: 25%;
background-color: #FF6600;
color: #FFFFFF;
}
}
//small screen sizes
@media (max-width: 481px) {
.mobile-only {
display:block !important;
}
.desktop-only {
display:none !important;
}
/* step 9 for mobile*/
section {
padding: 1%;
text-align: center;
}
article {
border-top: solid 0.2em #FF6600;
padding: 2%;
margin: 0.5%;
text-align: left;
}
aside {
text-align: center;
color: #FFFFFF;
background-color: #FF6600;
font-size: 1.25em;
margin: 1em;
padding: 1em;
}
}
