html:
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8”>
<title>My Beautiful Webpage</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<header>
<h1>My Beautiful Webpage</h1>
</header>
<nav>
<ul>
<p href=”index.html”> <li> Home </li> </p>
<p href=”page1.html”> <li> Page 1 </li> </p>
<p href=”page2.html”> <li> Page 2 </li> </p>
<p href=”page3.html”> <li> Page 3 </li> </p>
<p href=”about.html”> <li> About </li> </p>
</ul>
</nav>
</body>
</html>
Css:
body{
margin: 0;
padding: 0;
}
header{
background: #0282AD;
text-align: center;
padding: 20px 0;
width: 100%;
color: black;
font-family: “Verdana”, cursive, sans-serif;
font-size: 36px;
}
p{
text-decoration: none;
color: white;
font-family: “Verdana”, cursive, sans-serif;
}
nav ul{
background-color: #10B2E8;
overflow: hidden;
color: black;
padding: 20px;
text-align: center;
margin: 0;
}
nav p{
color: black;
font-size: 20px;
padding: 0 20px;
}
p {
padding-left: 50px;
}
p.small {
line-height: 90%;
}
h2 {
padding-left: 50px;
}
h3 {
padding-left: 50px;
}
nav p:hover {
background-color: #447eb7;
}
How it should be.