In the styles.css file, below the tablet media query, add a comment with the text, Media Query for Desktop Viewport. Below the comment, add a Open the index.html file and update the comment with your name (firstname lastname), the file name, and today's date (MM/DD/YYYY). Add your name to the paragraph element located within the footer element near the bottom of the page. media query to target a desktop viewport screen with a minimum width of 900px. Open the styles.css file from the css folder. Modify the comment at the top of the style sheet to include your name, file name, and the today's date. In the desktop media query, create a style rule for an article selector > that sets the width to 27% and the height to 140px. In the desktop media query, create another style rule for the article selector with a hover pseudo-class that sets the background-color > In the styles.css file, below the last style rule, add a new comment with the text, Media Query for Tablet Viewport. Below the comment, add a media > to #ffe5dc and the color to #a22c02. query to target screen and print for a tablet viewport. Use a min-width: 481px . > Modify the style rule for the body selector by specifying a background with a linear gradient that uses a direction of to left, first color value of #fe9972, and second color value of #ffe5dc. Remove the declaration for In the tablet media query, create a new style rule for the article the background color from the style rule. element that sets the width to 43%, floats the element to the left, and sets a height of 160px. Use Google Chrome's device mode to display the page in a mobile, tablet, and desktop viewport. Exit device mode to view and test the hover pseudo-class. In the tablet media query, create a new style rule for the footer selector that clears a float on the left. Validate your HTML and CSS files and correct any errors.

Computer Networking: A Top-Down Approach (7th Edition)

7th Edition

ISBN:9780133594140

Author:James Kurose, Keith Ross

Publisher:James Kurose, Keith Ross

Chapter1: Computer Networks And The Internet

Section: Chapter Questions

Problem R1RQ: What is the difference between a host and an end system? List several different types of end...

See similar textbooks

Related questions

Question

100%

I need this assignment solved. Below I've attached the index.hmtl and styles.css

Transcribed Image Text:The image shows two sections of code, which are intended to illustrate HTML structure and CSS styling for educational purposes. **Section 1: HTML Code** This section contains the HTML structure of a webpage focusing on chapter summaries and media query lessons. It includes semantic elements and comments to guide learners: ```html <!DOCTYPE html> <html> <head> <title>Ch 6 Apply Your Knowledge</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/styles.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="container">  <header> <h1>Chapter 6 Summary:</h1> </header>  <main> <article> <h2>Tablet Media Query</h2> <p>In Chapter 6, you learned how to create a media query for a tablet viewport and style webpage content for a tablet viewport.</p> </article> <article> <h2>Desktop Media Query</h2> <p>In Chapter 6, you learned how to create a media query for a desktop viewport and style webpage content for a desktop viewport.</p> </article> <article> <h2>Other Media Queries</h2> <p>In Chapter 6, you learned how to create media queries for large desktop viewports and for print.</p> </article> <article> <h2>Modify Breakpoints</h2> <p>In Chapter 6, you learned how to use developer tools to determine an ideal breakpoint for a media query.</p> </article> <article> <h2>Dynamic Pseudo-Classes</h2> <p>In Chapter 6, you learned how to use dynamic pseudo-classes to style navigation links based on their current state.</p> </article> <article> <h2>Gradients</h2> <p>In Chapter 6, you learned how to create a linear gradient. You also learned about radial gradients.</p> </article> </main>