Open index.html in Google Chrome's device mode and resize the page to the current breakpoint for the tablet media query, which is 481px. Note how the navigation links appear on two lines. Use Google Chrome's device mode to determine the mallest breakpoint that shows the navigation links on the same line. n the styles.css file, modify the tablet media query with a more suitable breakpoint value that displays the navigation links on the same line. Open index.html in a browser and simulate a tablet or desktop viewport. Note that the image does not display in either -iewport. n the styles.css file, within the tablet media query, add a new comment two lines below the opening media query brace hat indicates that the following style rule shows the tablet-desktop class. Below the comment, add a new style rule for he tablet-desktop class that sets the display as a block. n the styles.css file, modify the body style rule to use a linear gradient for the background with color alues #e5e0fa and #29157e. Remove the declaration that specifies a background color. Within the desktop media query, add a new comment two lines below the opening media query brace that indicates that he following style rule is for the header element when displayed in a desktop viewport. Below the comment, add a style rule for the header selector that sets the width to 25% and floats it to the left. Within the desktop media query, add a new style rule below the navigation comment that aligns text to the right for unordered list elements within the nav element. Within the desktop media query, below the style rule for nav li a, add a new style rule for the nav li a selector that uses he hover pseudo-class. Set the color to #4424d6 and the background color to #e5e0fa. n the index.html file, add the class attribute col-content to the three div elements nested within the main element. n the styles.css file, within the desktop media query, below the style rule for main, add a new style rule for the col- content class selector that sets a width of 30%, sets a float to the left, and padding of 1.5% on all sides. n the styles.css file, below the last media query, add a new comment with the text, Media Query for Large Desktop Viewport. Below the comment, create a new media query that targets a screen with minimum width of 1441px. Inside the media query, create a style rule for the #container selector that sets the width to 1440px, the top and bottom margins o Opx, and the left and right margins to auto.
Open index.html in Google Chrome's device mode and resize the page to the current breakpoint for the tablet media query, which is 481px. Note how the navigation links appear on two lines. Use Google Chrome's device mode to determine the mallest breakpoint that shows the navigation links on the same line. n the styles.css file, modify the tablet media query with a more suitable breakpoint value that displays the navigation links on the same line. Open index.html in a browser and simulate a tablet or desktop viewport. Note that the image does not display in either -iewport. n the styles.css file, within the tablet media query, add a new comment two lines below the opening media query brace hat indicates that the following style rule shows the tablet-desktop class. Below the comment, add a new style rule for he tablet-desktop class that sets the display as a block. n the styles.css file, modify the body style rule to use a linear gradient for the background with color alues #e5e0fa and #29157e. Remove the declaration that specifies a background color. Within the desktop media query, add a new comment two lines below the opening media query brace that indicates that he following style rule is for the header element when displayed in a desktop viewport. Below the comment, add a style rule for the header selector that sets the width to 25% and floats it to the left. Within the desktop media query, add a new style rule below the navigation comment that aligns text to the right for unordered list elements within the nav element. Within the desktop media query, below the style rule for nav li a, add a new style rule for the nav li a selector that uses he hover pseudo-class. Set the color to #4424d6 and the background color to #e5e0fa. n the index.html file, add the class attribute col-content to the three div elements nested within the main element. n the styles.css file, within the desktop media query, below the style rule for main, add a new style rule for the col- content class selector that sets a width of 30%, sets a float to the left, and padding of 1.5% on all sides. n the styles.css file, below the last media query, add a new comment with the text, Media Query for Large Desktop Viewport. Below the comment, create a new media query that targets a screen with minimum width of 1441px. Inside the media query, create a style rule for the #container selector that sets the width to 1440px, the top and bottom margins o Opx, and the left and right margins to auto.
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...
Related questions
Question
I need this assignment solved. Below is index.html and styles.css
index.html
<html lang="en">
<head>
<title>Template</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">
<!-- Use the header area for the website name or logo -->
<header>
<h1>Website Template</h1>
</header>
<!-- Use the nav area to add hyperlinks to other pages within the website -->
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</nav>
<div id="hero" class="tablet-desktop">
<img src="images/sunset.jpg" alt="sunset on the water">
</div>
<!-- Use the main area to add the main content of the webpage -->
<main>
<div>
<h2>Headline 1</h2>
</div>
<div>
<h2>Headline 2</h2>
</div>
<div>
<h2>Headline 3</h2>
</div>
</main>
<!-- Use the footer area to add webpage footer content -->
<footer>
<p>Template Created by: </p>
</footer>
</div>
</body>
</html>
styles.css/* CSS reset */
body, header, nav, main, footer, img, h1, h3, ul {
margin: 0;
padding: 0;
border: 0;
}
/* Style rule for body and images */
body {
background-color: #e5e0fa;
}
img {
max-width: 100%;
display: block;
}
/* Styles for Mobile Layout */
/* Hide tablet-desktop content */
.tablet-desktop {
display: none;
}
/* Style rule for the header */
header {
padding: 2%;
color: #110934;
text-align: center;
}
/* Style rules for navigation area */
nav ul {
list-style-type: none;
text-align: center;
}
nav li {
font-size: 1.5em;
font-family: Arial, sans-serif;
border-radius: 5px;
border: 1px solid #110934;
margin: 1%;
background-color: #29157e;
}
nav li a {
display: block;
color: #fff;
padding: 0.5em 1em;
text-decoration: none;
}
/* Style rules for the main content */
main {
display: block;
font-family: Georgia, "Times New Roman", sans-serif;
font-size: 1em;
padding: 1em;
background-color: #FFFFFF;
border-top: solid 0.2em #110934;
border-bottom: solid 0.2em #110934;
}
/* Style rule for footer */
footer {
font-size: .70em;
text-align: center;
margin-top: 2em;
color: #fff;
}
/* Media Query for Tablet Viewport */
@media screen and (min-width: 481px), print {
/* Tablet Viewport: Style rules for nav area */
nav li {
display: inline-block;
margin: 0.5%;
}
nav li a {
padding: 0.1em 1em;
}
}
/* Media Query for Desktop Viewport */
@media screen and (min-width: 769px), print {
/* Desktop Viewport: Style rules for nav */
nav li {
border-radius: 0;
}
nav li a {
display: inline-block;
padding: 0.7em;
}
/* Desktop Viewport: Style rules for the main content */
main {
border-style: none;
margin-bottom: 1em 0;
overflow: auto;
}
/* Desktop Viewport: Style rule for footer */
footer {
clear: left;
}
}
Transcribed Image Text:Open index.html in Google Chrome's device mode and resize the page to the current breakpoint for the tablet media query,
which is 481px. Note how the navigation links appear on two lines. Use Google Chrome's device mode to determine the
smallest breakpoint that shows the navigation links on the same line.
In the styles.css file, modify the tablet media query with a more suitable breakpoint value that displays the navigation links
on the same line.
Open index.html in a browser and simulate a tablet or desktop viewport. Note that the image does not display in either
viewport.
In the styles.css file, within the tablet media query, add a new comment two lines below the opening media query brace
that indicates that the following style rule shows the tablet-desktop class. Below the comment, add a new style rule for
the tablet-desktop class that sets the display as a block.
In the styles.css file, modify the body style rule to use a linear gradient for the background with color
values #e5e0fa and #29157e. Remove the declaration that specifies a background color.
Within the desktop media query, add a new comment two lines below the opening media query brace that indicates that
the following style rule is for the header element when displayed in a desktop viewport.
Below the comment, add a style rule for the header selector that sets the width to 25% and floats it to the left.
Within the desktop media query, add a new style rule below the navigation comment that aligns text to the right for
unordered list elements within the nav element.
Within the desktop media query, below the style rule for nav li a, add a new style rule for the nav li a selector that uses
the hover pseudo-class. Set the color to #4424d6 and the background color to #e5e0fa.
In the index.html file, add the class attribute col-content to the three div elements nested within the main element.
In the styles.css file, within the desktop media query, below the style rule for main, add a new style rule for the col-
content class selector that sets a width of 30%, sets a float to the left, and padding of 1.5% on all sides.
In the styles.css file, below the last media query, add a new comment with the text, Media Query for Large Desktop
Viewport. Below the comment, create a new media query that targets a screen with minimum width of 1441px. Inside the
media query, create a style rule for the #container selector that sets the width to 1440px, the top and bottom margins
to Opx, and the left and right margins to auto.
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 4 steps with 6 images
Recommended textbooks for you
Computer Networking: A Top-Down Approach (7th Edi…
Computer Engineering
ISBN:
9780133594140
Author:
James Kurose, Keith Ross
Publisher:
PEARSON
Computer Organization and Design MIPS Edition, Fi…
Computer Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning
Computer Networking: A Top-Down Approach (7th Edi…
Computer Engineering
ISBN:
9780133594140
Author:
James Kurose, Keith Ross
Publisher:
PEARSON
Computer Organization and Design MIPS Edition, Fi…
Computer Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning
Concepts of Database Management
Computer Engineering
ISBN:
9781337093422
Author:
Joy L. Starks, Philip J. Pratt, Mary Z. Last
Publisher:
Cengage Learning
Prelude to Programming
Computer Engineering
ISBN:
9780133750423
Author:
VENIT, Stewart
Publisher:
Pearson Education
Sc Business Data Communications and Networking, T…
Computer Engineering
ISBN:
9781119368830
Author:
FITZGERALD
Publisher:
WILEY