alma4rebi/index.html

## index.html
<href="//www.fontstatic.com/f=sukar" />
<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
<script src="https://use.fontawesome.com/dbb72ac4f9.js"></script>

</head>

<body>

<h1> محمد السيد متولى </h1>
<h2> <a href="https://www.facebook.com/groups/ElzeroWebSchool/" target="_blank">Elzero Web School</a> </h2>

<ul>

	<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
	<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
	<li><a href="#"><i class="fa fa-youtube-play" aria-hidden="true"></i></a></li>
	<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
	<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
	<li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
	<li><a href="#"><i class="fa fa-whatsapp" aria-hidden="true"></i></a></li>
	<li><a href="#"><i class="fa fa-skype" aria-hidden="true"></i></a></li>
	<li><a href="#"><i class="fa fa-phone" aria-hidden="true"></i></a></li>
	<li><a href="#"><i class="fa fa-snapchat-ghost" aria-hidden="true"></i></a></li>

</ul>


## social-media-icons-hover.markdown

      
    Raw
  

              social-media-icons-hover.markdown
            
          
    Social Media Icons hover

A Pen by AlmaGrebi on CodePen.
License.

  
## style.css
body {
	background-color: #17202A; /* لون الخلفية */
}

h1 {
	width: 90%;
	font-family: sukar ;
	color:#DC7633;
	text-align: center;
	line-height: 45px;
}

h2 {
	width: 90%;
	font-family: 'Courgette', cursive;
	color:#DC7633;
	text-align: center;
	line-height: 45px;
}


h2 a {
	text-decoration: none;
	color: #FFFFFF;
	font-size: 35px;
}
h2 a:hover {
	color: #00AFF0;
}

ul {
	display: flex ;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}


ul li {
	list-style: none ;
}

 ul li a {
	 width: 100px; 								/* عرض الايقونات */
	 height: 100px;								 /* طول الايقونات */
	 background-color: #FFFFFF; 					/* لون الخلفية  */
	 text-align: center;
	 font-size: 60px; 							/* حجم الخط الخاص بالايقونة */
	 line-height: 100px; 						/* إرتفاع الخط - ملحوظة لازم يكون نفس حجم الطول والعرض  */
     margin: 0 10px; 							/* التباعد من اليمين والشمال */
	 display: block;
	 border-radius: 50%;						 /* حجم الالتفاف لصنع دائرة */
	 position: relative;
	 overflow: hidden;
	 border: solid 3px #ffffff;
	 z-index: 2;
}

ul li a .fa {
	position: relative;
	color: #262626; 				/*  لون الايقونة الاساسى */
	transition: .5s;
	z-index: 3;
}

ul li a:hover .fa {
	color: #FFFFFF; 				/* لون الايقونة بعد الهوفر */
	transform: rotateY(360deg);
}


ul li a:before {
	content: '';
	position: absolute;
	top: 100% ;
	left: 0% ;
	width: 100%;
	height: 100%;
	background-color: #FF0000;
	transition: .5s;
	z-index:1 ;
}

ul li a:hover:before {
	top: 0 ;
}


ul li:nth-child(1) a:before {
	background-color:#3b5999 ; /* الفيس بوك*/
}

ul li:nth-child(2) a:before {
	background-color:#55acee ; /* تويتر */
}

ul li:nth-child(3) a:before {
	background-color:#cd201f ; /* اليوتيوب */
}

ul li:nth-child(4) a:before {
	background-color:#dd4b39 ; /* جوجل بلس */
}

ul li:nth-child(5) a:before {
	background-color:#0077B5 ; /* لينكد ان */
}

ul li:nth-child(6) a:before {
	background-color:#e4405f ; /* إنستجرام */
}

ul li:nth-child(7) a:before {
	background-color:#25D366 ; /* الواتساب */
}

ul li:nth-child(8) a:before {
	background-color:#00AFF0 ; /* سكايب */
}

ul li:nth-child(9) a:before {
	background-color:#34465d ; /* التليفون */
}

