<div class="wrapper">
        <div class="nav2L">
            <a href="./HTML.html" class="icon">
                <i class="fa fab fa-html5" aria-hidden="true"></i>
            </a>
            <a href="./CSS3.html" class="icon">
                <i class="fa fab fa-css3" aria-hidden="true"></i>
            </a>
            <a href="../index.html" class="icon-home"><i class="fas fa-home " aria-hidden="true"></i></a>
            <a href="#javascript" class="icon">
                <i class="fa fab fa-js" aria-hidden="true"></i>
            </a>
            <a href="#php" class="icon">
                <i class="fa fab fa-php" aria-hidden="true"></i>
            </a>
        </div>
    </div>
                        
                    

                                            
    body{
      display: block;
      position: relative;
      --bs-body-bg: #121230;
      background:var(--bs-body-bg);
      font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      }
    .warpper{
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      position : fixed;
      bottom: 10px;
      left : 50%;
      transform : translate( -50%, -10px);
    }
    .nav2L{
      position: relative;
      height: 60px;
      min-width: 300px;
      padding-left: 35px;
      padding-right: 35px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 25px;
      background-color: #fff;    
    }
    i{
      padding: 10px 18px;
      display: inline-block;
      margin: 2px;
      clip-path:circle();
      font-size: 24px;
      animation-duration: 2s;
      animation-timing-function: ease-in-out;
    }
    i:hover{
      animation-name: start;
      animation-direction: alternate-reverse;
    }
    .warpper .nav2L a:nth-child(1) i{
      color: #df3c0b;
    }
    .warpper .nav2L a:nth-child(2) i{
      color: #1e87f0;
    }
    .warpper .nav2L a:nth-child(3) i{
      color: #f5078a;
    }
    .warpper .nav2L a:nth-child(4) i{
      color: #dfd110;
    }
    .warpper .nav2L a:nth-child(5) i{
      color: #0d31d1;
    }
    @keyframes start{
      0%{
    
      }
      50%{
        transform: translateY(-49px)rotate(370deg)translateX(6px);
      }
    }
    .warpper .nav2L a:nth-child(1) i:hover{
      color: #fff;
      background-color: #df3c0b;
      transition: all 0.5s ease;
    }
    .warpper .nav2L a:nth-child(2) i:hover{
      color: #fff;
      background-color: #1e87f0;
      transition: all 0.5s ease;
    }
    .warpper .nav2L a:nth-child(3) i:hover{
      color: #fff;
      background-color: #f5078a;
      transition: all 0.5s ease;
    }
    .warpper .nav2L a:nth-child(4) i:hover{
      color: #fff;
      background-color: #dfd110;
      transition: all 0.5s ease;
    }
    .warpper .nav2L a:nth-child(5) i:hover{
      color: #fff;
      background-color: #0d31d1;
      transition: all 0.5s ease;
    }