Lab 1: Integrating HTML5 Semantic Elements for the New Harvest Food Bank Website
Problem: You volunteer at a local food bank called New Harvest Food Bank that collects
community food donations and provides food and other services to those in need. The company
has asked you to create a responsive website. You have already created the website but now need to
add 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.

Instructions: Perform the following tasks:
1. Copy the foodbank.html template file in the lab1\template folder from the Data Files for
    Students to your lab1\template folder.
2. Open your text editor and then open the foodbank.html template file in the lab1 folder and use
     it to create the about.html file.
3. In the about.html document, add a section element within the main element. Create an
    h2 element within the section element, <h2>We Need Your Donations</h2>.
4. Add an article element within the section element and then add the following elements within the article element:
<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>

5. Add another article element after the first article element, but within the section element, and
    then add the following elements within the second article element:
     <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>
6. Add the following aside element after the section element:
     <aside>Note that we cannot accept perishable goods, opened food
                 containers, or home made goods.</aside>
7. In the fbstyles.css file, modify the comment at the top of the page to include today’s date.
8. In the fbstyles.css file, create a new style rule above the media queries for div p and add
    padding-left: 1em; and padding-right: 1em; to the style rule. Include a comment
     for this new style rule.

9. Add the following style rules to apply to the mobile viewport and include comments for each:
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;
}

10. Add the following style rules to apply to the tablet viewport and include comments for each:
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;
}

11. In the fbstyles.css file, add overflow: auto; to the main style rule for the desktop viewport.
12. Add the following style rules to apply to the desktop viewport and include comments for each:
section {
float: left;
width: 60%;
}
aside {
float: right;
width: 25%;
background-color: #FF6600;
color: #FFFFFF;
}
13. Validate your HTML code and fix any errors.
14. Validate your CSS code and fix any errors.
15. Save all files and open the about.html page within a browser and view the page in all three
      viewports, as shown in Figure 7–95.

16. Submit your assignment in the format specified by your instructor.
17. In this assignment, you created several HTML5 semantic elements. Research the time
      semantic element, identify its use, and then discuss its attribute and the different ways in which
      time can be displayed.