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

Titre section avec une bande style01

Titre section avec une bande style01

Timeline style06

Timeline style06

Timeline style01

Timeline style01

Simple Table With UIKIT

Simple Table With UIKIT

Input range slider HTML style03

Input range slider HTML style03

Image hover 01

Image hover 01

Gallery images with bootstrap4 Flexbox

Gallery images with bootstrap4 Flexbox

ChartJS style01

ChartJS style01

Carousel Bootstrap3

Carousel Bootstrap3

Bootstrap modal avec un formulaire newsletter

Bootstrap modal avec un formulaire newsletter

Blog post card 01

Blog post card 01