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();
Card Bootstrap4 01

Card Bootstrap4 01

Créer des tds dynamiquement dans une table html

Créer des tds dynamiquement dans une table html

Créer un effet de défilement vers le bas de la souris animé

Créer un effet de défilement vers le bas de la souris animé

Image hover Inspiration styles

Image hover Inspiration styles

Image hover effects style

Image hover effects style

Organization Chart

Organization Chart

Planète animée style01

Planète animée style01

Timeline style02

Timeline style02

Timeline style03

Timeline style03

Timeline style05

Timeline style05

Timeline style08

Timeline style08

Triangle Background css 01

Triangle Background css 01