Lab 1: Creating a Table and a Form 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 create the Volunteer
page and insert a table. You also need to create the Contact Us page and insert a form. Create and style
the table on the Volunteer page as shown in Figure 8–64 for the mobile, tablet, and desktop viewports.
Create and style the form on the Contact Us page as shown in Figure 8–65 for the mobile, tablet, and
desktop viewports.

Instructions: Perform the following tasks:
1. Open your text editor and then open the foodbank.html template file in the lab1 folder and use
      it to create the volunteer.html file.
2. In the volunteer.html document, update the comment at the top of the page to include
    today’s date, then create an h2 element within the main element: <h2>We have several
   opportunities for you to help your fellow community members.</h2>.
3. Create the following div element below the h2 element.
<div class="mobile">
<p>Our Volunteer Opportunities include:</p>
<ul>
<li>Pantry Organizer</li>
<li>Food Package Assembly</li>
<li>Food Transporter</li>
<li>Food Server</li>
</ul>

<p>Please contact us at <a href="tel:5559987">(555) 555-9987</a> for
more details.</p>
</div>

4. Create a div element with a class=”desktop” after the mobile class div and then add the
     following table:

<table>
<caption>Volunteer Opportunities</caption>
<tr>
<th>Position</th>
<th>Date</th>
<th>Time</th>
<th>Location</th>
</tr>
<tr>
<td>Pantry Organizer</td>
<td>Every Friday</td>
<td>9:00am - 12:00pm</td>
<td>Main Warehouse</td>
</tr>
<tr>
<td>Food Package Assembly</td>
<td>Every Monday</td>
<td>9:00am - 12:00pm</td></tr>
<tr>
<td>Food Transporter</td>
<td>Every day</td>
<td>12:00pm - 4:00pm</td>
<td>Various locations</td>
</tr>
<tr>
<td>Food Server</td>
<td>Every Tuesday, Wednesday, and Thursday</td>
<td>12:00pm - 2:00pm</td>
<td>Various locations</td>
</tr>
</table>

5. In the fbstyles.css  file, modify the comment at the top of the page to include today’s date.
6. In the fbstyles.css file, create the following new style rules within the tablet media query and include comments for each:
table, th, td {
border: solid 0.1em #FF6600;
border-collapse: collapse;
padding: 1em;
}
caption {
font-size: 1.5em;
padding-bottom: 1em;
}
7. In the fbstyles.css file, create the following new style rules within the desktop
     media query and include a comment:

table {
width: 80%;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
}

8. Save all files and open the volunteer.html page within a browser and view the page
    in all three viewports, as shown in Figure 8–64.
9. Open your text editor and then open the foodbank.html template file in the lab1
    folder. Use the template to create the contact.html file.
10. In the contact.html document, update the comment at the top of the page to
     include today’s date, and then create an h4 element within the main element:
     <h4>Please complete the form below for more information about our volunteer opportunities.</h4>.
11. Create the following form below the h4 element within the main element:

<form>
<label for="fName">First Name:</label>
<input type="text" name="fName" id="fName">
<label for="lName">Last Name:</label>
<input type="text" name="lName" id="lName">
<label for="email">Email Address:</label>
<input type="email" name="email" id="email">
<label for="phone">Phone Number:</label>
<input type="tel" name="phone" id="phone">

<label for="comments">Comments:</label>
<textarea id="comments" name="comments" rows="3" cols="25">
</textarea>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>

12. In the fbstyles.css fie, create the following new style rules above the media queries and include 
    comments for each:

input, textarea {
display: block;
margin-bottom: 1em;
}
label {
display: block;
}

13. In the fbstyles.css  file, create the following new style rules within the tablet media query and
    include a comment:

label {
float: left;
padding-right: 0.5em;
text-align: right;
width: 8em;
}

14. Save all  files, open the contact.html page within a browser, and view the page in all three
      viewports, as shown in Figure 8–65.
15. Validate your HTML code and fix any errors.
16. Validate your CSS code and fix any errors.
17. Submit your assignment in the format specified by your instructor.
18. In this assignment, you created a form on the Contact Us page. Research the radio button,
      describe how you could add it to this form, and provide an example of the HTML code required.