Instructions: Perform the following tasks: 1. Open the styles.css file in your text editor. Below the last style rule, add a comment with the text, Media Query for Tablet Viewport. 2. Below the comment, add a media query that targets a screen with a minimum width of 620px and print. 3. Add the following comments to the tablet media query: a. Tablet Viewport: Show tab-desk class, hide mobile class b. Tablet Viewport: Style rules for nav area 4. Add the following style rules below the Show tab-desk class, hide mobile class comment: a. Style rule for the tab-desk class selector that sets the display to a block. b. Style rule for the mobile class selector that sets the display to none. 5. Add the following style rules below the style rules for nav area comment: a. Style rule for the nav li selector that removes the top border, sets the display to an inline- block, and sets the font size to 1.25em. b. Style rule for the nav li a selector that sets the padding to 0.5em. 6. In the contact.html file, add mobile to the existing class attribute within the paragraph element on Line 44. 7. Insert a new Line 45 and add a paragraph element with the tab-desk class. Wrap the phone number, (814) 555-9228, within the paragraph element. 8. In the styles.css file, below the tablet media query, add a comment with the text, Media Query for Desktop Viewport. 9. Below the comment, add a media query that targets a screen with a minimum width of 1000px and print.
Instructions: Perform the following tasks: 1. Open the styles.css file in your text editor. Below the last style rule, add a comment with the text, Media Query for Tablet Viewport. 2. Below the comment, add a media query that targets a screen with a minimum width of 620px and print. 3. Add the following comments to the tablet media query: a. Tablet Viewport: Show tab-desk class, hide mobile class b. Tablet Viewport: Style rules for nav area 4. Add the following style rules below the Show tab-desk class, hide mobile class comment: a. Style rule for the tab-desk class selector that sets the display to a block. b. Style rule for the mobile class selector that sets the display to none. 5. Add the following style rules below the style rules for nav area comment: a. Style rule for the nav li selector that removes the top border, sets the display to an inline- block, and sets the font size to 1.25em. b. Style rule for the nav li a selector that sets the padding to 0.5em. 6. In the contact.html file, add mobile to the existing class attribute within the paragraph element on Line 44. 7. Insert a new Line 45 and add a paragraph element with the tab-desk class. Wrap the phone number, (814) 555-9228, within the paragraph element. 8. In the styles.css file, below the tablet media query, add a comment with the text, Media Query for Desktop Viewport. 9. Below the comment, add a media query that targets a screen with a minimum width of 1000px and print.
Database System Concepts
7th Edition
ISBN:9780078022159
Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Chapter1: Introduction
Section: Chapter Questions
Problem 1PE
Related questions
Question
Transcribed Image Text:Instructions: Perform the following tasks:
1. Open the styles.css file in your text editor. Below the last style rule, add a comment with the
text, Media Query for Tablet Viewport.
2. Below the comment, add a media query that targets a screen with a minimum width of 620px
and print.
3. Add the following comments to the tablet media query:
a. Tablet Viewport: Show tab-desk class, hide mobile class
b. Tablet Viewport: Style rules for nav area
4. Add the following style rules below the Show tab-desk class, hide mobile class comment:
a. Style rule for the tab-desk class selector that sets the display to a block.
b. Style rule for the mobile class selector that sets the display to none.
5. Add the following style rules below the style rules for nav area comment:
a. Style rule for the nav li selector that removes the top border, sets the display to an inline-
block, and sets the font size to 1.25 em.
b. Style rule for the nav li a selector that sets the padding to 0.5em.
6. In the contact.html file, add mobile to the existing class attribute within the paragraph
element on Line 44.
7. Insert a new Line 45 and add a paragraph element with the tab-desk class. Wrap the phone
number, (814) 555-9228, within the paragraph element.
8. In the styles.css file, below the tablet media query, add a comment with the text, Media
Query for Desktop Viewport.
9. Below the comment, add a media query that targets a screen with a minimum width of 1000px
and print.
Transcribed Image Text:Lab 2: Creating Media Queries for the Wild Rescues
Website
Problem: You volunteer at a local wildlife rescue, a nonprofit organization called Wild Rescues.
The organization rescues all kinds of wild animals, rehabilitates them, and then releases them
back into the wild. Wild Rescues needs a website to help raise awareness about the organization.
You have already created the mobile layout, but now need to add media queries for a tablet,
desktop, and print. Style the website shown in Figure 6-68 for the tablet viewport. Style the
website shown in Figure 6-69 for the desktop viewport. Style the website shown in Figure 6-70
for a large desktop viewport.
WILD RESCUES
Rescue. Rehabilitate. Release.
Home About Us Partnership Gallery FAQs Contact
Welcome to Wild Rescues. Our mission is to rescue, rehabilitate, and release
wildlife back into their natural environment. We are a nonprofit organization
dedicated to helping injured wildlife.
Our staff provides around the clock care for wildlife in need. We also provide
long-term care for wildlife that cannot be released back into their natural
environment.
Figure 6-68
Courtesy of Jessica Minnick
Expert Solution
This question has been solved!
Explore an expertly crafted, step-by-step solution for a thorough understanding of key concepts.
This is a popular solution!
Trending now
This is a popular solution!
Step by step
Solved in 2 steps
Knowledge Booster
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.Recommended textbooks for you
Database System Concepts
Computer Science
ISBN:
9780078022159
Author:
Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:
McGraw-Hill Education
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
Database System Concepts
Computer Science
ISBN:
9780078022159
Author:
Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:
McGraw-Hill Education
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
C How to Program (8th Edition)
Computer Science
ISBN:
9780133976892
Author:
Paul J. Deitel, Harvey Deitel
Publisher:
PEARSON
Database Systems: Design, Implementation, & Manag…
Computer Science
ISBN:
9781337627900
Author:
Carlos Coronel, Steven Morris
Publisher:
Cengage Learning
Programmable Logic Controllers
Computer Science
ISBN:
9780073373843
Author:
Frank D. Petruzella
Publisher:
McGraw-Hill Education