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

                                    
Timeline style02

Timeline style02

Timeline style01

Timeline style01

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Page construction avec compte à rebours style01

Page construction avec compte à rebours style01

Login Bootstrap3

Login Bootstrap3

Input range slider HTML style02

Input range slider HTML style02

Image hover 07

Image hover 07

Créer des tds dynamiquement dans une table html

Créer des tds dynamiquement dans une table html

Calculatrice style01

Calculatrice style01

Bootstrap modal avec un formulaire newsletter

Bootstrap modal avec un formulaire newsletter

Bootstrap Cookie Alert pages

Bootstrap Cookie Alert pages

Alert Bootstrap4 style01

Alert Bootstrap4 style01