Create Beautiful Responsive Navigation Bar using Html and Css.

Поделиться
HTML-код
  • Опубликовано: 21 авг 2024
  • #Responsivenavigationbar , #learntocreatenavigationbar, #beautifulnavigationbarusinghtmlandcss, #Html , #css, #htmlandcssprojects, #websiteusinghtmlandcss, #createnavigationbar, #Navbar, #createnavbar

Комментарии • 1

  • @NoTensionProgramming
    @NoTensionProgramming  Месяц назад

    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;
    }