<ul> 
    <li>
        <a href="./HTML.html">
            <i class="fa fab fa-html5" aria-hidden="true"></i>
        </a>
        <span>HTML5</span>
    </li> 
    <li>
        <a href="./CSS3.html">
            <i class="fa fab fa-css3" aria-hidden="true"></i>
        </a>
        <span>CSS3</span>
    </li>
    <li>
        <a href="../index.html">
            <i class="fas fa-home fa-bounce" aria-hidden="true"></i>
        </a>
        <span>HOME</span>
    </li> 
    <li>
        <a href="#javascript">
            <i class="fa fab fa-js" aria-hidden="true"></i>
        </a>
        <span>JAVASCRIPT</span>
    </li>
    <li>
        <a href="#php">
            <i class="fa fab fa-php" aria-hidden="true"></i>
        </a>
        <span>PHP</span>
    </li>
</ul>
                            
                        

                                                
    body{
        display: block;
        position: relative;
        --bs-body-bg: #121230;
        background:var(--bs-body-bg);
        font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }
    
       /* start nav-bar */
       ul{
        position : fixed;
        bottom: 10px;
        left : 50%;
        transform : translate( -50%, -10px);
        list-style : none;
        overflow : hidden;
        display : flex;
        border-radius : 5px;
        padding-inline-start: 0px;
       }
       li{
        width: 45px;
        padding : 15px 15px;
        background : #fff;
        text-align : center;
       }
       li i{
        font-size : 1.5em;
        transition : .5s;
        color: #01173f;
        transform : scale(1.2) translateY(5px);
       }
       span{
        display : block;
        transition : .5s ease;
        font-size : 10px;
        font-weight: 800;
        font-family : monospace;
        transform : translateY(50px);
        text-transform : uppercase;
       }
       li:hover i{
        transform : scale(1) translateY(-5px);
       }
       li:hover span{
        transform: translateY(0);
       }
       ul li:hover{
        cursor: pointer;
        background : #000000;
        color : #e2e2e2;
       }
       ul li:hover:nth-child(1) a i{
        color: #1e87f0;
        }
        ul li:hover:nth-child(2) a i{
            color: #df3c0b;
        }
        ul li:hover:nth-child(3) a i{
            color: #0d31d1;
        }
        ul li:hover:nth-child(4) a i{
            color: #dfd110;
        }
        ul li:hover:nth-child(5) a i{
            color: #be0fe0;
        }