Create Beautiful Responsive Navigation Bar using Html and Css.
HTML-код
- Опубликовано: 21 авг 2024
- #Responsivenavigationbar , #learntocreatenavigationbar, #beautifulnavigationbarusinghtmlandcss, #Html , #css, #htmlandcssprojects, #websiteusinghtmlandcss, #createnavigationbar, #Navbar, #createnavbar
Full Code:
index.html:
Navigation Bar
Digitex
Home
About
Services
Blogs
Contact Us
style.css:
*
{
margin:0px;
padding:0px;
}
nav{
width:100%;
height:65px;
background-image: linear-gradient(#141212,#0f0f0f);
line-height: 65px;
padding: 0px 100px;
position: fixed;
}
nav .brand p{
font-size: 28px;
float:left;
font-weight: bold;
color: white;
text-transform: uppercase;
letter-spacing: 1.3px;
}
nav ul{
float:right;
}
nav li
{
display:inline;
list-style: none;
}
nav li a{
font-size:20px;
text-decoration: uppercase;
padding: 0px 10px;
text-align: none;
color:white;
}
.bodycontent img{
width:100%;
height:100vh;
background-position: center;
background-size: cover;
}
nav li a:hover{
color:#a2ff00;
transition: all 0.2s ease-in-out;
}