I am lost with this assignment from page 318 HTML5 and CSS3 Complete Vodnik 2nd
ID: 3591570 • Letter: I
Question
I am lost with this assignment from page 318 HTML5 and CSS3 Complete Vodnik 2nd Ed. I have attached the styles and museum unedited templates below the assignment
b. Return to styles.css in your editor, in the main content section and below the article p style rule, add a new rule for content before p elements within the article element. Add declarations to set the width and height to 90px and to create 5px of padding on the right. Below the style rule you just added, add a new rule for content before elements with the class value art. Add a declaration that specifies the image art.png in the images folder as the content. (Hint: Use the property value url(“images/art.png”).) Repeat to add a rule for content before elements with the class value culture that specifies the image culture.png in the images folder, and a rule for content before elements with the class value kids that specifies the image kids.png in the images folder. Save your changes, open museums.html in a browser, then verify that an icon is displayed to the left of the name of each museum, with a different icon for art museums, culture museums, and kids’ museums.
c. Return to styles.css in your editor, then in the main content section and within the article figure style rule, add a declaration that creates a background gradient at a 45 degree angle that starts with the color #93AD78 and ends with the color yellow. Save your changes, refresh or reload museums.html in your browser, then verify that a gradient is displayed behind the Haight-Ashbury Museum of Psychedelic Art and History caption. The gradient should start in the bottom left corner as light green and become more yellow moving up and toward the right.
d. If you have access to IE8, open museums.html in IE8 and verify that no gradient is displayed behind the Haight-Ashbury Museum of Psychedelic Art and History caption. Return to styles.css in your editor, then in the main content section and below the article figure style rule, add a new rule for the figure element within the article element and descended from an element with the class value .no-cssgradients. Add a declaration that specifies the file gradient.png within the images folder as the value for the background property, then below it, add the declaration background-size: cover; to ensure that the background image does not repeat. Save your changes, refresh museums.html in IE8, then verify that the gradient image is displayed behind the Haight-Ashbury Museum of Psychedelic Art and History caption.
e. Return to styles.css in your editor, then in the site navigation section and within thenav.sitenavigation li:hover style rule, add a declaration to apply a transform that displays the element at 1.3 times its default size. Add browser- specific declarations for Microsoft and WebKit browsers. Save your changes, refresh or reload museums.html in your browser, move your mouse pointer over one of the items in the nav bar, then verify that the item increases in size as shown in FIGURE K-27.
f. Return to styles.css in your editor, then in the site navigation section and within the nav.sitenavigation listylerule,add declarations that create a 0.1 second transition that uses the ease-out timing function. Include browser-specific properties for WebKit browsers. Save your changes, refresh or reload museums.html in your browser, move your mouse pointer over one of the items in the nav bar, then verify that the item takes a moment to grow to its final size
g. Return to styles.css in your editor, then in the main content section and above the article figcaption style rule, add a style rule for the img element within the figure element within the article element. Add declarations that create a 3 second animation with the name spin that uses the ease-out timing function. Add declarations using browser-specific properties for WebKit browsers. Below the new style rule, add an @keyframes rule with the name spin that applies a transform at 0% that rotates the element 360 degrees, and specifies 0 degrees of rotation at 100%. Duplicate the @keyframes rule using the browser-specific properties for WebKit browsers. (Hint: Specify WebKit properties for both the @keyframes rule itself and for the transform states.) Save your changes, refresh or reload museums.html in your browser, then verify that the image below the San Francisco Museums heading makes a full rotation when the page opens.
h. Validate all your HTML and CSS documents. Verify that your CSS contains no validation errors apart from the presence of the @-webkit-keyframes rule.
Unedited styles.css template:
/*
Hotel Natoma style sheet
Filename: styles.css
Author:
Date:
HTML5 and CSS3 Illustrated Unit K, Independent Challenge 3
*/
/* reset styles */
html {
font-size: 20px;
}
a, article, body, div, fieldset, figcaption, figure, footer, form, header, h1,
h2, h3, img, input, label, legend, li, nav, p, section, textarea, ul {
border: 0;
padding: 0;
margin: 0;
}
img {
max-width: 100%;
height: auto;
width: auto;
}
ul {
list-style-type: none;
}
/* body and page container */
body {
font-family: Arial, Helvetica, sans-serif;
}
.container {
max-width: 800px;
margin: 0 auto;
border-left: 3px solid black;
border-right: 3px solid black;
position: relative;
border-top-left-radius: 25px;
border-bottom-right-radius: 25px;
}
/* skip navigation link */
p.skipnavigation a {
position: absolute;
left: -10000px;
}
p.skipnavigation a:focus {
left: auto;
right: 1em;
top: 1em;
background-color: white;
color: #082008;
z-index: 2;
}
/* header section */
header {
padding: 0.5em;
background-color: #082008;
border-top-left-radius: 22px;
}
h1 img {
margin: 0 auto;
display: block;
}
/* site navigation */
nav.sitenavigation {
padding: 2%;
text-align: center;
background-color: #93ad78;
}
nav.sitenavigation li {
margin: 0 1em;
padding: 0.2em;
display: inline-block;
}
nav.sitenavigation li:hover {
background: #082008;
border-radius: 0.2em;
}
nav.sitenavigation a:link {
color: white;
text-decoration: none;
font-weight: bold;
}
nav.sitenavigation a:visited {
color: #dddddd;
}
nav.sitenavigation a:hover, nav.sitenavigation a:focus {
text-shadow: 0 0 6px #082008;
}
/* main content */
article {
padding: 2%;
background-color: linen;
overflow: auto;
}
article h2 {
margin-bottom: 0.6em;
font-family: "Krona One", Arial, Helvetica, sans-serif;
font-size: 1.6em;
line-height: 2em;
font-weight: 400;
text-align: center;
}
article figure {
max-width: 50%;
margin: 0 0 1em 1em;
float: right;
}
article figcaption {
padding: 0.2em;
text-align: center;
font-weight: bold;
}
article p {
margin: 0 2em 0.5em;
}
/* footer section */
footer {
padding: 10px;
text-align: center;
color: white;
background-color: #082008;
border-bottom-right-radius: 22px;
}
/* print styles */
@media print {
article {
width: 100%;
}
article, body, .container, footer {
border: 0;
color: rgb(0,0,0);
background-color: rgb(255,255,255);
}
body {
max-width: 100%;
}
nav {
display: none;
}
}
@page {
margin: 0.75in;
}
Unedited museum template:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hotel Natoma - San Francisco Museums</title>
<!--
Hotel Natoma San Francisco Museums web page
Filename: museums.html
Author:
Date:
HTML5 and CSS3 Illustrated Unit K, Independent Challenge 3
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="modernizr.custom.28018.js"></script>
<link href="http://fonts.googleapis.com/css?family=Krona+One" rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="icon" sizes="192x192" href="images/android.png">
</head>
<body>
<div class="container">
<p class="skipnavigation"><a href="#contentstart">Skip navigation</a></p>
<header>
<h1><a href="index.html"><img src="images/logo.gif" width="368" height="65" alt="Hotel Natoma"></a></h1>
</header>
<nav class="sitenavigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="nearby.html">What's Nearby</a></li>
<li><a href="museums.html">Museums</a></li>
<li><a href="greensf.html">Green SF</a></li>
<li><a href="reserve.html">Reservations</a></li>
</ul>
</nav>
<article>
<h2>San Francisco Museums</h2>
<figure>
<img src="images/tiedye.jpg" width="450" height="300" alt="colorful spiral tie dye print">
<figcaption>Haight-Ashbury Museum of Psychedelic Art and History</figcaption>
</figure>
<p class="culture">Alcatraz Island</p>
<p class="art">Asian Art Museum of San Francisco</p>
<p class="culture">Beat Museum</p>
<p class="culture">Cable Car Museum</p>
<p class="culture">California Academy of Sciences</p>
<p class="culture">California Historical Society</p>
<p class="art">California Palace of the Legion of Honor</p>
<p class="art">Cartoon Art Museum</p>
<p class="kids">Children’s Creativity Museum</p>
<p class="culture">Chinese Culture Center</p>
<p class="culture">Chinese Historical Society of America Museum and Learning Center</p>
<p class="culture">Contemporary Jewish Museum</p>
<p class="art">de Young Museum</p>
<p class="kids">Exploratorium</p>
<p class="culture">Fort Point National Historic Site</p>
<p class="culture">GLBT Historical Society Museum</p>
<p class="culture">Haight-Ashbury Museum of Psychedelic Art and History</p>
<p class="culture">International Museum of Women</p>
<p class="culture">Mission Cultural Center for Latino Arts</p>
<p class="culture">Museo ItaloAmericano</p>
<p class="art">Museum of Craft and Folk Art</p>
<p class="art">Museum of Performance & Design</p>
<p class="culture">Museum of Russian Culture</p>
<p class="culture">Museum of the African Diaspora</p>
<p class="art">Musée Mécanique</p>
<p class="art">New Langton Arts</p>
<p class="culture">North Beach Museum</p>
<p class="culture">Pacific Heritage Museum</p>
<p class="kids">Randall Museum</p>
<p class="art">San Francisco Arts Commission Gallery</p>
<p class="culture">San Francisco Fire Department Museum</p>
<p class="culture">San Francisco Maritime National Historical Park</p>
<p class="culture">San Francisco Museum and Historical Society</p>
<p class="art">San Francisco Museum of Craft & Design</p>
<p class="art">San Francisco Museum of Modern Art</p>
<p class="culture">San Francisco Railway Museum</p>
<p class="culture">USS Pampanito</p>
<p class="culture">Walt Disney Family Museum</p>
<p class="art">Wattis Institute for Contemporary Arts</p>
<p class="culture">Wax Museum at Fisherman’s Wharf</p>
<p class="art">Yerba Buena Center for the Arts</p>
</article>
<footer>
<p>568 Natoma St. • San Francisco, CA 94103 • (415) 555-8378</p>
</footer>
</div>
</body>
</html>
Explanation / Answer
The code is correct and changed
Unedited styles.css template:
/* reset styles */
html {
font-size: 20px;
}
a, article, body, div, fieldset, figcaption, figure, footer, form, header, h1,
h2, h3, img, input, label, legend, li, nav, p, section, textarea, ul {
border: 0;
padding: 0;
margin: 0;
}
img {
max-width: 100%;
height: auto;
width: auto;
}
ul {
list-style-type: none;
}
/* body and page container */
body {
font-family: Arial, Helvetica, sans-serif;
}
.container {
max-width: 800px;
margin: 0 auto;
border-left: 3px solid black;
border-right: 3px solid black;
position: relative;
border-top-left-radius: 25px;
border-bottom-right-radius: 25px;
}
/* skip navigation link */
p.skipnavigation a {
position: absolute;
left: -10000px;
}
p.skipnavigation a:focus {
left: auto;
right: 1em;
top: 1em;
background-color: white;
color: #082008;
z-index: 2;
}
/* header section */
header {
padding: 0.5em;
background-color: #082008;
border-top-left-radius: 22px;
}
h1 img {
margin: 0 auto;
display: block;
}
/* site navigation */
nav.sitenavigation {
padding: 2%;
text-align: center;
background-color: #93ad78;
}
nav.sitenavigation li {
margin: 0 1em;
padding: 0.2em;
display: inline-block;
}
nav.sitenavigation li:hover {
background: #082008;
border-radius: 0.2em;
}
nav.sitenavigation a:link {
color: white;
text-decoration: none;
font-weight: bold;
}
nav.sitenavigation a:visited {
color: #dddddd;
}
nav.sitenavigation a:hover, nav.sitenavigation a:focus {
text-shadow: 0 0 6px #082008;
}
/* main content */
article {
padding: 2%;
background-color: linen;
overflow: auto;
}
article h2 {
margin-bottom: 0.6em;
font-family: "Krona One", Arial, Helvetica, sans-serif;
font-size: 1.6em;
line-height: 2em;
font-weight: 400;
text-align: center;
}
article figure {
max-width: 50%;
margin: 0 0 1em 1em;
float: right;
}
article figcaption {
padding: 0.2em;
text-align: center;
font-weight: bold;
}
article p {
margin: 0 2em 0.5em;
}
/* footer section */
footer {
padding: 10px;
text-align: center;
color: white;
background-color: #082008;
border-bottom-right-radius: 22px;
}
/* print styles */
@media print {
article {
width: 100%;
}
article, body, .container, footer {
border: 0;
color: rgb(0,0,0);
background-color: rgb(255,255,255);
}
body {
max-width: 100%;
}
nav {
display: none;
}
}
@page {
margin: 0.75in;
}
Unedited museum template:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hotel Natoma - San Francisco Museums</title>
<!--
Hotel Natoma San Francisco Museums web page
Filename: museums.html
HTML5 and CSS3 Illustrated Unit K, Independent Challenge 3
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="modernizr.custom.28018.js"></script>
<link href="http://fonts.googleapis.com/css?family=Krona+One" rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="icon" sizes="192x192" href="images/android.png">
</head>
<body>
<div class="container">
<p class="skipnavigation"><a href="#contentstart">Skip navigation</a></p>
<header>
<h1><a href="index.html"><img src="images/logo.gif" width="368" height="65" alt="Hotel Natoma"></a></h1>
</header>
<nav class="sitenavigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="nearby.html">What's Nearby</a></li>
<li><a href="museums.html">Museums</a></li>
<li><a href="greensf.html">Green SF</a></li>
<li><a href="reserve.html">Reservations</a></li>
</ul>
</nav>
<article>
<h2>San Francisco Museums</h2>
<figure>
<img src="images/tiedye.jpg" width="450" height="300" alt="colorful spiral tie dye print">
<figcaption>Haight-Ashbury Museum of Psychedelic Art and History</figcaption>
</figure>
<p class="culture">Alcatraz Island</p>
<p class="art">Asian Art Museum of San Francisco</p>
<p class="culture">Beat Museum</p>
<p class="culture">Cable Car Museum</p>
<p class="culture">California Academy of Sciences</p>
<p class="culture">California Historical Society</p>
<p class="art">California Palace of the Legion of Honor</p>
<p class="art">Cartoon Art Museum</p>
<p class="kids">Children’s Creativity Museum</p>
<p class="culture">Chinese Culture Center</p>
<p class="culture">Chinese Historical Society of America Museum and Learning Center</p>
<p class="culture">Contemporary Jewish Museum</p>
<p class="art">de Young Museum</p>
<p class="kids">Exploratorium</p>
<p class="culture">Fort Point National Historic Site</p>
<p class="culture">GLBT Historical Society Museum</p>
<p class="culture">Haight-Ashbury Museum of Psychedelic Art and History</p>
<p class="culture">International Museum of Women</p>
<p class="culture">Mission Cultural Center for Latino Arts</p>
<p class="culture">Museo ItaloAmericano</p>
<p class="art">Museum of Craft and Folk Art</p>
<p class="art">Museum of Performance & Design</p>
<p class="culture">Museum of Russian Culture</p>
<p class="culture">Museum of the African Diaspora</p>
<p class="art">Musée Mécanique</p>
<p class="art">New Langton Arts</p>
<p class="culture">North Beach Museum</p>
<p class="culture">Pacific Heritage Museum</p>
<p class="kids">Randall Museum</p>
<p class="art">San Francisco Arts Commission Gallery</p>
<p class="culture">San Francisco Fire Department Museum</p>
<p class="culture">San Francisco Maritime National Historical Park</p>
<p class="culture">San Francisco Museum and Historical Society</p>
<p class="art">San Francisco Museum of Craft & Design</p>
<p class="art">San Francisco Museum of Modern Art</p>
<p class="culture">San Francisco Railway Museum</p>
<p class="culture">USS Pampanito</p>
<p class="culture">Walt Disney Family Museum</p>
<p class="art">Wattis Institute for Contemporary Arts</p>
<p class="culture">Wax Museum at Fisherman’s Wharf</p>
<p class="art">Yerba Buena Center for the Arts</p>
</article>
<footer>
<p>568 Natoma St. • San Francisco, CA 94103 • (415) 555-8378</p>
</footer>
</div>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.