Код:
<!--HTML-->
<style type="text/css">@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
#playingdead_serenity { width: 375px; height: 150px; background: rgb(247, 202, 201); background: -webkit-linear-gradient(top left,rgb(145, 168, 208),rgb(247, 202, 201)); background: -o-linear-gradient(top left,rgb(145, 168, 208),rgb(247, 202, 201)); background: -moz-linear-gradient(top left,rgb(145, 168, 208),rgb(247, 202, 201)); background: linear-gradient(top left,rgb(145, 168, 208),rgb(247, 202, 201)); }
#playingdead_rose { position: relative; top: 1px; left: 0px; width: 373px; height: 148px; background: rgb(145, 168, 208); background: -webkit-linear-gradient(top left,rgb(247, 202, 201),rgb(145, 168, 208)); background: -o-linear-gradient(top left,rgb(247, 202, 201),rgb(145, 168, 208)); background: -moz-linear-gradient(top left,rgb(247, 202, 201),rgb(145, 168, 208)); background: linear-gradient(top left,rgb(247, 202, 201),rgb(145, 168, 208)); }
#playingdead_white { position: relative; top: 29px; width: 315px; height: 90px; background-color: rgba(255, 255, 255, 0.6); margin: auto; }
#playingdead_profile { top: 30px; left: -115px; } #playingdead_one { top: -225px; left: -115px; } #playingdead_gallery { top: -30px; left: -40px; } #playingdead_two { top: -285px; left: -40px; } #playingdead_testing { top: -90px; left: 35px; } #playingdead_three { top: -345px; left: 35px; } #playingdead_tumblr { top: -150px; left: 110px; } #playingdead_four { top: -405px; left: 110px; }
#playingdead_one, #playingdead_two, #playingdead_three, #playingdead_four { position: relative; width: 60px; height: 60px; opacity: 1; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; -o-transition: all ease 0.5s; transition: all ease 0.5s; }
#playingdead_one:hover, #playingdead_two:hover, #playingdead_three:hover, #playingdead_four:hover { opacity: 0; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; -o-transition: all ease 0.5s; transition: all ease 0.5s; }
#playingdead_one img, #playingdead_two img, #playingdead_three img, #playingdead_four img { width: 60px; height: 60px; }
#playingdead_profile, #playingdead_gallery, #playingdead_testing, #playingdead_tumblr { position: relative; width: 60px; height: 60px; text-align: center; line-height: 60px; font-size: 30px; color: rgb(255, 255, 255); }
#playingdead_credit a { position: relative; top: 1px; width: 375px; font-size: 8px; font-family: "Cousine", serif; color: rgb(145, 168, 208); text-transform: uppercase; text-decoration: none; text-align: center; }
</style>
<center> <div id="playingdead_serenity"> <div id="playingdead_rose"> <div id="playingdead_white"> <div id="playingdead_profile"><em class="fa fa-user" aria-hidden="true"></em></div> <div id="playingdead_gallery"><em class="fa fa-code" aria-hidden="true"></em></div> <div id="playingdead_testing"><em class="fa fa-bug" aria-hidden="true"></em></div> <div id="playingdead_tumblr"><em class="fa fa-tumblr" aria-hidden="true"></em></div> <div id="playingdead_one">
<a href="[[ PROFILE LINK ]]" title="Profile">
<img src="[[ FIRST IMAGE ]]" /></a></div> <div id="playingdead_two">
<a href="[[ GALLERY LINK ]]" title="Gallery">
<img src="[[ SECOND IMAGE ]]" /></a></div> <div id="playingdead_three">
<a href="[[ TESTING FORUM LINK ]]" title="Testing">
<img src="[[ THIRD IMAGE ]]" /></a></div><div id="playingdead_four">
<a href="[[ TUMBLR LINK ]]" target="_blank" title="Tumblr">
<img src="[[ FOURTH IMAGE ]]" /></a>
</div></div> </div> </div> </center>
