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 style03

toggle switch style03

texte animate css

texte animate css

Vidéo background en html5 style02

Vidéo background en html5 style02

Tablet style code texte

Tablet style code texte

SwiperJS style01

SwiperJS style01

Input range slider HTML style02

Input range slider HTML style02

Input file style01

Input file style01

Image hover effects style

Image hover effects style

Image hover Flip Flap Style

Image hover Flip Flap Style

Form Création de compte

Form Création de compte

Card Bootstrap4 E commerce 01

Card Bootstrap4 E commerce 01

Ajouter supprimer dynamiquement des lignes sur un tableau

Ajouter supprimer dynamiquement des lignes sur un tableau