Nav Menu style01

<!DOCTYPE html>
<html>
<head>
	<title>NAV MENU STYLE01 | 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 href="style.css" rel="stylesheet">
</head>
<body>
<div class="main">
  <div class="navbar br">
    <div class="sitename">NGLESSON.COM</div>
    <nav class="drawer">
        <input id="menu-toggle" class="menu-toggle" type="checkbox"/>
      <label class="menu-bars" for="menu-toggle"> <i class="fa fa-bars"></i>
      </label>
      <ul class="nav-links">
        <li class="">
          <a href="#" class=""><i class="fa fa-home"></i> Home</a>
        </li>
        <li class="">
          <a href="#" class=""><i class="fa fa-info-circle"></i> About</a>
        </li>
        <li class="">
          <a href="#" class=""><i class="fa fa-cogs"></i> Services</a>
        </li>
        <li class="">
          <a href="#" class=""><i class="fa fa-envelope"></i> Contact</a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="content br">
    <h2 class="">CSS Nav drawer</h2>
    <p class="">A css-only navigation drawer, which can be used for mobile view of your web-app.</p>
  </div>
</div>
</body>
</html>
/* drawer styling */
nav.drawer{
  position: relative;
}
.nav-links{
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  
/*  hide it  */
  transform: translate(100vw, 0);
  
  box-sizing: border-box;
  pointer-events: none;
  padding-top: 125px;
/*  on mobile center align  */
  text-align: center;
  
/*  smooth transition animation  */
  transition: width 475ms ease-out, transform 450ms ease, border-radius 0.8s 0.1s ease;
  
  background: rgba(40,40,40, 0.75);
}
/* for desktops */
@media (min-width: 768px) {
  .nav-links {
    width: 250px;
    text-align: right;
  }
  .nav-links li{
    padding: 0.5rem;
  }
}

.nav-links li{
/* hide links */
  transform: translatex(100vw);
}
.nav-links li:last-child {
  margin-bottom: 2em;
}

/* label for checkbox (menu-toggle) */
.menu-bars{
  pointer-events: auto;
  cursor: pointer;
  z-index: 2;
  position: absolute;
  right: 1rem;
  top: 0;
}
/* hide checkbox */
input.menu-toggle{
  display: none;
}
/* on checkbox checked show links */
input.menu-toggle:checked ~ .nav-links {
  transform: translatex(0);
  border-bottom-left-radius: 0;
}
input.menu-toggle:checked ~ .nav-links li {
  transform: translatex(0);
  transition: transform 1s 0.08s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

/* navbar styles  */
.navbar{
  padding: 1rem;
  display: flex;
  justify-content: space-between;
}

.drawer ul li a{
  cursor: pointer;
  pointer-events:auto;
  color: wheat;
  text-decoration:none;
  font-size: 1.25rem;
  display: block;
  padding: 10px !important;
}
.drawer ul li a:hover{
  background: rgba(33,33,33, 0.25);
}
ul{
  list-style:none;
  padding: 0;
}

/* other styles */
.br{
  border: 1px dashed white;
}
h2{
  font-family: 'Pacifico', sans-serif;
  color: snow;
  font-weight:400;
  font-size: 2rem;
}
.content{
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  flex-grow:1;
}
p{
  margin:1rem;
}
/* just some base styling  */
*{
  margin: 0;
  padding: 0;
}
div.main{
  height: 100vh;
  width: 100vw;
  display:flex;
  flex-direction:column;
  color: #ccc;
/*   background: #222; */
  background-image: radial-gradient(circle at 70% 18%, hsla(126,0%,77%,0.05) 0%, hsla(126,0%,77%,0.05) 41%,transparent 41%, transparent 100%),radial-gradient(circle at 6% 94%, hsla(126,0%,77%,0.05) 0%, hsla(126,0%,77%,0.05) 52%,transparent 52%, transparent 100%),radial-gradient(circle at 93% 63%, hsla(126,0%,77%,0.05) 0%, hsla(126,0%,77%,0.05) 85%,transparent 85%, transparent 100%),radial-gradient(circle at 5% 85%, hsla(126,0%,77%,0.05) 0%, hsla(126,0%,77%,0.05) 8%,transparent 8%, transparent 100%),radial-gradient(circle at 49% 93%, hsla(126,0%,77%,0.05) 0%, hsla(126,0%,77%,0.05) 37%,transparent 37%, transparent 100%),linear-gradient(45deg, rgb(15, 5, 113),rgb(191, 90, 222));
}

                                    
page scroll progress bar

page scroll progress bar

Timeline style08

Timeline style08

Tablet style code texte

Tablet style code texte

Lightbox gallery style01

Lightbox gallery style01

Image hover 05

Image hover 05

Form login 03

Form login 03

Double Scrollbar with Plugin Jquery in table

Double Scrollbar with Plugin Jquery in table

Creation dune icone de prechargement avec css

Creation dune icone de prechargement avec css

Calculer la some des colones avec jquery

Calculer la some des colones avec jquery

Asidebar Menu Style01

Asidebar Menu Style01

Ajouter une legende dans un formulaire

Ajouter une legende dans un formulaire

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select