Nav Menu style02

<!DOCTYPE html>
<html>
<head>
	<title>NAV MENU STYLE02 | par NGLESSON</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keyword" content="NGLESSON">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
	<link href="style.css" rel="stylesheet">
</head>
<body>
  <div class="body">
    <nav>
        <div class="logo">
            <h4>NGLESSON</h4>
        </div>
        <ul class="nav-links">
            <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
            <li><a href="#"><i class="fa fa-cogs"></i> About</a></li>
            <li><a href="#"><i class="fa fa-cubes"></i> Work</a></li>
            <li><a href="#"><i class="fa fa-tags"></i> Projects</a></li>
        </ul>
        <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
    </nav>
</div>
<script src="script.js"></script>
</body>
</html>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  background: #EEE ;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  background-color: #39AA87;
  font-family: "Poppins", sans-serif;
}

.logo {
  color: rgb(226, 226, 226);
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 20px;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 30%;
}

.nav-links li {
  list-style: none;
}

.nav-links a {
  color: rgb(226, 226, 226);
  text-decoration: none;
  letter-spacing: 3px;
  font-weight: bold;
  font-size: 14px;
}

.burger {
  display: none;
}

.burger div{
  background-color: rgb(226, 226, 226);
  width: 25px;
  height: 3px;
  margin: 5px;
  transition: all 0.3s ease;
}

@media screen and (max-width: 1024px) {
  .nav-links {
      width: 60%;
  }
}

@media screen and (max-width: 768px) {
  .body {
      height: 100%;
      width: 100%;
      position: fixed;
      overflow-x: hidden;
  }
  .nav-links {
      position: absolute;
      right: 0px;
      height: 92vh;
      top: 8vh;
      background-color: #39AA87;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 50%;
      transform: translateX(100%);
      transition: transform 0.5s ease-in;
  }
  .nav-links li {
      opacity: 0;
  }
  .burger {
      cursor: pointer;
      display: block;
  }
}

.nav-active {
  transform: translateX(0%);
}

@keyframes navLinkFade {
  from {
      opacity: 0;
      transform: translateX(50px)
  }
  to {
      opacity: 1;
      transform: translateX(0px)
  }
}

.toggle .line1{
  transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2{
  opacity: 0;
}
.toggle .line3{
  transform: rotate(45deg) translate(-5px, -6px);
}
const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    const navLinks = document.querySelectorAll('.nav-links li');

    burger.addEventListener('click', () => {
        //Toggle Lav
        nav.classList.toggle('nav-active');
        //Animate Links
        navLinks.forEach((link, index) => {
            if (link.style.animation) {
                link.style.animation = '';
            } else {
                link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s`;
            }
        })
        //Burger Animation
        burger.classList.toggle('toggle');
    })
}

navSlide();
Alert Bootstrap4 style02

Alert Bootstrap4 style02

Bloc resizable with jquery

Bloc resizable with jquery

Card Bootstrap4 E commerce 01

Card Bootstrap4 E commerce 01

Carousel 6 Column Product Slider with B4

Carousel 6 Column Product Slider with B4

Changer le style du scroll bar in html

Changer le style du scroll bar in html

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Créer des tds dynamiquement dans une table html

Créer des tds dynamiquement dans une table html

Form login b4 01

Form login b4 01

Form login et créer un compte style01

Form login et créer un compte style01

Input range slider HTML style01

Input range slider HTML style01

Organization Chart

Organization Chart

creation dune icone de prechargement avec css

creation dune icone de prechargement avec css