Hello fellow developers !!!
Welcome to Day 1 of our 7-day NFT Marketplace Creation! Today, our focus is on building a sleek and functional navigation bar. Join us in unraveling the magic of HTML and CSS as we set the stage for an immersive web experience..
Feel free to adjust the text further to suit your preferences!!!
Preview
.png)
Click here to download images :- Download
HTML Code Structure :-
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nft-marketplace</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Navbar -->
<header>
<div class="nav-container">
<!-- logo -->
<div class="logo-container">
<a href="#">
<img src="/assets/images/logo.png" alt="logo" class="logo">
</a>
</div>
<!-- nav-links -->
<div class="nav-links-container">
<ul class="nav-links">
<li>
<a href="#" class="navbar-link">Home</a>
</li>
<li>
<a href="#" class="navbar-link">About</a>
</li>
<li>
<a href="#" class="navbar-link">Explore</a>
</li>
<li>
<a href="#" class="navbar-link">Creators</a>
</li>
<li>
<a href="#" class="navbar-link">Collections</a>
</li>
<li>
<a href="#" class="navbar-link">Blog</a>
</li>
<li>
<a href="#" class="navbar-link">Contact</a>
</li>
</ul>
</div>
<!-- search-bar -->
<div class="nav-action">
<input type="text" placeholder="Search" class="search-bar">
<button type="submit" class="btn-primary">
Sign-in
</button>
</div>
</div>
</header>
</body>
</html>
CSS Code Structure :-
style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: var(--rich-black-fogra-39);
border-left: 1px solid var(--onyx-1);
}
::-webkit-scrollbar-thumb {
background: var(--golden-puppy);
}
::-webkit-scrollbar-thumb:hover {
--golden-puppy: hsl(47, 100%, 40%);
}
::-webkit-scrollbar-button {
height: 5px;
}
body{
background-color: #212121;
}
/* navbar */
header{
padding: 20px;
border-bottom: 1px solid #3d3d3d;
}
.nav-container{
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-links-container{
display: flex;
justify-content: space-between;
align-items: center;
width:38rem;
}
.nav-links{
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
flex-direction: row;
gap: 20px;
}
.navbar-link{
text-decoration: none;
color: #fff;
font-size: 1rem;
font-weight: 500;
transition: all 0.3s ease;
}
.nav-action{
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.search-bar{
background-color: #3d3d3d;
border: none;
outline: none;
padding:14px;
width: 15rem;
border-radius: 10px;
color:#fff;
font-size: 1rem;
font-weight: 400;
}
.btn-primary{
background-color: #d88b2a;
border: none;
outline: none;
padding: 14px 24px;
border-radius: 10px;
color: #fff;
font-size: 1rem;
font-weight: 400;
cursor: pointer;
transition: all 0.3s ease;
}Join us tomorrow for Day 2
Happy coding, explorers !!!
Follow Us