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

                                    
Background div gradient

Background div gradient

Card 4 Product Style01

Card 4 Product Style01

Card Bootstrap4 02

Card Bootstrap4 02

Form contact avec validation en css

Form contact avec validation en css

Form login b4 01

Form login b4 01

Image hover 04

Image hover 04

Image hover 05

Image hover 05

Login Bootstrap3

Login Bootstrap3

Pie Charts

Pie Charts

Scroll to div ID

Scroll to div ID

Social Media Icons

Social Media Icons

Timeline style05

Timeline style05