[html]<div class="main-post"> <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"> <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Jura" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">

<style> #natalie-sig{ width: 384px; height: 384px; background: url(http://s8.uploads.ru/hMKUZ.gif); position: relative; margin: 0px auto; outline: 1px solid #7cbede; border: 3px solid #bfaab5; }

#natalie-sig ::-webkit-scrollbar { width: 5px; border-radius: 50px; } #natalie-sig ::-webkit-scrollbar-track { background: transparent; } #natalie-sig ::-webkit-scrollbar-thumb { background: transparent;; border: 1px solid #transparent; border-radius: 50px; }

#natalie-sig .border1{ width: 0px; height: 0px; position: absolute; background: transparent; top: 173px; left: 11px; border-left: 1px solid #7cbede; border-top: 1px solid #7cbede; overflow: hidden; -webkit-transition: 0.5s ease-in 0.8s; transition: 0.5s ease-in 0.8s; } #natalie-sig:hover .border1{ width: 362px; height: 202px; -webkit-transition: 0.5s ease-in 0s; transition: 0.5s ease-in 0s; } #natalie-sig .border2{ width: 0px; height: 0px; position: absolute; background: transparent; bottom: 9px; right: 8px; border-right: 0.5px solid #7cbede; border-bottom: 0.5px solid #7cbede; overflow: hidden; -webkit-transition: 0.5s ease-in 0.8s; transition: 0.5s ease-in 0.8s; } #natalie-sig:hover .border2{ width: 362px; height: 202px; -webkit-transition: 0.5s ease-in 0s; transition: 0.5s ease-in 0s; }

#natalie-sig .base{ width: 362px; height: 202px; position: absolute; background: #212138; top: 0,5px; left: -500px; opacity: 0.88; -webkit-transition: 0.5s ease-in 0.3s; transition: 0.5s ease-in 0.3s; overflow: hidden; } #natalie-sig:hover .base{ -webkit-transition: 0.5s ease-in 0.5s; transition: 0.5s ease-in 0.5s; left: 0px; }

#natalie-sig .line{ width: 250px; height: 57px; position: absolute; background: transparent; border-left: 1px solid #7cbede; border-right: 1px solid #7cbede; border-bottom: 1px solid #7cbede; top: 102px; left: 67px; opacity: 0.9; }

#natalie-sig .icon{ width: 90px; height: 90px; position: absolute; top: 25px; left: 25px; overflow: hidden; z-index: 2; } #natalie-sig .icon img{ width: 65px; height: 65px; border-radius: 50px; border: 1px solid #7cbede; padding: 5px; }

#natalie-sig .icon2{ width: 90px; height: 90px; position: absolute; top: 25px; left: 270px; overflow: hidden; z-index: 2; } #natalie-sig .icon2 img{ width: 65px; height: 65px; border-radius: 50px; border: 1px solid #7cbede; padding: 5px; }

#natalie-sig .title{ position: absolute; background: transparent; top: 20px; left: 105px; width: 180px; height: 17px; border-bottom: 0px solid #7cbede; text-align: center; line-height: 10px; letter-spacing: 0px; font-family: 'Press Start 2P', sans-serif; font-size: 9px; text-transform: uppercase; color: #83c4e9; font-weight: bold; }

#natalie-sig .textbox{ width: 160px; height: 100px; position: absolute; background: transparent; bottom: 55px; left: 116px; overflow: auto; color: #83c4e9; text-align: justify; line-height: 10px; letter-spacing: 0px; font-family: 'Jura', sans-serif; font-size: 9,5px; padding-right: 9px; z-index: 3; }

#natalie-sig .navbox{ width: 175px; height: 20px; position: absolute; bottom: 23px; right: 90px; overflow: hidden; border: 1px solid #DF4158; border-radius: 20px; padding-top: 5px; z-index: 4; }

#natalie-sig .sf{ color: #DF4158; font-size: 14px; margin: 3px; } #natalie-sig .sf:hover{ color: #111; }

#natalie-sig a{ color: #DF4158; text-decoration: none; }

#natalie-sig .box{ width: 360px; height: 200px; position: absolute; top: 0px; left: -10px; background: transparent; -webkit-transition: 0.3s ease-in 0s; transition: 0.3s ease-in 0s; opacity: 0; } #natalie-sig:hover .box{ -webkit-transition: 0.3s ease-in 1s; transition: 0.3s ease-in 1s; opacity: 1; }

</style>

<center>
<div id='natalie-sig'>

<div class='border1'>
     
     <div class='base'></div>
     <div class='triangle'></div>
     
     <div class='box'>
         <div class='line'></div>
         
         <div class='icon'>
           <a href="http://unirole.rusff.me/profile.php?id=1475" title="Irie Shoichi">
           <img src="https://i.gyazo.com/1fc9f73ef76ffb91a4a3ba1503f5a6a1.png"></a>
         </div>

         <div class='icon2'>
           <a href="http://unirole.rusff.me/profile.php?id=1448" title="Gokudera Hayato">
           <img src="https://i.gyazo.com/3516d9645cd4064bf2b126b455348965.png"></a>
         </div>
         
         <div class='title'>йети нужно чаще мыть</div>
         <div class='textbox'>
           У клуба исследователей НЛО, криптид и роботов тройная мотивация ― поймать зверя, потому что иначе натворит дел, поймать зверя, чтобы получить хоть какое-то право на существование в универе, ПОЙМАТЬ ЗВЕРЯ, ЧТОБЫ ДОКАЗАТЬ ВСЯКИМ ТАМ СКЕПТИКАМ!
         </div>
         
     </div>
     
</div>

<div class='border2'>

</div>
</center>[/html]