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

                                    
texte animate effects style 01

texte animate effects style 01

Timeline style02

Timeline style02

Radio button style

Radio button style

Pure CSS Percentage Circle

Pure CSS Percentage Circle

Page 404 exemple 01

Page 404 exemple 01

Organization Chart

Organization Chart

Nav Menu style01

Nav Menu style01

Input valid invalid HTML CSS

Input valid invalid HTML CSS

Image hover 02

Image hover 02

Google Style Login

Google Style Login

Compteur avec b4

Compteur avec b4

Changer le style du scroll bar in html

Changer le style du scroll bar in html