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

                                    
input radio checkbox b4 style

input radio checkbox b4 style

Up Down Animation With CSS Style01

Up Down Animation With CSS Style01

Timeline style08

Timeline style08

Radio button style

Radio button style

Loading style water animation

Loading style water animation

Header with background animate 01

Header with background animate 01

Drag and drop or upload input file

Drag and drop or upload input file

Compteur avec b4

Compteur avec b4

Card Profile Style01

Card Profile Style01

Calculatrice style01

Calculatrice style01

Bootstrap modal avec un formulaire newsletter

Bootstrap modal avec un formulaire newsletter

Ajouter une pagination1

Ajouter une pagination1