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();
toggle switch style02

toggle switch style02

Vidéo background en html5 style02

Vidéo background en html5 style02

Vidéo background en html5 style01

Vidéo background en html5 style01

Timeline style03

Timeline style03

Timeline style02

Timeline style02

Pagination with Jquery

Pagination with Jquery

Input range slider HTML style02

Input range slider HTML style02

Image hover 01

Image hover 01

Form login 03

Form login 03

Footer Responsive avec Bootstrap4

Footer Responsive avec Bootstrap4

Compteur avec b4

Compteur avec b4

Card Bootstrap4 02

Card Bootstrap4 02