<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">

<div class="sosyal">
<h1>Sosyal Medya Hesaplarımızı Takip Edin.</h1>
<ul>
<li><a href="https://facebook.com"><i class="fa fa-facebook-official" aria-hidden="true"></i></a></li>
<li><a href="https://twitter.com"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="http://linkedin.com"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
<li><a href="http://pinterest.com"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
<li><a href="https://www.youtube.com/"><i class="fa fa-youtube-square" aria-hidden="true"></i></a></li>
<li><a href="https://plus.google.com"><i class="fa fa-google-plus-square" aria-hidden="true"></i></a></li>
</ul>
</div>

#s6 .sosyal{
position: absolute;
width: 80%;
height: 30%;
min-width: 650px;
text-align: center;
transform: translate(10%, 10%);
}
#s6 .sosyal ul{
display: flex;
text-align: center;
position: absolute;
padding-left: 35%;
}
#s6 .sosyal ul li{
background: black
margin: 8px;
list-style: none;
font-size: 30px;
transition: .5s;
}
#s6 .sosyal ul li a{
width: 40px;
padding: 6px 0;
display: block;
color: white;
}
#s6 .sosyal ul li:nth-child(1){background: #3b5998;}
#s6 .sosyal ul li:nth-child(2){background: #00aced;}
#s6 .sosyal ul li:nth-child(3){background: #007bb6;}
#s6 .sosyal ul li:nth-child(4){background: #cb2027;}
#s6 .sosyal ul li:nth-child(5){background: #bb0000;}
#s6 .sosyal ul li:nth-child(6){background: #dd4b39;}
#s6 .sosyal ul li:hover{
transform: translateY(-8px);
box-shadow: 0 10px 10px rgba(0.0.0.0.6)
}
#s6 .sosyal h1{
padding-top: 5%;
font-size: Calibri;
color: #007bb6;
}