Social Media Icons

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Social Media Icons | 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="Social Media Icons">
    <meta name="author" content="Mezgani said">
    <meta name="copyright" content="NGLESSON">
    <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" />
</head>
<body >

	<ul class="menu bottomRight">
		<li class="share top">
		  <i class="fa fa-share-alt"></i>
		  <ul class="submenu">
			<li><a href="#" class="facebook"><i class="fa fa-facebook"></i></a></li>
			<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
			<li><a href="#" class="googlePlus"><i class="fa fa-google-plus"></i></a></li>
			<li><a href="#" class="instagram"><i class="fa fa-instagram"></i></a></li>
		  </ul>
		</li>
	  </ul>
	  
	  <!--  -->
	  <ul class="menu bottomLeft">
		<li class="share right">
		  <i class="fa fa-share-alt"></i>
		  <ul class="submenu">
			<li><a href="#" class="facebook"><i class="fa fa-facebook"></i></a></li>
			<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
			<li><a href="#" class="googlePlus"><i class="fa fa-google-plus"></i></a></li>
			<li><a href="#" class="instagram"><i class="fa fa-instagram"></i></a></li>
		  </ul>
		</li>
	  </ul>
	  
	  <!--  -->
	  
	  <ul class="menu topLeft">
		<li class="share bottom">
		  <i class="fa fa-share-alt"></i>
		  <ul class="submenu">
			<li><a href="#" class="facebook"><i class="fa fa-facebook"></i></a></li>
			<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
			<li><a href="#" class="googlePlus"><i class="fa fa-google-plus"></i></a></li>
			<li><a href="#" class="instagram"><i class="fa fa-instagram"></i></a></li>
		  </ul>
		</li>
	  </ul>
	  
	  <!--  -->
	  
	  <ul class="menu topRight">
		<li class="share left">
		  <i class="fa fa-share-alt"></i>
		  <ul class="submenu">
			<li><a href="#" class="facebook"><i class="fa fa-facebook"></i></a></li>
			<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
			<li><a href="#" class="googlePlus"><i class="fa fa-google-plus"></i></a></li>
			<li><a href="#" class="instagram"><i class="fa fa-instagram"></i></a></li>
		  </ul>
		</li>
	  </ul>
	  
	  <div class="container">
		<h1>Social Media Icons</h1>
	  </div>
	  

