How to create a simple navbar :
1. Create a new folder
2. Create a html and css file inside this folder.
3. copy and paste this html and css code. save and open.
HTML CODE
=============================
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Simple Navbar</title>
<link rel="stylesheet" href="navcss.css" />
</head>
<body>
<nav>
<label class="logo">
Logo
</label>
<ul>
<li> <a class="active" href="#">Home</a></li>
<li> <a href="#">Services</a></li>
<li> <a href="#">Contact</a></li>
<li> <a href="#">About US</a></li>
</ul>
</nav>
</body>
</html>
=======================
CSS CODE
======================
*{
padding:0;
margin:0;
list-style:none;
text-decoration:none;
box-sizing:border-box;
}
nav{
background-color:aqua;
height:80px; width:100%;
}
label.logo {
color: white;
font-size: 35px;
font-weight: bold;
line-height: 80px;
padding: 0 100px;
}
nav ul{
float:right;
margin-right:20px;
}
nav ul li{
display:inline-block;
line-height:80px;
margin: 0 5px;
}
nav ul li a{
color:black;
font-size:15px;
padding: 8px 10px;
border-radius:4px;
text-transform:uppercase;
}
a:hover, a.active{
background:orange;transition:0.5s;
}
