- Week6 Lab Designing For Tablet And Desktop Viewports For The New Harvest Food Bank Problem You Volunteer At A Local Fo 1 (130.98 KiB) Viewed 173 times
- Week6 Lab Designing For Tablet And Desktop Viewports For The New Harvest Food Bank Problem You Volunteer At A Local Fo 2 (120.78 KiB) Viewed 173 times
/* Style sheet created by: ABC, 18/04/2022 */
/* 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 unordered 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: #36e236;
border-radius: 1em;
list-style-type: none;
margin: 0.3em;
padding: 0.4em;
}
/* Style changes navigation link text
color to white and removes the underline */
nav li a {
color: #FFFFFF;
text-decoration: none;
}
/* Style displays the mobile class
*/
.mobile {
display: inline;
<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>
}
/* 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;
}
Week6 Lab: 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 Figure 6.3 for the tablet viewport and shown in Figure 6.4 for the desktop viewport. Montana Food Bank >CO File C/Users/Syed/Deskt. Montana Food Bank Home About Volunteer Contact Too many people in our local community go to bed hungry, many of whom are children. We can change those statisties, but we need your help. Montana 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. Copyright 2020 All Speed సరుకులు Figure 6.3 Web Design with HTML & CSS3: Comprehensive, 8th Edition Jessica Minnick; Lisa Friedrichsen ISBN-10: 1305578163 ISBN-13: 9781305578166 © 2017 Cengage Learning Australia
- X Montana Food Bank + → COO File C:/Users/Syed/Desktop/Kent%20T2%202... ☆ Montana Food Bank Home About Volunteer Contact Too many people in our local community go to bed hungry, many of whom are children. We can change those statistics, but we need your help. Montana 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. © Copyright 2020. All Rights Reserved. info montanaftnetan Figure 6.4 Instructions: Perform the following tasks: 1. Open your text editor and then open the index.html file and the fbstyles.css file from Week6 Tutorial Material 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.
- X Montana Food Bank + → COO File C:/Users/Syed/Desktop/Kent%20T2%202... ☆ Montana Food Bank Home About Volunteer Contact Too many people in our local community go to bed hungry, many of whom are children. We can change those statistics, but we need your help. Montana 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. © Copyright 2020. All Rights Reserved. info montanaftnetan Figure 6.4 Instructions: Perform the following tasks: 1. Open your text editor and then open the index.html file and the fbstyles.css file from Week6 Tutorial Material 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. 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%; } Web Design with HTML & CSS3: Comprehensive, 8th Edition Jessica Minnick; Lisa Friedrichsen ISBN-10: 1305578163 | ISBN-13: 9781305578166 © 2017 Cengage Learning Australia main clear: left; margin-top: 12em; } .mobile display: none; } .desktop { display: inline; } 8. In the fbstyles.css_le, 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 {
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.3 for a tablet viewport and Figure 6.4 for a desktop viewport. 14. Submit your assignment in the format specified by your lecturer.