ul li:nth-child(10) a:before {
	background-color:#FFFC00 ; /* سناب شات */
}
	<href="//www.fontstatic.com/f=sukar" />
	<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
	<script src="https://use.fontawesome.com/dbb72ac4f9.js"></script>

	</head>

	<body>

	<h1> محمد السيد متولى </h1>
	<h2> <a href="https://www.facebook.com/groups/ElzeroWebSchool/" target="_blank">Elzero Web School</a> </h2>

	<ul>

	<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
	<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
	<li><a href="#"><i class="fa fa-youtube-play" aria-hidden="true"></i></a></li>
	<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
	<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
	<li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
	<li><a href="#"><i class="fa fa-whatsapp" aria-hidden="true"></i></a></li>
	<li><a href="#"><i class="fa fa-skype" aria-hidden="true"></i></a></li>
	<li><a href="#"><i class="fa fa-phone" aria-hidden="true"></i></a></li>
	<li><a href="#"><i class="fa fa-snapchat-ghost" aria-hidden="true"></i></a></li>

	</ul>
	body {
	background-color: #17202A; /* لون الخلفية */
	}

	h1 {
	width: 90%;
	font-family: sukar ;
	color:#DC7633;
	text-align: center;
	line-height: 45px;
	}

	h2 {
	width: 90%;
	font-family: 'Courgette', cursive;
	color:#DC7633;
	text-align: center;
	line-height: 45px;
	}


	h2 a {
	text-decoration: none;
	color: #FFFFFF;
	font-size: 35px;
	}
	h2 a:hover {
	color: #00AFF0;
	}

	ul {
	display: flex ;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	}


	ul li {
	list-style: none ;
	}

	ul li a {
	width: 100px; /* عرض الايقونات */
	height: 100px; /* طول الايقونات */
	background-color: #FFFFFF; /* لون الخلفية */
	text-align: center;
	font-size: 60px; /* حجم الخط الخاص بالايقونة */
	line-height: 100px; /* إرتفاع الخط - ملحوظة لازم يكون نفس حجم الطول والعرض */
	margin: 0 10px; /* التباعد من اليمين والشمال */
	display: block;
	border-radius: 50%; /* حجم الالتفاف لصنع دائرة */
	position: relative;
	overflow: hidden;
	border: solid 3px #ffffff;
	z-index: 2;
	}

	ul li a .fa {
	position: relative;
	color: #262626; /* لون الايقونة الاساسى */
	transition: .5s;
	z-index: 3;
	}

	ul li a:hover .fa {
	color: #FFFFFF; /* لون الايقونة بعد الهوفر */
	transform: rotateY(360deg);
	}


	ul li a:before {
	content: '';
	position: absolute;
	top: 100% ;
	left: 0% ;
	width: 100%;
	height: 100%;
	background-color: #FF0000;
	transition: .5s;
	z-index:1 ;
	}

	ul li a:hover:before {
	top: 0 ;
	}


	ul li:nth-child(1) a:before {
	background-color:#3b5999 ; /* الفيس بوك*/
	}

	ul li:nth-child(2) a:before {
	background-color:#55acee ; /* تويتر */
	}

	ul li:nth-child(3) a:before {
	background-color:#cd201f ; /* اليوتيوب */
	}

	ul li:nth-child(4) a:before {
	background-color:#dd4b39 ; /* جوجل بلس */
	}

	ul li:nth-child(5) a:before {
	background-color:#0077B5 ; /* لينكد ان */
	}

	ul li:nth-child(6) a:before {
	background-color:#e4405f ; /* إنستجرام */
	}

	ul li:nth-child(7) a:before {
	background-color:#25D366 ; /* الواتساب */
	}

	ul li:nth-child(8) a:before {
	background-color:#00AFF0 ; /* سكايب */
	}

	ul li:nth-child(9) a:before {
	background-color:#34465d ; /* التليفون */
	}

	ul li:nth-child(10) a:before {
	background-color:#FFFC00 ; /* سناب شات */
	}