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

                                    
toggle switch style01

toggle switch style01

input radio checkbox b4 style

input radio checkbox b4 style

creation dune icone de prechargement avec css

creation dune icone de prechargement avec css

bootstrap4 tabs

bootstrap4 tabs

Vidéo background en html5 style01

Vidéo background en html5 style01

Table Responsive with css 01

Table Responsive with css 01

Loading style water animation

Loading style water animation

Image hover 05

Image hover 05

Créer des tds dynamiquement dans une table html

Créer des tds dynamiquement dans une table html

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Ajouter une pagination1

Ajouter une pagination1

Ajouter une legende dans un formulaire

Ajouter une legende dans un formulaire