Styles.css :root { --theme-color: #7395AE; --theme-dark-color: #557A95; --primary-font-color: #5D5C61; --link-font-color
Posted: Thu Jul 14, 2022 2:10 pm
Styles.css
:root {
--theme-color: #7395AE;
--theme-dark-color: #557A95;
--primary-font-color: #5D5C61;
--link-font-color: white;
}
body {
font-family: Helvetica, sans-serif;
color: var(--primary-font-color);
padding: 10px;
}
a {
text-decoration: none;
color: var(--theme-dark-color);
}
header > h1 {
color: var(--theme-dark-color);
font-size: 2rem;
margin: 10px 0;
text-shadow: 2px 2px 3px gray;
}
.stretch-image {
width: 95vw;
}
/* TODO: Add ul rule to show check.svg in background */
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Images Lab</title>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<h1>Mediterranian Vacations</h1>
</header>
<main>
<h2>Egypt</h2>
<!-- TODO: Add srcset attribute -->
<img src="egypt_600.jpg" alt="Great Sphyinx and pyramid" class="stretch-image">
<p>Egpyt is a land of enduring beauty and rich culture.
Explore the capital city of <strong>Cairo</strong>,
the <strong>Great Pyramids of Giza</strong>, and the
iconic <strong>Great Sphinx</strong>!
</p>
<!-- TODO: Add srcset and sizes attributes -->
<img src="luxor_600.jpg" alt="Luxor Temple">
<p>
Packages include airfare, lodging, and several guided tours!
</p>
<ul>
<li>
<p>
<strong>Deluxe Package:</strong> 7 days in Cairo, Aswan, Luxor and Alexandria, 4 day Nile River cruise.
</p>
</li>
<li>
<p>
<strong>Super Package:</strong> 4 days in Cairo, 3 day Nile River cruise.
</p>
</li>
<li>
<p>
<strong>Express Package:</strong> 4 days in Cairo and upper Egypt on land.
</p>
</li>
</ul>
<!-- TODO: Add <picture> -->
<img src="hotel_narrow.jpg" alt="Hotel" class="stretch-image">
</main>
<footer>
<p>
<a href="mailto:[email protected]">[email protected]</a>
</p>
<p>
© 2020 Mediterranian Vacations
</p>
</footer>
</body>
</html>
10.9 LAB: Responsive images for a vacation website In this lab, you will add responsive images to the Egypt vacation web page as shown below. Mediterranean Vacations Egypt Egypt is a land of enduring beauty and nich culture. Explore the capital city of Cairo, the Great Pyramids of Giza. and the iconic Great Sphinx! Packages include airlare, lodging, and severat guided tourst - Deluxe Package: 7 days in Cago, Afwan, Luxor and Alexandria, 4 day Nile Rover crulse - Super Packape: 4 days in Cairo, 3 day Nile River cruise - Express Package: 4 days in Caire and upper Egypt on land. travelamedvacabions com O 2020 Mediterranean Vacations
Different resolutions for different DPRs (2 points) Modify the first < img> in egypt.html to use the srcset attribute. Show egypt.600.jpg on a 1 DPR screen, egypt_1200.jpg on a 2.DPR screen, and egypt_1800.jpg on a 3 . DPR screen, The Chrome DevTools' Network tab can be used to verify that the appropriate image is requested depending on the DPR. Ex: The screenshot below shows egypt.1200.jpg is requested when the DPR is 2.0. Different image sizes for different viewport widths (3 points) Modify the second > in egypt html to use the srcset and sizes attributes. The srcset attribute should indicate the image names and associated sizes: - luxor_600.jpg is 600 pixels wide - luxor_800.jpg is 800 pixels wide - luxor_1200.jpg is 1200 pixels wide The sizes attribute should describe the image size requirements for various viewport widths: - When the viewport width is at least 700px wide, the image width should be 600px. - When the viewport width is at least 500px wide, the image width should be 400px. - The default image width should be 200px.
Resizing the browser width should cause the three different images to display at the 500 and 700 breakpoints. Art direction for different viewport widths (3 points) Add < picture > tags around the third < img > in egypt.html. Then add the appropriate tag inside < picture > so hotel_wide.jpg is displayed instead of hotel_narrow.jpg when the viewport width is at least 500px wide. Resizing the browser should display hotel_narrow.jpg when the viewport width is <500px wide and hotel_wide.jpg otherwise. SVG image for list background (2 points) Modify styles.css so check.svg is displayed centered in the background of the unordered list. Set the following CSS properties: - background-image should display check.svg - background-repeat should be no-repeat - background-position should be center - background-size should be 60vw Resizing the browser width should cause the check.svg image to grow and shrink. Photos by Frank McCown used with permission.
:root {
--theme-color: #7395AE;
--theme-dark-color: #557A95;
--primary-font-color: #5D5C61;
--link-font-color: white;
}
body {
font-family: Helvetica, sans-serif;
color: var(--primary-font-color);
padding: 10px;
}
a {
text-decoration: none;
color: var(--theme-dark-color);
}
header > h1 {
color: var(--theme-dark-color);
font-size: 2rem;
margin: 10px 0;
text-shadow: 2px 2px 3px gray;
}
.stretch-image {
width: 95vw;
}
/* TODO: Add ul rule to show check.svg in background */
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Images Lab</title>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<h1>Mediterranian Vacations</h1>
</header>
<main>
<h2>Egypt</h2>
<!-- TODO: Add srcset attribute -->
<img src="egypt_600.jpg" alt="Great Sphyinx and pyramid" class="stretch-image">
<p>Egpyt is a land of enduring beauty and rich culture.
Explore the capital city of <strong>Cairo</strong>,
the <strong>Great Pyramids of Giza</strong>, and the
iconic <strong>Great Sphinx</strong>!
</p>
<!-- TODO: Add srcset and sizes attributes -->
<img src="luxor_600.jpg" alt="Luxor Temple">
<p>
Packages include airfare, lodging, and several guided tours!
</p>
<ul>
<li>
<p>
<strong>Deluxe Package:</strong> 7 days in Cairo, Aswan, Luxor and Alexandria, 4 day Nile River cruise.
</p>
</li>
<li>
<p>
<strong>Super Package:</strong> 4 days in Cairo, 3 day Nile River cruise.
</p>
</li>
<li>
<p>
<strong>Express Package:</strong> 4 days in Cairo and upper Egypt on land.
</p>
</li>
</ul>
<!-- TODO: Add <picture> -->
<img src="hotel_narrow.jpg" alt="Hotel" class="stretch-image">
</main>
<footer>
<p>
<a href="mailto:[email protected]">[email protected]</a>
</p>
<p>
© 2020 Mediterranian Vacations
</p>
</footer>
</body>
</html>
10.9 LAB: Responsive images for a vacation website In this lab, you will add responsive images to the Egypt vacation web page as shown below. Mediterranean Vacations Egypt Egypt is a land of enduring beauty and nich culture. Explore the capital city of Cairo, the Great Pyramids of Giza. and the iconic Great Sphinx! Packages include airlare, lodging, and severat guided tourst - Deluxe Package: 7 days in Cago, Afwan, Luxor and Alexandria, 4 day Nile Rover crulse - Super Packape: 4 days in Cairo, 3 day Nile River cruise - Express Package: 4 days in Caire and upper Egypt on land. travelamedvacabions com O 2020 Mediterranean Vacations
Different resolutions for different DPRs (2 points) Modify the first < img> in egypt.html to use the srcset attribute. Show egypt.600.jpg on a 1 DPR screen, egypt_1200.jpg on a 2.DPR screen, and egypt_1800.jpg on a 3 . DPR screen, The Chrome DevTools' Network tab can be used to verify that the appropriate image is requested depending on the DPR. Ex: The screenshot below shows egypt.1200.jpg is requested when the DPR is 2.0. Different image sizes for different viewport widths (3 points) Modify the second > in egypt html to use the srcset and sizes attributes. The srcset attribute should indicate the image names and associated sizes: - luxor_600.jpg is 600 pixels wide - luxor_800.jpg is 800 pixels wide - luxor_1200.jpg is 1200 pixels wide The sizes attribute should describe the image size requirements for various viewport widths: - When the viewport width is at least 700px wide, the image width should be 600px. - When the viewport width is at least 500px wide, the image width should be 400px. - The default image width should be 200px.
Resizing the browser width should cause the three different images to display at the 500 and 700 breakpoints. Art direction for different viewport widths (3 points) Add < picture > tags around the third < img > in egypt.html. Then add the appropriate tag inside < picture > so hotel_wide.jpg is displayed instead of hotel_narrow.jpg when the viewport width is at least 500px wide. Resizing the browser should display hotel_narrow.jpg when the viewport width is <500px wide and hotel_wide.jpg otherwise. SVG image for list background (2 points) Modify styles.css so check.svg is displayed centered in the background of the unordered list. Set the following CSS properties: - background-image should display check.svg - background-repeat should be no-repeat - background-position should be center - background-size should be 60vw Resizing the browser width should cause the check.svg image to grow and shrink. Photos by Frank McCown used with permission.