<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lekton' rel='stylesheet' type='text/css'>
<style type="text/css">
#container{width:380px;height:450px;background-color:#f6f6f6;border:1px solid #eee;margin:0 auto;}
#one{position:absolute;margin:16px;overflow:hidden;width:340px;height:410px;background-color:#000;background-image:url(http://funkyimg.com/i/QKHM.png);border:3px solid #fff;}
#two{width:90%;height:90%;position:absolute;top:5%;background-color:#5D4157;border:1px solid #fff;left:5%;transition:.5s all ease;opacity:0;}
#one:hover #two{transition:.5s all ease;opacity:1;}
#tri{position:absolute;bottom:0px;right:0px;width:0; height:0; border-top: 240px solid transparent;border-bottom: 0px solid transparent; border-right:240px solid #fff; z-index:99;}
#txt{background-color:#eee;margin:20px;height:145px;border:3px solid #fff;}
.banner{width:300px;right:-400px;position:absolute;transition:.3s all ease;background-color:#c3c1ce;color:#fff;line-height:20px;padding-left:40px;font-family:courier new;text-transform:uppercase;font-size:7.5pt;text-align:left;}
#one:hover .banner{right:0px;}
#initial{transition:1s all ease;width:120px;line-height:140px;padding-right:20px;;color:#5D4157;font-size:90pt;font-style:italic;text-shadow:-2px 2px 0 #fff;font-family:oswald;text-align:center;border-radius:100px;border:2px solid #fff;background-image:url(http://www.shizoo-design.de/stuff/patterns/405.jpg);position:absolute;z-index:999;right:20px;bottom:20px;}
#gif{width:140px;height:140px;border-radius:100px;border:2px solid #fff;position:absolute;z-index:900;right:20px;bottom:20px;background-image:url(https://forumavatars.ru/img/avatars/0014/ac/6d/2-1413979814.gif); background-position:center; }
#name{position:absolute;z-index:1000;display:block;color:#5D4157;font-family:courier new;font-size:10px;letter-spacing:1px;background-color:#fff;top:35px;left:110px;padding:10px;width:160px;text-align:left;}
#one:hover #initial{bottom:239px;right:190px;}
#one:hover #b1{transition-delay:.2s;bottom:50px;}
#one:hover #b2{transition-delay:.35s;bottom:75px;}
#one:hover #b3{transition-delay:.5s;bottom:100px;}
#one:hover #b4{transition-delay:.65s;bottom:125px;}
#b1{transition-delay:0s;bottom:50px;}
#b2{transition-delay:0s;bottom:80px;}
#b3{transition-delay:0s;bottom:105px;}
#b4{transition-delay:0s;bottom:130px;}
.txt2{font-family:lekton, sans serif;width:135px;font-size:8pt;background-color:#eee;text-transform:lowercase;color:#838689;height:80px;overflow:auto;text-align:justify;position:absolute;top:-102px;left:85px;line-height:10pt;}
.txt2 b{color:#5D4157;letter-spacing:1px;}
.tabby{position: relative; min-height: 200px; clear: both;margin-top:160px;margin-left:25px;}
.tab{float: left;}
.tab label {padding: 10px; position: relative; color:#75566e;font-family:courier new;font-size:24pt; z-index:500;text-transform:lowercase;}
.tab [type=radio] { display: none;}
[type=radio]:checked ~ label {z-index: 2;color:#CAD7B2 !important;background-color:transparent !important;}
[type=radio]:checked ~ label ~ .txt2 {z-index: 1;}
</style>
<center>
<div id="container">
<div id="one">
<div id="tri"></div><div id="gif"></div><div id="initial">E</div>
<div id="two"><div id="name">YRE PALAHNIUK</div><div id="txt">

<div class="tabby">

<div class="tab">

<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">i</label>

<div class="txt2">
<b>Эйр Паланик.</b> Администратор-универсал, любящая своих орлят мать-орлица. Обращаться можно по любым вопросам и всегда. Ответит, расскажет, покажет и поможет, конфетку даст и спать уложит.<br><br>
</div>
</div>
</div></div>
<div class="banner" id="b1">скайп</div>
<div class="banner" id="b2">аська</div>
<div class="banner" id="b3">мать всея форума</div>
<div class="banner" id="b4" style="background-color:#bcbac7;font-style:italic;">администратор-универсал</div>
</div></div></center>