<h1>Awesome Menu <span>follow along links</span></h1>
<div class="wrapper">
    <ul>
        <li>
          <a href="#">
            <i class="fas fa-home"></i>
            </a>
            </li>
             <li>
          <a href="#">
            <i class="fas fa-caravan"></i>
            </a>
            </li>
        <li>
          <a href="#">
            <i class="fas fa-shuttle-van"></i>
            </a>
            </li>
              <li>
          <a href="#">
            <i class="fas fa-umbrella-beach"></i>
            </a>
            </li>
              <li>
          <a href="#">
            <i class="fas fa-snowflake"></i>
            </a>
            </li>
              <li>
          <a href="#">
            <i class="fas fa-smoking-ban"></i>
            </a>
            </li>

    </ul>
</div>



<footer>
  <p>
		Created with <i class="fa fa-heart"></i> by
		<a target="_blank" href="https://codepen.io/ahmadbassamemran/">Ahmad Emran</a>
    Follow me : 
      <a target="_blank"  href="https://www.instagram.com/ahmadbassamemran/"><i class="fab fa-instagram"></i></a>
    <a target="_blank"  href="https://www.linkedin.com/in/ahmademarn/"><i class="fab fa-linkedin"></i></a>
    <a target="_blank" href="https://codepen.io/ahmadbassamemran/"><i class="fab fa-codepen"></i></a> 
        <a target="_blank" href="https://dev.to/ahmadbassamemran"><i class="fab fa-dev"></i></a> 
             <a target="_blank" href="https://twitter.com/ahmadbassamemra"><i class="fab fa-twitter-square"></i></a> 
	</p>
</footer>

<div class="youtubeBtn">
  <a target="_blank" href="https://www.youtube.com/AhmadEmran?sub_confirmation=1">
      <span>Watch on YouTube</span>
  <i class="fab fa-youtube"></i>
    </a>

</div>

body{
    background-color: #2f3542;
    padding: 0;
    margin: 0;
}
h1{
    font-family: 'Lato';
    margin: 0 auto ;
    color: #ffffff;
    padding: 20px 0px;
    width:100%;
    text-align: center;
    text-transform: capitalize;
      letter-spacing: 7px;
  display:flex;
  align-items:center;
  justify-content:center;
  span{
    color:rgba(255,255,255,.5);
    font-size:15px;
    letter-spacing: 5px;
    padding-left:10px;
  }
 }
.wrapper{
    width: fit-content;
    height: 50px;
    margin: 0 auto 0 auto;
    ul{
        display: flex;
        list-style: none;
        margin: 30px auto 0px auto;
        padding: 0;
        width: fit-content;
        li{
            flex:1;
            text-align: center;
            margin: 0px 10px;
            width: fit-content;
            padding: 10px;
            a{
                color:#fff;
                text-decoration: none;
                box-sizing: border-box;
               font-size: 22px;

              
            }
        }
    }
    .highlight{
        background:transparent;
        position:absolute;
        left: 0px;
        top:0px;
        transition: .3s cubic-bezier(.8, .5, .2, 1.4);
        display: block;
        z-index: -1;
        box-sizing: border-box;
        transform-origin: 0px 0px;
        // transform: rotate(180deg);
        border-radius:4px;
      line-height:30px;
        display:block;
      color:#000;
    }
}





/*  footer   */
footer {
    background-color: #222;
    color: #fff;
    font-size: 14px;
    bottom: 0;
    position: fixed;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 999;
}

footer p {
    margin: 10px 0;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida  Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
footer .fa-heart{
    color: red;
}
footer .fa-dev{
    color: #fff;
}
footer .fa-twitter-square{
  color:#1da0f1;
}
footer .fa-instagram{
  color: #f0007c;
}
fotter .fa-linkedin{
  color:#0073b1;
}
footer .fa-codepen{
  color:#fff
}
footer a {
    color: #3c97bf;
    text-decoration: none;
  margin-right:5px;
}
.youtubeBtn{
    position: fixed;
    left: 50%;
  transform:translatex(-50%);
    bottom: 45px;
    cursor: pointer;
    transition: all .3s;
    vertical-align: middle;
    text-align: center;
    display: inline-block;
}
.youtubeBtn i{
   font-size:20px;
  float:left;
}
.youtubeBtn a{
    color:#ff0000;
    animation: youtubeAnim 1000ms linear infinite;
  float:right;
}
.youtubeBtn a:hover{
  color:#c9110f;
  transition:all .3s ease-in-out;
}
.youtubeBtn i:active{
  transform:scale(.9);
  transition:all .3s ease-in-out;
}
.youtubeBtn span{
    font-family: 'Lato';
    font-weight: bold;
    color: #fff;
    display: block;
    font-size: 12px;
    float: right;
    line-height: 20px;
    padding-left: 5px;
  
}

@keyframes youtubeAnim{
  0%,100%{
    color:#c9110f;
  }
  50%{
    color:#ff0000;
  }
}
/* footer  */

const trigger = document.querySelectorAll('li');
const wrapper = document.querySelector('.wrapper');
const highlight = document.createElement('span');
wrapper.appendChild(highlight);

function highlightlink(e){
      setTimeout(() => highlight.classList.add('highlight'), 0);
e.stopPropagation()
    const linkCoords = this.getBoundingClientRect();
    const coords = {
        width: linkCoords.width,
        height: linkCoords.height,
        top: Math.round(linkCoords.top + window.scrollY),
        left: Math.round(linkCoords.left + window.scrollX),
    }
    highlight.style.width = `${coords.width}px`;
    highlight.style.height = `${coords.height}px`;
    highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
    
    switch((coords.left) + (coords.top)){
        case (trigger[0].offsetLeft) + (trigger[0].offsetTop):
            highlight.style.background = '#079992'; 
            break;
        case (trigger[1].offsetLeft) + (trigger[1].offsetTop):
            highlight.style.background = '#ff7f50';
            break;
        case (trigger[2].offsetLeft) + (trigger[2].offsetTop):
            highlight.style.background = '#3c6382';
            break; 
        case (trigger[3].offsetLeft) + (trigger[3].offsetTop):
            highlight.style.background = '#60a3bc';
            break;
        case (trigger[4].offsetLeft) + (trigger[4].offsetTop):
            highlight.style.background = '#2ed573';
            break;
        case (trigger[5].offsetLeft) + (trigger[5].offsetTop):
            highlight.style.background = '#5352ed';
            break;
    }
}

function highlightleave(){
    setTimeout(() => this.children[1].classList.remove('highlight'), 250);
}

trigger.forEach(item => item.addEventListener('mouseenter', highlightlink));
wrapper.addEventListener('mouseleave', highlightleave);