Hey, developers welcome to Day 31 of our 90Days 90Projects challenge. And in Day 31we are going to create a Mobile Navigation using HTML CSS with Source Code
So to run the code you just need to copy the HTML and CSS code and run it into your code Editor.
Preview
Image Resource - Download Now
HTML Code
index.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> Mobile Navigation </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main-container">
<nav class="navigation">
<ul>
<li>
<i class="fa-solid fa-house"></i>
</li>
<li>
<i class="fa-solid fa-user"></i>
</li>
<li>
<i class="fa-solid fa-rocket"></i>
</li>
<li>
<i class="fa-solid fa-people-group"></i>
</li>
<li>
<i class="fa-solid fa-cart-shopping"></i>
</li>
</ul>
</nav>
</div>
</body>
</html>
CSS Code
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navigation {
bottom: 2rem;
position: absolute;
left: 50%;
display: block;
margin: 0 auto;
border-radius: 1.5rem;
transform: translate(-50%, 0);
background-color: purple;
}
.navigation ul {
list-style: none;
display: flex;
justify-content: space-around;
}
.navigation ul li {
height: 35px;
width: 35px;
margin: 1rem;
color: white;
padding: 0 1rem;
cursor: pointer;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s linear;
}
.navigation ul li:hover {
color: purple;
transform: scale(1.2);
background-color: #fff;
}
.navigation ul li:hover i {
border-radius: 50%;
}
This comment has been removed by the author.
ReplyDeletegood
ReplyDelete