Код:
<!--HTML--><center><div class="aliasb"> <div class="captb">alliance</div> <div class="pottb"> <div class="infoboxb"> </div> <div class="playerinfo1b">Fargo, North Carolina, USA<a href="http://shine.b1.jcink.com/index.php?showuser=11414" style="color: white; text-decoration: none;"> </a></div> <div class="pl1b">009</div> <div class="playerinfo2b">members</div> <img src="http://i.imgur.com/0KDyw3s.png"> </div> <table style="margin-left: -1px;"><tr><td> <div class="peepb"> <img src="http://i.imgur.com/umBZrPM.png"> <div class="peepwordb"><a href="https://bastards.rusff.me/profile.php?id=28">Jay Hayes</a></div> <div class="peepword2b">30 | психолог ЦКИ<br>иной | асенсорика</div> </div> </td> <td> <div class="peepb"> <img src="http://i.imgur.com/S1qRGuq.png"> <div class="peepwordb"><a href="https://bastards.rusff.me/profile.php?id=13">Grace Fitzroy</a></div> <div class="peepword2b">28 | лаборант<br>иная | астральная проекция</div> </div> </td> <td> <div class="peepb"> <img src="http://i.imgur.com/cRIObKh.png"> <div class="peepwordb"><a href="https://bastards.rusff.me/profile.php?id=95">Carla Hennessey</a></div> <div class="peepword2b">36 | информатор альянса, частный детектив<br>иная | генерация энергии</div> </div> </td> <td> <div class="peepb"> <img src="http://i.imgur.com/JqeED7g.jpg"> <div class="peepwordb"><a href="https://bastards.rusff.me/profile.php?id=108">Aida Maxwell</a></div> <div class="peepword2b">27 | социальный работник в ЦКИ<br>иная | БЛОКИРОВАНИЕ СПОСОБНОСТЕЙ</div> </div> </td> </tr> <tr><td> <div class="peepb"> <img src="http://i.imgur.com/6yZMn6u.jpg"> <div class="peepwordb"><a href="https://bastards.rusff.me/profile.php?id=115">Renee Lau</a></div> <div class="peepword2b">37 | инструктор по тактической подготовке<br>иная | УПРАВЛЕНИЕ ЖИВОТНЫМИ</div> </div> </td> <td> <div class="peepb"> <img src="http://i.imgur.com/FlKHE0m.jpg"> <div class="peepwordb"><a href="https://bastards.rusff.me/profile.php?id=119">Brian O'Shea</a></div> <div class="peepword2b">27 | помощник руководителя по связям с общественностью<br>иной | ЗАЩИТНОЕ ПОЛЕ</div> </div> </td> <td> <div class="peepb"> <img src="http://i.imgur.com/j5MOWnc.png"> <div class="peepwordb"><a href="https://bastards.rusff.me/profile.php?id=129">Jesse Dyer</a></div> <div class="peepword2b">35 | командир боевой группы<br>человек</div> </div> </td> <td> <div class="peepb"> <img src="http://i.imgur.com/UCPcf4G.png"> <div class="peepwordb"><a href="https://bastards.rusff.me/profile.php?id=136">Alister Maddox</a></div> <div class="peepword2b">38 | член стратегического совета<br>иной | асинкопия</div> </div> </td> </tr> <tr><td> <div class="peepb"> <img src="http://i.imgur.com/eS2wWzT.png"> <div class="peepwordb"><a href="https://bastards.rusff.me/profile.php?id=137">Verlen Brogg</a></div> <div class="peepword2b">32 | заведующая социально-медицинском блоком<br>иная | поглощение сил</div> </div> </td> <td> <div class="peepb"> <img src="http://i.imgur.com/3ZAeysW.png"> <div class="peepwordb"><a href="link">Name Surname</a></div> <div class="peepword2b">возраст | деятельность<br>раса | способность</div> </div> </td> <td> <div class="peepb"> <img src="http://i.imgur.com/3ZAeysW.png"> <div class="peepwordb"><a href="link">Name Surname</a></div> <div class="peepword2b">возраст | деятельность<br>раса | способность</div> </div> </td> <td> <div class="peepb"> <img src="http://i.imgur.com/3ZAeysW.png"> <div class="peepwordb"><a href="link">Name Surname</a></div> <div class="peepword2b">возраст | деятельность<br>раса | способность</div> </div> </td> </tr> </table> </div> <link href='http://fonts.googleapis.com/css?family=Economica' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'> <style type="text/css"> .aliasb { width: 540px; background-color: none; position: relative; overflow: hidden; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3) inset; } .captb { height: 50px; width: 540px; padding: 8px 0; background-image: url(http://colourlovers.com.s3.amazonaws.com/images/patterns/4756/4756279.png); font: 30px raleway; text-transform: uppercase; text-align: center; color: #3f6767; font-family: Source Code Pro; letter-spacing: 3px; position: relative; top: 0; left: 0; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; transition: 1s; } .pottb { height: 50px; width: 520px; background-image: url(http://colourlovers.com.s3.amazonaws.com/images/patterns/4756/4756279.png); position: absolute; top: 0; left: 550px; padding: 8px 10px; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; transition: 1s; font: 16px Source Code Pro; text-transform: uppercase; color: #3f6767; } .pottb img { width: 48px; float: right; border: 0px solid #3f6767; } .infoboxb { width: 100px; height: 50px; overflow: auto; position: absolute; left: 10px; top: 8px; text-align: justify; line-height: 100%; padding-right: 4px; font-size: 8px; } .infoboxb::-webkit-scrollbar { width: 5px; } .infoboxb::-webkit-scrollbar-track { background-color: none; border-right: 2px solid #a1c3cd; border-left: 2px solid #a1c3cd; } .infoboxb::-webkit-scrollbar-thumb { background-color: white; border-top: 2px solid #a1c3cd; border-bottom: 2px solid #a1c3cd; } .playerinfo1b { width: 210px; position: absolute; top: 10px; left: 80px; text-align: center; } .playerinfo2b { width: 210px; position: absolute; top: 40px; left: 310px; text-align: center; } .pl1b { width: 210px; font-size: 40px; position: absolute; top: 16px; left: 230px; text-align: center; } .peepb { height: 125px; background-color: lightgrey; padding: 3px 0px 0px 3px; overflow: hidden; } .peepb img { width: 125px; } .peepwordb { height: 17 px; padding: 1px 0; position: relative; top: 13 px; left: 0; background-color: grey; font: 11px Source Code Pro; text-transform: uppercase; text-align: center; color: white; -webkit-transition: .4s; -o-transition: .4s; -moz-transition: .4s; transition: .4s; } .peepwordb a { color: white; text-decoration: none; } .peepword2b { height: 50px; padding-bottom: 1px; position: relative; top: 10px; left: 0; background-color: #111111; font: 9px verdana; text-transform: lowercase; text-align: center; color: white; -webkit-transition: .4s; -o-transition: .4s; -moz-transition: .4s; transition: .4s; } .peepb:hover .peepwordb { top: -60px; -webkit-transition: .4s; -o-transition: .4s; -moz-transition: .4s; transition: .4s; } .peepb:hover .peepword2b { top: -60px; -webkit-transition: .4s; -o-transition: .4s; -moz-transition: .4s; transition: .4s; } .aliasb:hover .captb { left: -400px; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; transition: 1s; } .aliasb:hover .pottb { left: 0px; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; transition: 1s; } </style></center>