I am needing help with my assisgnment I tried to do it but I am not understandin
ID: 3710007 • Letter: I
Question
I am needing help with my assisgnment I tried to do it but I am not understanding;
This is the HTML code:
<!DOCTYPE html>
<!-- This website template was created by: , 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>
<section>
<article>
<h4> Items We Need</h4>
<p> Our party is in need of the following items:</p>
<ul>
<li>Canned chicken or tuna</li>
<li>Canned Vegtables</li>
<li>Oatmeal</li>
<li>Pasta</li>
<li>Peanut Butter</li>
<li>Rice</li>
</ul>
</article>
<article>
<h4> Food drivew</h4>
<p> 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 employee's to help thier locak community. Employee's can donate food items or make monetary donations</p>
</article>
</section>
<aside> Note that we cannot accept perishable goods, opened food containers, or home made goods.</aside>
</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>
And the CSS code:
/* Style sheet created by: 4/16/2018 */
/* Style for body specifies a background color */
body {
background-color: #FFFFFF;
}
/* Styles for Mobile Layout */
#section {
padding:1%
text-align: Center;
}
#article {
border-top: solid 0.2em #ff6600;
padding: 2%;
margin: 0.5%
text-align: left;
}
#aside{
/* 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 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;
}
HTML 366 HTMI Chapter 7 Improving Web Deigh with New Page Layouts in the Labs continned Instructions: Perform the following tasks: 1. Copy the foodbank html template fle in the labl emplate folder from the Data Files for Students to your labl emplate folder 2. Open your text editor and then open the foodbank.htm template file in the labl folder and.u 3. In the about.html document, add a section element within the main element. Crea 4. Add an artiel. element within the section element and then add the following use it to create the about.html file. Create an az element within the section element,Explanation / Answer
If you have any doubts, please give me comment...
It is media queries in CSS. It is for responsive web design for Desktop, Tabelt and Mobile.
about.html
<!DOCTYPE html>
<!-- This website template was created by: , 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>
<!DOCTYPE html>
<!-- This website template was created by: , 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>
<main>
<section>
<h2>We need Your Donations</h2>
<article>
<h4>Items We need</h4>
<p>Our pantry is in need of the following items:</p>
<ul>
<li>Canned chicken or tuna</li>
<li>Canned Vegetables</li>
<li>Oatmeal</li>
<li>Pasta</li>
<li>Peanut butter</li>
<li>Rice</li>
</ul>
</article>
<article>
<h4>Food Drive</h4>
<p>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.</p>
</article>
</section>
<aside> Note that we cannot accept perishable goods, opened food containers, or home made goods. </aside>
</main>
</body>
</html>
fbstyles.css
/* Style sheet created by: 4/16/2018 */
/* Style for body specifies a background color */
body {
background-color: #FFFFFF;
}
/* Styles for Mobile Layout */
section {
padding:1%;
text-align: Center;
}
article {
border-top: solid 0.2em #ff6600;
padding: 2%;
margin: 0.5%;
text-align: left;
}
aside{
/* Style for the container centers the page and specifies the width */
text-align: center;
color: #FFFFFF;
background-color: #FF6600;
font-size:1.25em;
margin:1em;
padding:1em;
}
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 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;
}
div p{
padding-left:1em;
padding-right:1em;
}
@media only screen and (min-width: 768px) {
/* Desktop*/
main{
overflow: auto;
}
section{
float:left;
width:60%;
}
aside{
float:right;
width:25%;
background-color:#FF6600;
color: #FFFFFF;
}
}
@media only screen and (min-width: 600px) {
/* Tablet*/
section{
background-color: #FF6600;
}
article{
background-color: #FFFFFF;
border-top:0;
border-radius: 0 3em 3em 3em;
margin-bottom:1em;
}
aside{
text-align: center;
color:#FF6600;
background-color:#FFFFFF;
box-shadow: 1em 1em 1em #000000;
border-radius:8em;
}
}
@media (min-width: 320px) and (max-width: 480px) {
/* 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;
}
}
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.