🔥🔥Navbar for website. Amazing navbar for website

Hello, glad you are here. I am kunaal and today we will make navbar at bottom with awesome design we will make down mavigation for website. You can see demo below.

Demo

Video Tutorial -

If you find this article hard or for better explanation. You can watch video tutorial.

If you like the video tutorial. Please consider subscribing my youtube channel.

Let's code

Make two files index.html and style.css. Write basic HTML structure and link stylesheet and font-awesome library.

After that inside body tag write this.

<nav class="navbar">
    <ul class="link-container">
        <li class="link-item">
            <a href="#" class="links active">
                <i class="fas fa-home"></i>
                <span>home</span>
            </a>
        </li>
        <li class="link-item">
            <a href="#" class="links">
                <i class="fas fa-tasks"></i>
                <span>projects</span>
            </a>
        </li>
        <li class="link-item">
            <a href="#" class="links">
                <i class="fas fa-book"></i>
                <span>about</span>
            </a>
        </li>
        <li class="link-item">
            <a href="#" class="links">
                <i class="fas fa-phone"></i>
                <span>contact</span>
            </a>
        </li>
    </ul>
</nav>

<header class="homepage">
    <h1 class="heading">home</h1>
</header>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    min-height: 100vh;
    position: relative;
    font-family: 'roboto', sans-serif;
}

.homepage{
    width: 100%;
    height: 100vh;
    position: relative;
    background-image: url(bg.png);
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.homepage::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    pointer-events: none;
    border: 4px solid #fff;
    border-radius: 20px;
}

.heading{
    font-size: 6vw;
    text-transform: uppercase;
    font-weight: 500;
    color: #fff;
}

.navbar{
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
    min-width: 300px;
    width: 500px;
    height: 0;
    background: #fff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    overflow: hidden;
    animation: growNavbar .5s 1s forwards 1;
}

@keyframes growNavbar{
    100%{
        height: 60px;
    }
}

.link-container{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.link-item{
    list-style: none;
    width: 25%;
    height: 100%;
    display: flex;
}

.links{
    color: #1d1d1d;
    text-decoration: none;
    text-transform: capitalize;
    font-size: 18px;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 60px;
}

.links.active,
.links:hover{
    background: rgb(230, 230, 230);
}

.links i{
    margin-right: 10px;
}

@media (max-width: 500px){
    .heading{
        font-size: 50px;
    }
    .navbar{
        width: 85%;
    }
    .links span{
        display: none;
    }
}

I hope you understood everything. If you have any doubt or you find any mistake that I made or you have any suggestion feel free to ask me in comment.

If you are interested in programming and want to know how I a 15yr old teen do coding make these design. You can follow me on my Instagram. I am also planning to post my game development stuff on Instagram.

Souce Code, My youtube Channel, Instagram