n the index.html file, update the nav element to use an unordered list (ul) instead of a paragraph element. Remove the nonbreaking spaces and music character codes ♮ nested within the nav element. Make the same changes to the lessons.html, contact.html, and template.html files. 4 Add the following comment and style rules for the navigation area: /* Style rules for navigation area */ nav { background-color: #373684; } nav ul { list-style-type: none; margin: 0; text-align: center; } nav li { display: inline-block; font-size: 2em; } nav li a { display: block; color: #fff; text-align: center; padding: 0.5em 1em; text-decoration: none; }
In the index.html file, update the nav element to use an unordered list (ul) instead of a paragraph element. Remove the nonbreaking spaces and music character codes ♮ nested within the nav element. Make the same changes to the lessons.html, contact.html, and template.html files.
Add the following comment and style rules for the navigation area:
/* Style rules for navigation area */nav {
background-color: #373684;
}
nav ul {
list-style-type: none;
margin: 0;
text-align: center;
}
nav li {
display: inline-block;
font-size: 2em;
}
nav li a {
display: block;
color: #fff;
text-align: center;
padding: 0.5em 1em;
text-decoration: none;
}
In the index.html file, wrap the text, FREE, within a span element that includes a class attribute with the value action.
In the styles.css file, add the following comment and style rules for the main content:
/* Style rules for main content */main {
padding: 2%;
background-color: #e5e9fc;
overflow: auto;
font-family: Verdana, Arial, sans-serif;
}
main p {
font-size: 1.25em;
}
.action {
font-size: 1.75em;
color: #373684;
font-weight: bold;
}
Add the following comment and style rules for the #piano, #guitar, #violin, and #info content:
/* Style rules for lessons content */#piano, #guitar, #violin {
width: 29%;
float: left;
margin: 0 2%;
}
#info {
clear: left;
background-color: #c0caf7;
padding: 1% 2%;
}
In the contact.html file, remove the frameborder and style attributes from the iframe element. Add a class attribute with the value map to the iframe element.
Update the attributes of the iframe element.
In the styles.css file, add the following comment and style rules for the contact and .map content:
/* Style rules for contact content */#contact {
text-align: center;
}
#contact a {
color: #4645a8;
text-decoration: none;
font-weight: bold;
}
.map {
border: 5px solid #373684;
}
In the styles.css file, add the following comment and style rules for the footer content:
/* Style rules for footer content */footer {
text-align: center;
font-size: 0.65em;
clear: left;
}
footer a {
color: #4645a8;
text-decoration: none;
}
Include a blank line between each style rule. Validate the styles.css file and correct any errors.
In the index.html file, add the following comment and div element below the nav element:
<!-- Hero Image --><div id="hero">
<img src="images/music-notes.png" alt="colorful music notes">
</div>
Indent all nested elements. Check your spelling. Validate all HTML files and correct any errors.
Open the index.html file in a browser to view the home page, and then navigate to the Lessons and Contact pages to view the design for each page.
Trending now
This is a popular solution!
Step by step
Solved in 3 steps
