Homework Help is Here – Start Your Trial Now!
Engineering
Computer Science
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
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
See similar textbooks
icon
Related questions
Question
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: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.
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
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
trending now

Trending now

This is a popular solution!

steps

Step by step

Solved in 2 steps

SEE SOLUTIONCheck out a sample Q&A here
Blurred answer
Knowledge Booster
Hyperlinks
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.
Similar questions
Recommended textbooks for you
Database System Concepts
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)
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
Digital Fundamentals (11th Edition)
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
C How to Program (8th Edition)
C How to Program (8th Edition)
Computer Science
ISBN:
9780133976892
Author:
Paul J. Deitel, Harvey Deitel
Publisher:
PEARSON
Database Systems: Design, Implementation, & Manag…
Database Systems: Design, Implementation, & Manag…
Computer Science
ISBN:
9781337627900
Author:
Carlos Coronel, Steven Morris
Publisher:
Cengage Learning
Programmable Logic Controllers
Programmable Logic Controllers
Computer Science
ISBN:
9780073373843
Author:
Frank D. Petruzella
Publisher:
McGraw-Hill Education
SEE MORE TEXTBOOKS