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

                                    
login page green one

login page green one

Timeline style01

Timeline style01

SwiperJS style02 avec 6 colonnes

SwiperJS style02 avec 6 colonnes

Input range slider HTML style04

Input range slider HTML style04

Input range slider HTML style03

Input range slider HTML style03

Image hover 01

Image hover 01

Google Style Login

Google Style Login

Comment intégrer yamli dans une input

Comment intégrer yamli dans une input

Cards box with title

Cards box with title

Card 4 Product Style01

Card 4 Product Style01

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu

Ajouter une legende dans un formulaire

Ajouter une legende dans un formulaire