How to create the navbar of the website in less then 10 minutes || Part 2
Hey guys Today in this post I am going to give you the source code of the Part 2 of the video called "How to create the navbar of the website in less then 10 minutes". I have optimized the source code completely. If you want to get it then copy this source code below:
Here's the code of index.html file:
<!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>Good navbar design part-2 - codeandman</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav id="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Our Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Portfolio</a></li>
<button id="btn">Dark Mode</button>
</nav>
<script src="index.js"></script>
</body>
</html>
Here's the code of the style.css file:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
a {
text-decoration: none;
font-family: cursive;
font-weight: 800;
font-style: italic;
color: white;
text-transform: uppercase;
}
nav {
background: rgb(255, 0, 0);
display: flex;
align-items: center;
justify-content: space-around;
height: 10vh;
transition: all 1s ease-in;
}
#btn{
padding:6px;
color:white;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-style:italic;
outline:none;
border:2px solid blue;
background:blue;
border-radius:10px;
box-shadow: 2px 3px 5px 1px blue;
transition:all 0.3s ease-in;
}
Here's the source code of the index.js file:
const button = document.getElementById('btn');
const navbar = document.getElementById('navbar');
button.addEventListener('click',()=>{
if(navbar.style.background === "rgb(255, 0, 0)"){
navbar.style.background = 'black';
button.innerText = 'Light Mode';
}
else{
navbar.style.background = 'rgb(255, 0, 0)';
button.innerText = "Dark Mode";
}
})
I hope that you liked this source code.
Share it to all those who want this.
Comments
Post a Comment