Lab 1: Designing for Tablet and Desktop Viewports for the New Harvest Food Bank
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. Start with the fbstyles.css and
index.html files you completed in Chapter 5. You have already created the mobile layout,
but now need to design a tablet and desktop layout. Style the webpage shown in the

Figure 6–58 for the tablet viewport and shown in Figure 6–59  for the desktop viewport.

Instructions: Perform the following tasks:
1. Open your text editor and then open the index.html file in the lab1 folder and the
    fbstyles.css file in the lab1\css folder.
2. In the index.html document, modify the comment at the top of the page to include
    today’s date.
3. In the index.html document, insert a div element, div class="desktop" below the
    div class=“mobile” element.
4. In the index.html document, insert the following paragraph elements in the new div
    class="desktop" element.
    <p>Too many people in our local community go to bed hungry, many of
          whom are children. We can reduce that number, but we need your help.
     </p>

      <p>New Harvest Food Bank is proud to help and support our local community.
            Through your donations, we are able to help feed those in need.
           Please partner with us and help those in your local community with
           food donations, clothing donations, or by volunteering your time.</p>

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 a media query for a tablet viewport and use min-width: 481px.
7. Add the following style rules to the tablet media query and include comments for each.

7. Add the following style rules to the tablet media query and include comments for each.
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: 12em;
}
.mobile {
display: none;
}
.desktop {
display: inline;
}

8. In the fbstyles.css file, create a media query for a desktop viewport and use min-width:769px.
9. Add the following styles to the desktop media query and include comments for each.
#container {
width: 80%;
}

nav {
margin-top: -5em;
}
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.7em;
font-size: 1.25em;
}
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;
}

10. In the fbstyles.css file, add a style rule to hide the desktop class for the mobile layout and
include a comment.
11. Validate your HTML code and fix any errors.
12. Validate your CSS code and fix any errors.
13. Save all files and open the index.html page within a browser as shown in Figure 6–58 for a
     tablet viewport and Figure 6–59 for a desktop viewport.

14. Submit your assignment in the format specified by your instructor.
15. In step 9, you created a style rule for the nav element and used a negative number for the
      top margin value. Discuss the effect of this property and value on the nav element.