</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Montserrat');
 body {
	 background-color: #b2b1cf;
	 font-family: 'Montserrat', sans-serif;
}
 .container {
	 height: 70px;
	 padding: 55px;
	 position: fixed;
	 top: 0;
	 bottom: 0;
	 left: 0;
	 right: 0;
	 margin: auto;
	 text-align: center;
}
 .menu {
	 z-index: 999;
	 position: fixed;
	 padding: 0;
	 margin: 0;
	 list-style-type: none;
}
 .menu .share i.fa {
	 height: 50px;
	 width: 50px;
	 text-align: center;
	 line-height: 50px;
	 background-color: #fff;
	 border-radius: 2px;
}
 .menu .share:hover.bottom .submenu li:nth-child(1) {
	 opacity: 1;
	 top: 50px;
	 transform: rotate(0deg);
	 border-top: 1px dashed #ccc;
	 transition-delay: 0.08s;
}
 .menu .share:hover.bottom .submenu li:nth-child(2) {
	 opacity: 1;
	 top: 100px;
	 transform: rotate(0deg);
	 border-top: 1px dashed #ccc;
	 transition-delay: 0.16s;
}
 .menu .share:hover.bottom .submenu li:nth-child(3) {
	 opacity: 1;
	 top: 150px;
	 transform: rotate(0deg);
	 border-top: 1px dashed #ccc;
	 transition-delay: 0.24s;
}
 .menu .share:hover.bottom .submenu li:nth-child(4) {
	 opacity: 1;
	 top: 200px;
	 transform: rotate(0deg);
	 border-top: 1px dashed #ccc;
	 transition-delay: 0.32s;
}
 .menu .share:hover.bottom .submenu li:nth-child(5) {
	 opacity: 1;
	 top: 250px;
	 transform: rotate(0deg);
	 border-top: 1px dashed #ccc;
	 transition-delay: 0.4s;
}
 .menu .share:hover.left .submenu li:nth-child(1) {
	 opacity: 1;
	 left: -51px;
	 transform: rotate(0deg);
	 transition-delay: 0.5s;
	 border-right: 1px dashed #ccc;
}
 .menu .share:hover.left .submenu li:nth-child(2) {
	 opacity: 1;
	 left: -102px;
	 transform: rotate(0deg);
	 transition-delay: 1s;
	 border-right: 1px dashed #ccc;
}
 .menu .share:hover.left .submenu li:nth-child(3) {
	 opacity: 1;
	 left: -153px;
	 transform: rotate(0deg);
	 transition-delay: 1.5s;
	 border-right: 1px dashed #ccc;
}
 .menu .share:hover.left .submenu li:nth-child(4) {
	 opacity: 1;
	 left: -204px;
	 transform: rotate(0deg);
	 transition-delay: 2s;
	 border-right: 1px dashed #ccc;
}
 .menu .share:hover.left .submenu li:nth-child(5) {
	 opacity: 1;
	 left: -255px;
	 transform: rotate(0deg);
	 transition-delay: 2.5s;
	 border-right: 1px dashed #ccc;
}
 .menu .share:hover.right .submenu li:nth-child(1) {
	 opacity: 1;
	 left: 50px;
	 transform: rotate(0deg);
	 transition-delay: 0.08s;
	 border-left: 1px dashed #ccc;
}
 .menu .share:hover.right .submenu li:nth-child(2) {
	 opacity: 1;
	 left: 100px;
	 transform: rotate(0deg);
	 transition-delay: 0.16s;
	 border-left: 1px dashed #ccc;
}
 .menu .share:hover.right .submenu li:nth-child(3) {
	 opacity: 1;
	 left: 150px;
	 transform: rotate(0deg);
	 transition-delay: 0.24s;
	 border-left: 1px dashed #ccc;
}
 .menu .share:hover.right .submenu li:nth-child(4) {
	 opacity: 1;
	 left: 200px;
	 transform: rotate(0deg);
	 transition-delay: 0.32s;
	 border-left: 1px dashed #ccc;
}
 .menu .share:hover.right .submenu li:nth-child(5) {
	 opacity: 1;
	 left: 250px;
	 transform: rotate(0deg);
	 transition-delay: 0.4s;
	 border-left: 1px dashed #ccc;
}
 .menu .share:hover.top .submenu li:nth-child(1) {
	 opacity: 1;
	 top: -51px;
	 transition-delay: 0.08s;
	 transform: rotateY(0deg);
	 border-bottom: 1px dashed #d9d9d9;
}
 .menu .share:hover.top .submenu li:nth-child(2) {
	 opacity: 1;
	 top: -102px;
	 transition-delay: 0.16s;
	 transform: rotateY(0deg);
	 border-bottom: 1px dashed #d9d9d9;
}
 .menu .share:hover.top .submenu li:nth-child(3) {
	 opacity: 1;
	 top: -153px;
	 transition-delay: 0.24s;
	 transform: rotateY(0deg);
	 border-bottom: 1px dashed #d9d9d9;
}
 .menu .share:hover.top .submenu li:nth-child(4) {
	 opacity: 1;
	 top: -204px;
	 transition-delay: 0.32s;
	 transform: rotateY(0deg);
	 border-bottom: 1px dashed #d9d9d9;
}
 .menu .share:hover.top .submenu li:nth-child(5) {
	 opacity: 1;
	 top: -255px;
	 transition-delay: 0.4s;
	 transform: rotateY(0deg);
	 border-bottom: 1px dashed #d9d9d9;
}
 .menu .submenu {
	 list-style-type: none;
	 padding: 0;
	 margin: 0;
}
 .menu .submenu li {
	 transition: all ease-in-out 0.5s;
	 position: absolute;
	 top: 0;
	 left: 0;
	 z-index: -1;
	 opacity: 0;
}
 .menu .submenu li a {
	 color: #212121;
}
 .menu .submenu li a:hover i.fa {
	 color: #fff;
}
 .menu .submenu li a:hover.facebook i.fa {
	 background-color: #3b5999;
}
 .menu .submenu li a:hover.twitter i.fa {
	 background-color: #55acee;
}
 .menu .submenu li a:hover.googlePlus i.fa {
	 background-color: #dd4b39;
}
 .menu .submenu li a:hover.instagram i.fa {
	 background-color: #e4405f;
}
 .menu .submenu li:nth-child(1) {
	 transform: rotateX(45deg);
}
 .menu .submenu li:nth-child(2) {
	 transform: rotateX(90deg);
}
 .menu .submenu li:nth-child(3) {
	 transform: rotateX(135deg);
}
 .menu .submenu li:nth-child(4) {
	 transform: rotateX(180deg);
}
 .menu.topLeft {
	 top: 10px;
	 left: 10px;
}
 .menu.topRight {
	 top: 10px;
	 right: 10px;
}
 .menu.bottomLeft {
	 bottom: 10px;
	 left: 10px;
}
 .menu.bottomRight {
	 bottom: 10px;
	 right: 10px;
}
 

                                    
Titre section avec une anmation style01

Titre section avec une anmation style01

Texte Block Posts Style01

Texte Block Posts Style01

Tablet style code texte

Tablet style code texte

Table bootstrap with Datatable

Table bootstrap with Datatable

Profile page with b4

Profile page with b4

Login Bootstrap3

Login Bootstrap3

Loading Style snake

Loading Style snake

Lightbox gallery style01

Lightbox gallery style01

Input valid invalid HTML CSS

Input valid invalid HTML CSS

Elastic Content Slider

Elastic Content Slider

Card Profile Style01

Card Profile Style01

Background div gradient

Background div gradient