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));
}

                                    
toggle switch style02

toggle switch style02

toggle switch style01

toggle switch style01

SwiperJS Lazy Load Images

SwiperJS Lazy Load Images

Pure CSS Percentage Circle

Pure CSS Percentage Circle

Input range slider HTML style01

Input range slider HTML style01

Form login et créer un compte style01

Form login et créer un compte style01

Form login 02

Form login 02

Carousel Bootstrap4

Carousel Bootstrap4

Card Profile Style01

Card Profile Style01

Calculatrice style01

Calculatrice style01

Bootstrap modal avec un formulaire newsletter

Bootstrap modal avec un formulaire newsletter

Asidebar Bootstrap4 style01

Asidebar Bootstrap4 style01