Menu aside style01 slide out

<!DOCTYPE html>
<html lang="en">
<head>
    <title>MENU ASIDE STYLE01 SLIDE OUT | 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="MENU ASIDE STYLE01 SLIDE OUT">
    <meta name="author" content="Mezgani said">
    <meta name="copyright" content="NGLESSON">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="style.css"  rel="stylesheet" type="text/css">
</head>
<body>
<div class="container-fluid">
  <div class="row">
    <ul class="icon-menu">
      <li class="icon-box home">
        <i class="fa fa-home fa-4x"></i>
        <a href="#">
          <h2>Home</h2>
        </a>
      </li>	
      <li class="icon-box about"> 
        <i class="fa fa-paint-brush fa-4x"></i>
        <a href="#">
          <h2>About</h2>
        </a>
      </li>
      <li class="icon-box service"> 
        <i class="fa fa-code fa-4x"></i>
        <a href="#">
            <h2>Service</h2>
        </a>
      </li>
      <li class="icon-box product"> 
        <i class="fa fa-shopping-cart fa-4x"></i>
        <a href="#">
          <h2>Products</h2>
        </a>
      </li>
      <li class="icon-box contact"> 
        <i class="fa fa-envelope fa-4x"></i>
        <a href="#">
          <h2>Contact</h2>
        </a>
      </li>
    </ul>
  </div>
</div>    
</body>
</html>


@import url(https://fonts.googleapis.com/css?family=Lato:400,100,300,700,900);

body {
font-family: 'Lato', sans-serif;
background: #ecf0f1; 
}

a{ text-decoration: none; }
h2 {  color: #fff; 
	font-size: 22px; 
	margin: 0 24px;
	font-weight: 300;
}


/*= ICON BOXES
--------------------------------------------------------*/

ul.icon-menu {margin-top: 16px;}
li.icon-box {width: 120px; height: 120px; list-style: none; left: -47px; position: relative; margin-bottom: 3px;}
li.icon-box.home {background: #2b99ce;}
li.icon-box.about {background: #24cccd;}
li.icon-box.service {background: #9a639a;}
li.icon-box.product {background: #c44745;}
li.icon-box.contact {background: #2d9a63;}

.icon-box h2{font-size: 20px; text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);}

.icon-box a {
	display: block;    
	padding: 0;
  width: 120px;
  height: 120px;
}


i.fa {
  position:absolute;
  pointer-events:none;
  color:white ;
  margin:16px 0 0 14px;
}



/*= TITLE BOXES
--------------------------------------------------------*/
.icon-box.home h2 { 
	 z-index: -999;
	 position: absolute; 
	 top: 0; 
	 left: 0; 
	 opacity: 0; 
	 background: #2b99ce; 
	 line-height: 120px; 
	 width: 120px; 
	 -webkit-transition: all  .3s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
		border-left: 3px solid #247eaa;
		
}

.icon-box.home a:hover h2 { 
	opacity: 1; left: 120px; margin: 0;
	text-align: center;
	
}

.icon-box.about h2 { 
	 z-index: -999;
	 position: absolute; 
	 top: 0; 
	 left: 0; 
	 opacity: 0; 
	 background: #24cccd; 
	 line-height: 120px; 
	 width: 120px; 
	 -webkit-transition: all  .3s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
    border-left: 3px solid #1da7a8;
}

.icon-box.about a:hover h2 { 
	opacity: 1; left: 120px; margin: 0;
	text-align: center;
	
}


.icon-box.service h2 { 
	 z-index: -999;
	 position: absolute; 
	 top: 0; 
	 left: 0; 
	 opacity: 0; 
	 background: #9a639a; 
	 line-height: 120px; 
	 width: 120px; 
	 -webkit-transition: all  .3s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
	border-left: 3px solid #6d466d;
}

.icon-box.service a:hover h2 { 
	opacity: 1; left: 120px; margin: 0;
	text-align: center;
	 
}


.icon-box.product h2 { 
	 z-index: -999;
	 position: absolute; 
	 top: 0; 
	 left: 0; 
	 opacity: 0; 
	 background: #c44745; 
	 line-height: 120px; 
	 width: 120px; 
	 -webkit-transition: all  .3s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
	border-left: 3px solid #9b3735;
}

.icon-box.product a:hover h2 { 
	opacity: 1; left: 120px; margin: 0;
	text-align: center;
	 
}

.icon-box.contact h2 { 
	 z-index: -999;
	 position: absolute; 
	 top: 0; 
	 left: 0; 
	 opacity: 0; 
	 background: #2d9a63; 
	 line-height: 120px; 
	 width: 120px; 
	 -webkit-transition: all  .3s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
	border-left: 3px solid #1e6b44;
}

.icon-box.contact a:hover h2 { 
	opacity: 1; left: 120px; margin: 0;
	text-align: center;
	 
}



/*= MENU ICONS
--------------------------------------------------------*/


span.icon { display: inline-block; background: url('../img/icon-sprites.png')no-repeat;  width: 32px; height: 32px; margin: 43px 40px;}
span.icon.home { background-position: 0px 0px;}
span.icon.aboutme { background-position: -36px 0px;}
span.icon.portfolio { background-position: -72px 0px;}
span.icon.blog { background-position: -109px 0px;}
span.icon.contact { background-position: -145px 0px;}

.icon-box a {
    padding: 120px;
}

.icon-menu i {
		border-radius: 50%;
		box-shadow: 0 0 0 50px transparent;
    padding: 0.2em 0.25em;
		background: rgba(255,255,255,0.1);
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		-o-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		-webkit-transition: box-shadow .6s ease-in-out;
		-moz-transition: box-shadow .6s ease-in-out;
		-o-transition: box-shadow .6s ease-in-out;
		-ms-transition: box-shadow .6s ease-in-out;
		transition: box-shadow .6s ease-in-out;
	}

.icon-menu li:hover i,
.icon-menu li:active i,
.icon-menu li:focus i {		
		box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
		-webkit-transition: box-shadow .4s ease-in-out;
		-moz-transition: box-shadow .4s ease-in-out;
		-o-transition: box-shadow .4s ease-in-out;
		-ms-transition: box-shadow .4s ease-in-out;
		transition: box-shadow .4s ease-in-out;
}

                                    
Card Bootstrap4 01

Card Bootstrap4 01

Card Bootstrap4 02

Card Bootstrap4 02

Carousel Bootstrap3

Carousel Bootstrap3

Créer des tds dynamiquement dans une table html

Créer des tds dynamiquement dans une table html

Gallery images with bootstrap4 Flexbox

Gallery images with bootstrap4 Flexbox

Input range slider HTML style04

Input range slider HTML style04

Nav Menu style02

Nav Menu style02

SwiperJS style02 avec 6 colonnes

SwiperJS style02 avec 6 colonnes

Timeline style01

Timeline style01

Titre section avec une bande style01

Titre section avec une bande style01

Transitions Animations SVG Style01

Transitions Animations SVG Style01

login page green one

login page green one