Bitcoin.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>Bitcoin</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">
<div class="left">
<ul>
<li><img src="https://workablehr.s3.amazonaws.com/uploads/account/open_graph_logo/393811/social?1621526248612"
alt=""></li>
<li>Learn
<div class="drop-down">
<ul>
<li>
<div class="header">
<i class="fa-sharp fa-solid fa-shuttle-space"></i>
Get Started
</div>
<div class="para">
Get up to speed on Bitcoin, Bitcoin Cash, Etherium and Crypto with articles
guides and step-by-step tutorials.
</div>
</li>
<li>
<div class="header">
<i class="fa-sharp fa-solid fa-book-atlas"></i>
Learn the Basics
</div>
<div class="para">Get a simple introduction to Bitcoin and why it matters.</div>
</li>
<li>
<div class="header">
<i class="fa-sharp fa-solid fa-credit-card"></i>
How do i buy Bitcoin?
</div>
<div class="para">Learn how to get your first bitcoin in minutes</div>
</li>
</ul>
</div>
</li>
<li>Buy
<div class="drop-down">
<ul>
<li>
<div class="header">
<i class="fa-sharp fa-solid fa-credit-card"></i>
Buy Crypto
</div>
<div class="para">
Use your credit card, payment app or bank account to buy crypto currencies.
</div>
</li>
<li>
<div class="header">
<i class="fa-sharp fa-solid fa-money-check-dollar"></i>
Sell Crypto
</div>
<div class="para">Cashout your crypto straight to your bank account.s</div>
</li>
<li>
<div class="header">
<div class="icon">
<img src="https://icons.llama.fi/verse.png" alt="">
</div>
Verse take Sale
</div>
<div class="para">Get whitelisted to participate in the sale</div>
</li>
<li>
<div class="header">
<div class="icon">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Bitcoin.svg/1200px-Bitcoin.svg.png"
alt="">
</div>
Buy Bitcoin
</div>
</li>
<li>
<div class="header">
<div class="icon">
<img src="https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/1024/Ethereum-ETH-icon.png"
alt="">
</div>
Buy Etherium
</div>
</li>
</ul>
</div>
</li>
<li>DEX</li>
<li>Products
<div class="drop-down">
<ul>
<li>
<div class="header">
<div class="icon">
<img src="https://www.bitcoin.com/icons/icon-512x512.png" alt="">
</div>
Bitcoin.com App
</div>
<div class="para">
The full screen Bitcoin wallet trusted by millions
</div>
</li>
<li>
<div class="header">
<div class="icon">
<img src="https://icons.llama.fi/verse.png" alt="">
</div>
Verse DEX
</div>
<div class="para">Trade permission lessly and earn share of trading fees by funding liquidity pools.</div>
</li>
<li>
<div class="header">
<div class="icon">
<img src="https://play-lh.googleusercontent.com/F87eL85uibmvGnK3nYnL1PBDehNLJr5_HK4OgRQH2KKV2uplxTdhiN-E7N_bEU8V4qg" alt="">
</div>
Market Data
</div>
<div class="para">Make better investment decision with realtime data at your finger tip.</div>
</li>
</ul>
</div>
</li>
<li>News
<div class="drop-down">
<ul>
<li>
<div class="header">
<div class="icon">
<img src="https://cdn-icons-png.flaticon.com/512/1256/1256188.png" alt="">
</div>
Latest News
</div>
<div class="para">Get timely and objective Crypto news from a trusted source.</div>
</li>
<li>
<div class="header">
<div class="icon">
<img src="https://www.pngkey.com/png/full/326-3269396_web-designing-display-ad-icon-png.png" alt="">
</div>
Press releases
</div>
</li>
<li>
<div class="header">
<div class="icon">
<img src="https://maui.hawaii.edu/wp-content/uploads/2021/02/megaphone.png" alt="">
</div>
Advertisement
</div>
</li>
</ul>
</div>
</li>
<li>Company</li>
<li>
<div class="icon">
<img src="https://icons.llama.fi/verse.png" alt="">
</div> Verse
</li>
</ul>
</div>
<div class="right">
<button>Login</button>
<button>Sign Up</button>
</div>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
body{
background-color:#F0F6FC;
height:150vh;
}
.nav-bar .nav{
padding:2%;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-bar .nav .left{
width:70%;
}
.nav-bar .nav .left ul{
display: flex;
list-style:none;
font-family:"Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
}
.nav-bar .nav .left ul li:first-child{
width:150px;
margin-right:2%;
}
.nav-bar .nav .left ul li:first-child img{
width:100%;
}
.nav-bar .nav .left ul li{
margin-left:2%;
font-weight:600;
cursor: pointer;
height:100px;
display: flex;
flex-direction: column;
justify-content: center;
}
.nav-bar .nav .left ul li:last-child{
display: flex;
flex-direction: row;
align-items: center;
}
.nav-bar .nav .left ul li:last-child .icon{
height:25px;
width:25px;
margin-right:5%;
display: flex;
align-items: center;
}
.nav-bar .nav .left ul li:last-child .icon img{
width:100%;
}
.nav-bar .nav .right{
width:30%;
display: flex;
justify-content:right;
}
.nav-bar .nav .right button{
height:50px;
width:100px;
border-radius:12px;
margin-right:2%;
font-family:"Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
font-weight:600;
}
.nav-bar .nav .right button:nth-child(1){
border:none;
background-color:transparent;
}
.nav-bar .nav .right button:nth-child(2){
border:none;
background-color:#2793FF;
color:white;
cursor: pointer;
}
.nav-bar .nav .left ul li .drop-down{
background-color:white;
border-radius:12px;
min-height:100px;
width:300px;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
position:absolute;
top:15%;
display:none;
}
.nav-bar .nav .left ul li:hover .drop-down{
display:block;
padding:2%;
}
.nav-bar .nav .left ul li:hover .drop-down ul{
display:block;
}
.nav-bar .nav .left ul li:hover .drop-down ul li{
display:block;
width:100%;
margin-bottom:3%;
}
.nav-bar .nav .left ul li .drop-down .para{
font-weight:400;
color:rgb(0, 0, 0,0.5);
width:100%;
}
.nav-bar .nav .left ul li .drop-down .header{
display:flex;
align-items: center;
}
.nav-bar .nav .left ul li .drop-down .header i{
font-size:1.5rem;
margin-right:5%;
color:#2793FF;
}
.nav-bar .nav .left ul li .drop-down .header .icon{
height:25px;
width:25px;
margin-right:2%;
}
.nav-bar .nav .left ul li .drop-down .header .icon img{
width:100%;
}