Navigation Bar
W3schools.com Navigation Bar Clone Navigation Bar is the interesting Project for a beginners in CSS. Using HTMl and CSS Learn to create the best UI/UX Design. Through this you will learn flexbox, position and styling. Navigation bar is the most essential element in the website.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Bar</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/04158e9780.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="nav-bar">
<div class="nav">
<ul>
<div class="left">
<li><img src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/w3schools-logo-icon.png" alt=""></li>
<li>Tutorials <i class="fa-solid fa-caret-down"></i></li>
<li>References <i class="fa-solid fa-caret-down"></i></li>
<li>Exercises <i class="fa-solid fa-caret-down"></i></li>
<li>Videos</li>
</div>
<div class="right">
<div class="icons">
<i class="fa-solid fa-circle-half-stroke"></i>
<i class="fa-solid fa-earth-americas"></i>
<i class="fa-solid fa-magnifying-glass"></i>
</div>
<div class="buttons">
<button>Pro</button>
<button>Get Started</button>
<button>Free Website</button>
<button>log in</button>
</div>
</div>
</ul>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
body{
background-color:#28282b;
}
.nav-bar .nav ul{
display: flex;
list-style:none;
justify-content: space-between;
width:100%;
}
.nav-bar .nav ul .left{
display:flex;
align-items: center;
width:40%;
overflow: hidden;
}
.nav-bar .nav{
background-color:white;
}
.nav-bar .nav ul .left li:nth-child(1) img{
width:100%;
}
.nav-bar .nav ul .left li{
margin-left:3%;
font-family:Open Sans;
font-weight:bolder;
cursor: pointer;
padding:2%;
height:100%;
display: flex;
align-items: center;
width:120px;
justify-content: center;
}
.nav-bar .nav ul .left li:nth-child(1){
height:50px;
width:50px;
margin-left:0%;
display: flex;
align-items: center;
}
.nav-bar .nav ul .left li:hover{
background-color:#059862;
color:white;
transition-duration:0.3s;
}
.nav-bar .nav ul .left li:nth-child(1):hover{
background-color:transparent;
}
.nav-bar .nav .right{
width:60%;
display: flex;
justify-content: right;
}
.nav-bar .nav .right .icons{
display: flex;
align-items: center;
height:100%;
width:30%;
justify-content: center;
}
.nav-bar .nav .right .icons i{
margin-left:5%;
}
.nav-bar .nav .right .buttons{
display: flex;
align-items: center;
}
.nav-bar .nav .right .buttons button{
height:45px;
margin-right:2%;
width:150px;
border-radius:75px 75px;
font-family:Open Sans;
font-weight:bolder;
color:white;
border:none;
outline:none;
cursor: pointer;
}
.nav-bar .nav .right .buttons button:nth-child(1){
width:80px;
background-color:#282a35;
}
.nav-bar .nav .right .buttons button:nth-child(2){
background-color:#ffb3bb;
color:black;
}
.nav-bar .nav .right .buttons button:nth-child(3){
background-color:#fff080;
color:black;
}
.nav-bar .nav .right .buttons button:last-child{
width:100px;
background-color:#059862;
}