i need this assignment solved. below is index.html and styles.csstasksLink the index.html file to the styles.css style sheet, located in the css subfolder. Open the file in Google Chrome’s device mode to display the page in a mobile viewport.In the index.html file, add a class attribute with the value tablet-desk to the second div element within the main element.In styles.css, below the body style rule, create a new style rule for the img selector the sets a maximum width of 100% and sets the display value to block.Add two blank lines after the img style rule, add a comment with the text, Style rules for mobile viewport.Add two blank lines after the mobile viewport comment, add another comment with the text, Style rule to hide tablet-desk class, and then create a style rule that hides the tablet-desk class.Add the following declarations to the nav style rule:Specify a sticky position compatible with all modern browsers. (Hint: Use two position declarations and include the -webkit- prefix for the first declaration.)Specify a top property value of 0px.Add a declaration to the nav ul style rule that removes the bullet marker.Add a declaration to the nav li style rule that sets the display to an inline-block.After the main style rule, create a style rule for the corner class that specifies a border radius of 12px.Open fonts.google.com in your browser, search for and select the B612 and Crimson Pro fonts. Copy and paste the link element provided by Google Fonts within the headelement in the index.html file.In the styles.css file, update the following style rules:Update the nav li style rule to use the B612 Google Font.Update the main style rule to use the Crimson Pro Google Font.Index.html<html lang="en"><head> <link rel="stylesheet" href="styles.css"> <title>Responsive Design</title> <meta charset="utf-8"></head><body> <div id="container">  <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="#">Resources</a></li> <li><a href="#">W3C</a></li> </ul> </nav>  <header> <h1>Responsive Design</h1> </header>  <main> <div id ="info"> <div class="tablet-desk"> <h2>Fluid Layout</h2> <p>A fluid layout automatically adjusts its design based on the size of the viewport.</p> <h2>Responsive Images</h2> <p>Reponsive images grow and shrink with the size of the viewport.</p> <h2>Media Queries</h2> <p>Use media queries to style content for different sized viewports.</p> </div> <div> <h2>Lorem Ipsum</h2> </div> <div id="image"> <img src="images/clouds.jpg" alt="clouds in the sky" div class="corner"> </div> </main> </div> </body></html>styles.css/* CSS Reset */body, header, nav, main, footer, h1, div, img, ul { margin: 0; padding: 0; border: 0;}/* Style rule for body and images */body { background-color: #e4f1f6;}img { max-width: 100%; display: block;}/*Style rule for mobile viewport*//*Style rule to hide tablet-desk class*/{display:none;}/* Style rule for header */header { font-family: Verdana, Arial, sans-serif; text-align: center; padding: 3%; color: #092834; margin-top: 5%;}/* Style rules for nav */nav { padding: 1%; margin-bottom: 1%; background-color: #67afcb;}nav ul { text-align: center;}nav li { font-size: 1.5em; padding: 4%;}nav li a { display: block; color: #092834; text-decoration: none;}/* Style rules for main content */main { display: block; margin: 1% 1% 15%; padding: 1%; font-size: 1.5em;}corner class { border-radius: 12px;}image { margin-bottom: 1%;}/* Style rule for footer */footer { font-size: .70em; text-align: center; margin-top: 2em;}

The HTML and CSS file contents are given in the next steps along with the output screenshot I have…

i need this assignment solved. below is index.html and styles.css tasks Link the index.html file to the styles.css style sheet, located in the css subfolder. Open the file in Google Chrome’s device mode to display the page in a mobile viewport. In the index.html file, add a class attribute with the value tablet-desk to the second div element within the main element. In styles.css, below the body style rule, create a new style rule for the img selector the sets a maximum width of 100% and sets the display value to block. Add two blank lines after the img style rule, add a comment with the text, Style rules for mobile viewport. Add two blank lines after the mobile viewport comment, add another comment with the text, Style rule to hide tablet-desk class, and then create a style rule that hides the tablet-desk class. Add the following declarations to the nav style rule: Specify a sticky position compatible with all modern browsers. (Hint: Use two position declarations and include the -webkit- prefix for the first declaration.) Specify a top property value of 0px. Add a declaration to the nav ul style rule that removes the bullet marker. Add a declaration to the nav li style rule that sets the display to an inline-block. After the main style rule, create a style rule for the corner class that specifies a border radius of 12px. Open fonts.google.com in your browser, search for and select the B612 and Crimson Pro fonts. Copy and paste the link element provided by Google Fonts within the headelement in the index.html file. In the styles.css file, update the following style rules: Update the nav li style rule to use the B612 Google Font. Update the main style rule to use the Crimson Pro Google Font. Index.html Responsive Design Home Resources W3C Responsive Design Fluid Layout A fluid layout automatically adjusts its design based on the size of the viewport. Responsive Images Reponsive images grow and shrink with the size of the viewport. Media Queries Use media queries to style content for different sized viewports. Lorem Ipsum styles.css /* CSS Reset */ body, header, nav, main, footer, h1, div, img, ul { margin: 0; padding: 0; border: 0; } /* Style rule for body and images */ body { background-color: #e4f1f6; } img { max-width: 100%; display: block; } /*Style rule for mobile viewport*/ /*Style rule to hide tablet-desk class*/ {display:none;} /* Style rule for header */ header { font-family: Verdana, Arial, sans-serif; text-align: center; padding: 3%; color: #092834; margin-top: 5%; } /* Style rules for nav */ nav { padding: 1%; margin-bottom: 1%; background-color: #67afcb; } nav ul { text-align: center; } nav li { font-size: 1.5em; padding: 4%; } nav li a { display: block; color: #092834; text-decoration: none; } /* Style rules for main content */ main { display: block; margin: 1% 1% 15%; padding: 1%; font-size: 1.5em; } corner class { border-radius: 12px; } image { margin-bottom: 1%; } /* Style rule for footer */ footer { font-size: .70em; text-align: center; margin-top: 2em; }

i need this assignment solved. below is index.html and styles.css tasks Link the index.html file to the styles.css style sheet, located in the css subfolder. Open the file in Google Chrome’s device mode to display the page in a mobile viewport. In the index.html file, add a class attribute with the value tablet-desk to the second div element within the main element. In styles.css, below the body style rule, create a new style rule for the img selector the sets a maximum width of 100% and sets the display value to block. Add two blank lines after the img style rule, add a comment with the text, Style rules for mobile viewport. Add two blank lines after the mobile viewport comment, add another comment with the text, Style rule to hide tablet-desk class, and then create a style rule that hides the tablet-desk class. Add the following declarations to the nav style rule: Specify a sticky position compatible with all modern browsers. (Hint: Use two position declarations and include the -webkit- prefix for the first declaration.) Specify a top property value of 0px. Add a declaration to the nav ul style rule that removes the bullet marker. Add a declaration to the nav li style rule that sets the display to an inline-block. After the main style rule, create a style rule for the corner class that specifies a border radius of 12px. Open fonts.google.com in your browser, search for and select the B612 and Crimson Pro fonts. Copy and paste the link element provided by Google Fonts within the headelement in the index.html file. In the styles.css file, update the following style rules: Update the nav li style rule to use the B612 Google Font. Update the main style rule to use the Crimson Pro Google Font. Index.html Responsive Design Home Resources W3C Responsive Design Fluid Layout A fluid layout automatically adjusts its design based on the size of the viewport. Responsive Images Reponsive images grow and shrink with the size of the viewport. Media Queries Use media queries to style content for different sized viewports. Lorem Ipsum styles.css /* CSS Reset / body, header, nav, main, footer, h1, div, img, ul { margin: 0; padding: 0; border: 0; } / Style rule for body and images / body { background-color: #e4f1f6; } img { max-width: 100%; display: block; } /Style rule for mobile viewport/ /Style rule to hide tablet-desk class/ {display:none;} / Style rule for header / header { font-family: Verdana, Arial, sans-serif; text-align: center; padding: 3%; color: #092834; margin-top: 5%; } / Style rules for nav / nav { padding: 1%; margin-bottom: 1%; background-color: #67afcb; } nav ul { text-align: center; } nav li { font-size: 1.5em; padding: 4%; } nav li a { display: block; color: #092834; text-decoration: none; } / Style rules for main content / main { display: block; margin: 1% 1% 15%; padding: 1%; font-size: 1.5em; } corner class { border-radius: 12px; } image { margin-bottom: 1%; } / Style rule for footer */ footer { font-size: .70em; text-align: center; margin-top: 2em; }

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

Concept explainers

Question

i need this assignment solved. below is index.html and styles.css

tasks

Link the index.html file to the styles.css style sheet, located in the css subfolder. Open the file in Google Chrome’s device mode to display the page in a mobile viewport.

In the index.html file, add a class attribute with the value tablet-desk to the second div element within the main element.

In styles.css, below the body style rule, create a new style rule for the img selector the sets a maximum width of 100% and sets the display value to block.

Add two blank lines after the img style rule, add a comment with the text, Style rules for mobile viewport.

Add two blank lines after the mobile viewport comment, add another comment with the text, Style rule to hide tablet-desk class, and then create a style rule that hides the tablet-desk class.

Add the following declarations to the nav style rule:

Specify a sticky position compatible with all modern browsers. (Hint: Use two position declarations and include the -webkit- prefix for the first declaration.)
Specify a top property value of 0px.

Add a declaration to the nav ul style rule that removes the bullet marker.

Add a declaration to the nav li style rule that sets the display to an inline-block.

After the main style rule, create a style rule for the corner class that specifies a border radius of 12px.

Open fonts.google.com in your browser, search for and select the B612 and Crimson Pro fonts. Copy and paste the link element provided by Google Fonts within the headelement in the index.html file.

In the styles.css file, update the following style rules:

Update the nav li style rule to use the B612 Google Font.
Update the main style rule to use the Crimson Pro Google Font.

Index.html

<head>

<title>Responsive Design</title>

</head>

<body>

<nav>

<ul>

<li><a href="#">Resources</a></li>

</ul>

</nav>

<h1>Responsive Design</h1>

</header>

<main>

<h2>Fluid Layout</h2>

<p>A fluid layout automatically adjusts its design based on the size of the viewport.</p>

<h2>Responsive Images</h2>

<p>Reponsive images grow and shrink with the size of the viewport.</p>

<h2>Media Queries</h2>

<p>Use media queries to style content for different sized viewports.</p>

</div>

<div>

<h2>Lorem Ipsum</h2>

</div>

</div>

</main>

</div>

</body>

</html>

styles.css

/* CSS Reset */

body, header, nav, main, footer, h1, div, img, ul {

margin: 0;

padding: 0;

border: 0;

}

/* Style rule for body and images */

body {

background-color: #e4f1f6;

}

img {

max-width: 100%;

display: block;

}

/*Style rule for mobile viewport*/

/*Style rule to hide tablet-desk class*/

{display:none;}

/* Style rule for header */

header {

font-family: Verdana, Arial, sans-serif;

text-align: center;

padding: 3%;

color: #092834;

margin-top: 5%;

}

/* Style rules for nav */

nav {

padding: 1%;

margin-bottom: 1%;

background-color: #67afcb;

}

nav ul {

text-align: center;

}

nav li {

font-size: 1.5em;

padding: 4%;

}

nav li a {

display: block;

color: #092834;

text-decoration: none;

}

/* Style rules for main content */

main {

display: block;

margin: 1% 1% 15%;

padding: 1%;

font-size: 1.5em;

}

corner class {

border-radius: 12px;

}

image {

margin-bottom: 1%;

}

/* Style rule for footer */

footer {

font-size: .70em;

text-align: center;

margin-top: 2em;

}

Expert Solution

Trending now

This is a popular solution!

Step by step

Solved in 4 steps with 1 images

SEE SOLUTION Check out a sample Q&A here

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-engineering and related others by exploring similar questions and additional content below.

Recommended textbooks for you

Computer Networking: A Top-Down Approach (7th Edi…

Computer Engineering

ISBN:

9780133594140

Author:

James Kurose, Keith Ross

Publisher:

PEARSON