CSS
/* Здрасте ¯\_(ツ)_/¯ Здрасте */
body {
background: #9733EE;
}
.social {
position: absolute;
text-align: center;
width: 50%;
margin: 0 25%;
}
.social p {
display: inline-block;
color: #fff;
text-align: center;
width: 100%;
font-family: "Istok Web", sans-serif;
font-size: 30px;
}
.fa-vk {
color: #fff;
background-color: transparent;
border: 2px #fff solid;
margin: 5px 5px 5px 0;
padding: 5px;
border-radius: 5px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.fa-vk:hover {
background-color: rgb(89,125,163);
border: 2px #597DA3 solid;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transform: translateY(-15%);
-ms-transform: translateY(-15%);
-o-transform: translateY(-15%);
transform: translateY(-15%);
will-change: transform;
text-shadow: 0 4px 6px #222;
box-shadow: 0 4px 6px #222;
}
.fa-odnoklassniki {
color: #fff;
background-color: transparent;
border: 2px #fff solid;
margin: 5px 5px 5px 0;
padding: 5px 10px;
border-radius: 5px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.fa-odnoklassniki:hover {
background-color: rgb(245,130,32);
border: 2px #F58220 solid;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transform: translateY(-15%);
-ms-transform: translateY(-15%);
-o-transform: translateY(-15%);
transform: translateY(-15%);
will-change: transform;
text-shadow: 0 4px 6px #222;
box-shadow: 0 4px 6px #222;
}
.fa-facebook {
color: #fff;
background-color: transparent;
border: 2px #fff solid;
margin: 5px 5px 5px 0;
padding: 5px 13px;
border-radius: 5px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.fa-facebook:hover {
background-color: rgb(72,103,170);
border: 2px #4867AA solid;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transform: translateY(-15%);
-ms-transform: translateY(-15%);
-o-transform: translateY(-15%);
transform: translateY(-15%);
will-change: transform;
text-shadow: 0 4px 6px #222;
box-shadow: 0 4px 6px #222;
}
.fa-twitter {
color: #fff;
background-color: transparent;
border: 2px #fff solid;
margin: 5px 5px 5px 0;
padding: 5px 10px;
border-radius: 5px;
-moz-transition: all 0.55s ease-out;
-o-transition: all 0.55s ease-out;
-webkit-transition: all 0.55s ease-out;
transition: all 0.55s ease-out;
}
.fa-twitter:hover {
background-color: rgb(65,171,225);
border: 2px #41ABE1 solid;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transform: translateY(-15%);
-ms-transform: translateY(-15%);
-o-transform: translateY(-15%);
transform: translateY(-15%);
will-change: transform;
text-shadow: 0 4px 6px #222;
box-shadow: 0 4px 6px #222;
}
.fa-google-plus {
color: #fff;
background-color: transparent;
border: 2px #fff solid;
margin: 5px 5px 5px 0;
padding: 5px 10px;
border-radius: 5px;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.fa-google-plus:hover {
background-color: rgb(220,74,56);
border: 2px #DC4A38 solid;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transform: translateY(-15%);
-ms-transform: translateY(-15%);
-o-transform: translateY(-15%);
transform: translateY(-15%);
will-change: transform;
text-shadow: 0 4px 6px #222;
box-shadow: 0 4px 6px #222;
}
.fa-github {
color: #fff;
background-color: transparent;
border: 2px #fff solid;
margin: 5px 5px 5px 0;
padding: 5px 13px;
border-radius: 5px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.fa-github:hover {
color: #000;
background-color: rgb(255,255,255);
border: 2px #fff solid;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transform: translateY(-15%);
-ms-transform: translateY(-15%);
-o-transform: translateY(-15%);
transform: translateY(-15%);
will-change: transform;
text-shadow: 0 4px 6px #222;
box-shadow: 0 4px 6px #222;
}
.fa-linkedin {
color: #fff;
background-color: transparent;
border: 2px #fff solid;
margin: 5px 5px 5px 0;
padding: 5px 13px;
border-radius: 5px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.fa-linkedin:hover {
color: #fff;
background-color: rgb(1,119,181);
border: 2px #0177B5 solid;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transform: translateY(-15%);
-ms-transform: translateY(-15%);
-o-transform: translateY(-15%);
transform: translateY(-15%);
will-change: transform;
text-shadow: 0 4px 6px #222;
box-shadow: 0 4px 6px #222;
}
.fa-skype {
color: #fff;
background-color: transparent;
border: 2px #fff solid;
margin: 5px 5px 5px 0;
padding: 5px 10px;
border-radius: 5px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.fa-skype:hover {
background-color: rgb(0,175,240);
border: 2px #00AFF0 solid;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transform: translateY(-15%);
-ms-transform: translateY(-15%);
-o-transform: translateY(-15%);
transform: translateY(-15%);
will-change: transform;
text-shadow: 0 4px 6px #222;
box-shadow: 0 4px 6px #222;
}
.fa-steam {
color: #fff;
background-color: transparent;
border: 2px #fff solid;
margin: 5px 5px 5px 0;
padding: 5px 10px;
border-radius: 5px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.fa-steam:hover {
background-color: rgb(0,0,0);
border: 2px #000 solid;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transform: translateY(-15%);
-ms-transform: translateY(-15%);
-o-transform: translateY(-15%);
transform: translateY(-15%);
will-change: transform;
text-shadow: 0 4px 6px #222;
box-shadow: 0 4px 6px #222;
}
.fa-vine {
color: #fff;
background-color: transparent;
border: 2px #fff solid;
margin: 5px 5px 5px 0;
padding: 5px 10px;
border-radius: 5px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.fa-vine:hover {
background-color: rgb(0,164,120);
border: 2px #00A478 solid;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transform: translateY(-15%);
-ms-transform: translateY(-15%);
-o-transform: translateY(-15%);
transform: translateY(-15%);
will-change: transform;
text-shadow: 0 4px 6px #222;
box-shadow: 0 4px 6px #222;
}
.fa-dribbble {
color: #fff;
background-color: transparent;
border: 2px #fff solid;
margin: 5px 5px 5px 0;
padding: 5px 10px;
border-radius: 5px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.fa-dribbble:hover {
background-color: #EA4C89;
border: 2px #EA4C89 solid;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transform: translateY(-15%);
-ms-transform: translateY(-15%);
-o-transform: translateY(-15%);
transform: translateY(-15%);
will-change: transform;
text-shadow: 0 4px 6px #222;
box-shadow: 0 4px 6px #222;
}
.fa-pinterest-p {
color: #fff;
background-color: transparent;
border: 2px #fff solid;
margin: 5px 5px 5px 0;
padding: 5px 10px;
border-radius: 5px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.fa-pinterest-p:hover {
background-color: rgb(203,32,39);
border: 2px #CB2027 solid;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transform: translateY(-15%);
-ms-transform: translateY(-15%);
-o-transform: translateY(-15%);
transform: translateY(-15%);
will-change: transform;
text-shadow: 0 4px 6px #222;
box-shadow: 0 4px 6px #222;
}
.fa-soundcloud {
color: #fff;
background-color: transparent;
border: 2px #fff solid;
margin: 5px 5px 5px 0;
padding: 5px 10px;
border-radius: 5px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.fa-soundcloud:hover {
background: linear-gradient(to top, #FC361C, #FF8726);
border: 0px;
padding: 7px 12px;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transform: translateY(-15%);
-ms-transform: translateY(-15%);
-o-transform: translateY(-15%);
transform: translateY(-15%);
will-change: transform;
text-shadow: 0 4px 6px #222;
box-shadow: 0 4px 6px #222;
}
.fa-youtube {
color: #fff;
background-color: transparent;
border: 2px #fff solid;
margin: 5px 5px 5px 0;
padding: 5px 12px;
border-radius: 5px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.fa-youtube:hover {
background-color: rgb(210,0,1);
border: 2px #D20001 solid;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transform: translateY(-15%);
-ms-transform: translateY(-15%);
-o-transform: translateY(-15%);
transform: translateY(-15%);
will-change: transform;
text-shadow: 0 4px 6px #222;
box-shadow: 0 4px 6px #222;
}
@media (max-width: 768px) {
.fa-vk {
color: #fff;
background-color: #597DA3;
border: 2px #597DA3 solid;
box-shadow: 0px 4px 6px rgba(0,0,0,0.7);
margin: 5px 5px 5px 0;
padding: 5px;
border-radius: 5px;
text-shadow: 0 4px 6px #222;
}
.fa-odnoklassniki {
color: #fff;
background-color: #F58220;
border: 2px #F58220 solid;
box-shadow: 0px 4px 6px rgba(0,0,0,0.7);
margin: 5px 5px 5px 0;
padding: 5px 10px;
border-radius: 5px;
text-shadow: 0 4px 6px #222;
}
.fa-facebook {
color: #fff;
background-color: #3B5998;
border: 2px #3B5998 solid;
box-shadow: 0px 4px 6px rgba(0,0,0,0.7);
margin: 5px 5px 5px 0;
padding: 5px 13px;
border-radius: 5px;
text-shadow: 0 4px 6px #222;
}
.fa-twitter {
color: #fff;
background-color: #41ABE1;
border: 2px #41ABE1 solid;
box-shadow: 0px 4px 6px rgba(0,0,0,0.7);
margin: 5px 5px 5px 0;
padding: 5px 10px;
border-radius: 5px;
text-shadow: 0 4px 6px #222;
}
.fa-google-plus {
color: #fff;
background-color: #DC4A38;
border: 2px #DC4A38 solid;
box-shadow: 0px 4px 6px rgba(0,0,0,0.7);
margin: 5px 5px 5px 0;
padding: 5px 10px;
border-radius: 5px;
text-shadow: 0 4px 6px #222;
}
.fa-github {
color: #000;
background-color: #fff;
border: 2px #fff solid;
box-shadow: 0px 4px 6px rgba(0,0,0,0.7);
margin: 5px 5px 5px 0;
padding: 5px 10px;
border-radius: 5px;
text-shadow: 0 4px 6px #222;
}
.fa-linkedin {
color: #fff;
background-color: rgb(1,119,181);
border: 2px #0177B5 solid;
box-shadow: 0px 4px 6px rgba(0,0,0,0.7);
margin: 5px 5px 5px 0;
padding: 5px 10px;
border-radius: 5px;
text-shadow: 0 4px 6px #222;
}
.fa-skype {
color: #fff;
background-color: rgb(0,175,240);
border: 2px #00AFF0 solid;
box-shadow: 0px 4px 6px rgba(0,0,0,0.7);
margin: 5px 5px 5px 0;
padding: 5px 10px;
border-radius: 5px;
text-shadow: 0 4px 6px #222;
}
.fa-steam {
color: #fff;
background-color: rgb(0,0,0);
border: 2px #000 solid;
box-shadow: 0px 4px 6px rgba(0,0,0,0.7);
margin: 5px 5px 5px 0;
padding: 5px 10px;
border-radius: 5px;
text-shadow: 0 4px 6px #222;
}
.fa-vine {
color: #fff;
background-color: rgb(0,164,120);
border: 2px #00A478 solid;
box-shadow: 0px 4px 6px rgba(0,0,0,0.7);
margin: 5px 5px 5px 0;
padding: 5px 10px;
border-radius: 5px;
text-shadow: 0 4px 6px #222;
}
.fa-dribbble {
color: #fff;
background-color: #EA4C89;
border: 2px #EA4C89 solid;
box-shadow: 0px 4px 6px rgba(0,0,0,0.7);
margin: 5px 5px 5px 0;
padding: 5px 10px;
border-radius: 5px;
text-shadow: 0 4px 6px #222;
}
.fa-pinterest-p {
color: #fff;
background-color: #CA1F26;
border: 2px #CA1F26 solid;
box-shadow: 0px 4px 6px rgba(0,0,0,0.7);
margin: 5px 5px 5px 0;
padding: 5px 10px;
border-radius: 5px;
text-shadow: 0 4px 6px #222;
}
.fa-soundcloud {
color: #fff;
background: linear-gradient(to top, #FC361C, #FF8726);
border: 0px;
padding: 5px 10px;
box-shadow: 0px 4px 6px rgba(0,0,0,0.7);
margin: 5px 5px 5px 0;
padding: 5px 10px;
border-radius: 5px;
text-shadow: 0 4px 6px #222;
}
.fa-soundcloud:hover {
padding: 5px 10px;
}
.fa-youtube {
color: #fff;
background-color: #D20001;
border: 2px #D20001 solid;
box-shadow: 0px 4px 6px rgba(0,0,0,0.7);
margin: 5px 5px 5px 0;
padding: 5px 10px;
border-radius: 5px;
text-shadow: 0 4px 6px #222;
}
}
