I need this assignment solved. Below I've attached the index.hmtl and styles.css CH 6 Apply Your Knowledge1 /*2 Author:3 File Name:4 Date:5 */7 /* CSS Reset */8 body, header, nav, main, footer, hl, div, article, h2 {margin: 0;padding: 0;border: 0;Chapter 6 Summary9101112 }1314 /* Style rules for body */15 body {16Tablet Media Queryln Chapter 6, you learned how to create a media query for a tablet viewport and style webpage content for a tablet viewport.background-color: O#fe9972;17 }18Desktop Media QueryIn Chapter 6, you learned how to create a media query for a desktop viewport and style webpage content for a desktop viewport.19 /* Style rules for mobile viewport */2021 /* Style rule for the header element */22 header {2324252627 }|2829 /* Style rules for the main content30 main {3132 }12font-family: Verdana, Arial, sans-serif;Other Media QueriesIn Chapter 6, you learned how to create a media queries for large desktop viewports and for print.margin: 1em;text-align: center;color:I#341509;Modify Breakpointsln Chapter 6, you learned how to use developer tools to determine an ideal breakpoint for a media query.*/padding: 1%;Dynamic Pseudo-Classesln Chapter 6, you learned how to use dynamic pseudo-classes to style navigation links based on their current state.3334 article {3536373839|40 }41|42 /* Style rule for the footer element */|43 footer {44454647 }background-color: I#a22c®2;color: O#ffe5dc;GradientsIn Chapter 6, you learned how to create a linear gradient. You also learned about radial gradients.padding: 2%;margin: 2% 1%;border: 1px solid|#Ø®0;Completed by: Student's Namefont-size: .70em;text-align: center;I#341509;color: 12Open the index.html file and update the comment with your nameIn the styles.css file, below the tablet media query, add a comment with the(firstname lastname), the file name, and today's date (MM/DD/YYYY). Addyour name to the paragraph element located within the footer elementnear the bottom of the page.text, Media Query for Desktop Viewport. Below the comment, add amedia query to target a desktop viewport screen with a minimum width of900рх.Open the styles.css file from the css folder. Modify the comment at the topof 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 selectorthat sets the width to 27% and the height to 140px.In the desktop media query, create another style rule for the articleIn the styles.css file, below the last style rule, add a new comment with thetext, Media Query for Tablet Viewport. Below the comment, add a mediaselector with a hover pseudo-class that sets the background-colorto #ffe5dc and the color to #a22c02.query to target screen and print for a tablet viewport. Use amin-width: 481px .Modify the style rule for the body selector by specifying a backgroundwith a linear gradient that uses a direction of to left, first color value of#fe9972, and second color value of #ffe5dc. Remove the declaration forIn the tablet media query, create a new style rule for the articlethe background color from the style rule.element that sets the width to 43%, floats the element to the left, and setsa height of 160px.Use Google Chrome's device mode to display the page in a mobile, tablet, anddesktop 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 selectorthat clears a float on the left.Validate your HTML and CSS files and correct any errors.

Question

Accepted Answer

Answer: index.html: