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();
input radio checkbox b4 style

input radio checkbox b4 style

Timeline style03

Timeline style03

Lightbox gallery style01

Lightbox gallery style01

Image hover 02

Image hover 02

Geocoded Locations

Geocoded Locations

Compteur avec b4

Compteur avec b4

Carousel 8 bloc with B4

Carousel 8 bloc with B4

Carousel 6 Column Product Slider with B4

Carousel 6 Column Product Slider with B4

Bootstrap3 Sidebar CSS

Bootstrap3 Sidebar CSS

Background div gradient

Background div gradient

Asidebar Bootstrap4 style02

Asidebar Bootstrap4 style02

3D Gallery with CSS3 and jQuery

3D Gallery with CSS3 and jQuery