<href="//www.fontstatic.com/f=sukar" />
<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="//www.fontstatic.com/f=DroidKufi-Regular" />
<script src="https://use.fontawesome.com/dbb72ac4f9.js"></script>

</head>

<body>

  <h1> <a href="https://www.facebook.com/mohamed.elsayed.mtwaly"  target="_blank">محمد السيد متولى</a> </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: 100%;
  font-family: DroidKufi-Regular ;
  color:#DC7633;
  text-align: center;
  line-height: 50px;
}

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

h1 a {
  text-decoration: none;
  color: #FFFFFF;
  font-size: 35px;
}
h2 a {
  text-decoration: none;
  color: #FFFFFF;
  font-size: 35px;
}
h1 a:hover {
  color: #DC7633;
}
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 ; /* سناب شات */
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.