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

                                    
Animation 3d social icones avec css3

Animation 3d social icones avec css3

Bootstrap Cookie Alert pages

Bootstrap Cookie Alert pages

Dropdown right aligned B4

Dropdown right aligned B4

Form Step With B4 Style01

Form Step With B4 Style01

Image hover effects style

Image hover effects style

Input range slider HTML style04

Input range slider HTML style04

Login Bootstrap3

Login Bootstrap3

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Timeline style03

Timeline style03

bootstrap4 tabs

bootstrap4 tabs

creation dune icone de prechargement avec css

creation dune icone de prechargement avec css

up down tr in table with js

up down tr in table with js