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;
}

r/webdev - Just cant make this work, could you please help me out. This is very basic stuff btw.

How it should be.



Source link

Write A Comment