HTML5 and CSS3, Illustrated Complete Independent Challenge 3 Many of the clients
ID: 3802878 • Letter: H
Question
HTML5 and CSS3, Illustrated Complete Independent Challenge 3 Many of the clients of the Hotel Natoma navigate the area during their stays using smartphones, so the hotel has created layout for handheld devices for the site. You use media queries to add responsive layouts for standard and large desktop screens, starting with the What's Nearby page a. In your editor, open HTM I-9.html from the IC3 folder where you store your Data Files for this unit, save it as nearby.html, then repeat to save HTM 10.css as styles.css In the comment at the top of each file, enter your name and today's date where indicated, then save the files. Open nearby.html in a browser, resize the browser wNdow to its narrowest width, then resize it o its widest width while observing the layout b. Return to nearby.html in your editor, then in the section element with the class name aam, insert a figure element before the div element. Within the figure element, add an img element for the file images/aam.jpg with a width of 450, a height of 337, and alt text of the San Francisco Asian Art Museum, a beaux arts building composed of large granite bricks with columns above the entry doors. After the ing element and still within the figure element, add a figcaption element containing the text Asian Art Museum. Repeat to add a figure element to the section element with the class name city hall, adding an ing element for images/cityhall.jpg with a width of 450, a height of 299, and alt text of San Francisco City Hall, a beaux arts building with columns across the whole front and a gray dome over the center, illuminated from within at dusk, and a figcaption element containing the text City Hall. Save your changes. c. Return to styles.css in your editor, then in the main content section, a a style rule for figure elements within the article element below the article h3 rule1hatturnsoffthe display ofthe elements d. Above the print styles section, add a comment containing the text small screen/tablet styles Below the new comment, create a media query for with screens where the brow window is at least 550px wide, or for printed output. Within the media query create a style rule for figure elements within the article element that sets the maximum width to 50 .the margins to00 lem lem, floats the elements on the right, and sets the display to block, then create a stylerule for figcaption e article element ements W s text and bolds nal center a AMz case study docxExplanation / Answer
make the following changes and Try Executing these files
follow all the steps given in the question and make the changes in the file.
1.) nearby.html
<!--Your name and todays date -->
<html>
<head>
</head>
<script src="respond.min.js"> </script>
<body>
<section class="aam">
<figure>
<img src="images/aam.jpg" alt="the San Francisco Asian Art Museum, a beaux arts building composed of large granite bricks with columns above the entry doors." width="450" height="337">
<figcaption>Asian Art Museum</figcaption>
</figure>
<div>
</div>
</section>
<section class="cityhall">
<figure>
<img src="images/cityhall.jpg" alt="San Francisco City Hall, a beaux arts building with columns across the whole front and a gray dome over the center,illuminated from within at dusk" width="450" height="299">
<figcaption>City Hall</figcaption>
</figure>
<div>
</div>
</section>
</body>
</html
2.) style.css
/* your name and todays date */
article > figure {
display: none;
}
/* small screen/tablet styles*/
@media only screen and (min-width: 550px) {
article > figure {
max-width: 50%;
}
article > figcaption {
text-align: center;
font-weight: bold;
}
/* standard/wide screen styles */
@media only screen and (min-width: 550px) {
article {
padding: 0.6em 0 0
}
article > figure {
display: none;
}
article > section {
width: 100%;
height: 1000px;
background-size:cover;
background-position : center;
}
article > .aam > section {
background-image: url("images/aam.jpg");
}
article > .cityhall > section {
background-image: url("images/cityhall.jpg");
}
article > .ccplaza > section {
background-image: url("images/ccplaza.jpg");
}
article > .unplaza > section {
background-image: url("images/unplaza.jpg");
}
article > .cablecar > section {
background-image: url("images/cablecar.jpg");
}
article > section > div {
width:100%;
position: absolute;
z-index:2;
background: white;
background-color: rgba(255,255,255,0.6);
}
article > h3 , article > p {
margin: 0.6em;
}
}
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.