Код:
<!--HTML-->
<style type="text/css">
#whee {
border-radius: 25%;
margin: 0px auto;
width: 155px;
height: 155px;
background-color: #eaeaea;
position: relative;
overflow: hidden;
padding: 20px;
text-align: center;
box-shadow: 2px 2px 0px #c1d05c;
}
#whee b1 {
text-align: center;
font: 30px Yesteryear;
color: #5f681c;
text-shadow: 1px 1px 0px #f7f7f7;
text-align: center;
}
.wheetext {
margin: -10px -10px 5px -10px;
height: 130px;
width: auto;
padding: 0px 5px 0px 5px;
overflow-y: auto;
font-size: 10px;
line-height: 110%;
text-align: justify;
}
.whee2 {
width: 150px;
height: 150px;
background-color: #fff;
border-radius: 25%;
position: absolute;
left: 22px;
top: 22px;
transition: all 1s ease-in-out 0s;
-webkit-transition: all 1s ease-in-out 0s;
-moz-transition: all 1s ease-in-out 0s;
-o-transition: all 1s ease-in-out 0s;
}
#whee:hover .whee2 {
left: 360px;
}
.whee3 {
width: 100px;
height: 200px;
background: #c1d05c; background: -moz-linear-gradient(bottom, #aabb36 20%, #c1d05c 100%); background: -webkit-linear-gradient(bottom, #aabb36 20%, #c1d05c 100%); background: -o-linear-gradient(bottom, #aabb36 20%, #c1d05c 100%); background: -ms-linear-gradient(bottom, #aabb36 20%, #c1d05c 100%); background: linear-gradient(bottom, #aabb36 20%, #c1d05c 100%);
position: absolute;
top: 0px;
left: 0px;
transition: all 1s ease-in-out 0s;
-webkit-transition: all 1s ease-in-out 0s;
-moz-transition: all 1s ease-in-out 0s;
-o-transition: all 1s ease-in-out 0s;
}
.whee4 {
width: 100px;
height: 200px;
background: #c1d05c; background: -moz-linear-gradient(bottom, #aabb36 20%, #c1d05c 100%); background: -webkit-linear-gradient(bottom, #aabb36 20%, #c1d05c 100%); background: -o-linear-gradient(bottom, #aabb36 20%, #c1d05c 100%); background: -ms-linear-gradient(bottom, #aabb36 20%, #c1d05c 100%); background: linear-gradient(bottom, #aabb36 20%, #c1d05c 100%);
position: absolute;
top: 0px;
left: 100px;
transition: all 1s ease-in-out 0s;
-webkit-transition: all 1s ease-in-out 0s;
-moz-transition: all 1s ease-in-out 0s;
-o-transition: all 1s ease-in-out 0s;
}
#whee:hover .whee3 {
left: -200px;
transition: all 1s ease-in-out 0s;
-webkit-transition: all 1s ease-in-out 0s;
-moz-transition: all 1s ease-in-out 0s;
-o-transition: all 1s ease-in-out 0s;;
}
#whee:hover .whee4 {
left: 435px;
transition: all 1s ease-in-out 0s;
-webkit-transition: all 1s ease-in-out 0s;
-moz-transition: all 1s ease-in-out 0s;
-o-transition: all 1s ease-in-out 0s;
}
.whee21 {
width: 150px;
height: 150px;
background-color: #fff;
border-radius: 25%;
position: absolute;
left: 22px;
top: 22px;
}
.whee31 {
width: 100px;
height: 200px;
background: #c1d05c; background: -moz-linear-gradient(bottom, #aabb36 20%, #c1d05c 100%); background: -webkit-linear-gradient(bottom, #aabb36 20%, #c1d05c 100%); background: -o-linear-gradient(bottom, #aabb36 20%, #c1d05c 100%); background: -ms-linear-gradient(bottom, #aabb36 20%, #c1d05c 100%); background: linear-gradient(bottom, #aabb36 20%, #c1d05c 100%);
position: absolute;
top: 0px;
left: 0px;
transition: all 1s ease-in-out 0s;
-webkit-transition: all 1s ease-in-out 0s;
-moz-transition: all 1s ease-in-out 0s;
-o-transition: all 1s ease-in-out 0s;
}
.whee41 {
width: 100px;
height: 200px;
background: #c1d05c; background: -moz-linear-gradient(bottom, #aabb36 20%, #c1d05c 100%); background: -webkit-linear-gradient(bottom, #aabb36 20%, #c1d05c 100%); background: -o-linear-gradient(bottom, #aabb36 20%, #c1d05c 100%); background: -ms-linear-gradient(bottom, #aabb36 20%, #c1d05c 100%); background: linear-gradient(bottom, #aabb36 20%, #c1d05c 100%);
position: absolute;
top: 0px;
left: 100px;
transition: all 1s ease-in-out 0s;
-webkit-transition: all 1s ease-in-out 0s;
-moz-transition: all 1s ease-in-out 0s;
-o-transition: all 1s ease-in-out 0s;
}
</style>
<center>
<table><tr>
<td>
<div id="whee"><div class="whee3"></div><div class="whee4"></div><div class="whee2" div style="background-image: url(http://savepic.net/6431859m.png);"></div>
<b1><div style="margin-top: -15px;">Robin</div></b1>
<div class="wheetext"><div style="text-align: center; border-bottom: 1px dotted #8b8171; margin-bottom: 3px; padding-bottom: 3px;">"Горячая Линия" Хартман</div>
Любит домашний уют и похвалы в свой адрес. Поттероман. Обитает на форуме почти круглосуточно, и неизвестно, когда успевает делать все остальное. Отвечает за облик форума, графику и коды, стоит на страже гостевой и просто отвечает на вопросы игроков.
</div>
<div style="font-size: 10px">640746942</div>
</div>
</td>
<td>
<div id="whee"><div class="whee3"></div><div class="whee4"></div><div class="whee2" div style="background-image: url(http://se.uploads.ru/pqBs4.png);"></div>
<b1><div style="margin-top: -15px;"> Ted </div></b1>
<div class="wheetext"><div style="text-align: center; border-bottom: 1px dotted #8b8171; margin-bottom: 3px; padding-bottom: 3px;"><center>"Папаша" Гордон</div>
Любит послушных и воспитанных деток, отвечает за сюжет и готов помочь новичкам найти себе в нем место. Организатор увеселений на форуме. Любитель развиртуализации, с легкостью выманивается в реал на домашнюю еду и выпивку.
</div>
<div style="font-size: 10px">polite-with-a-gun</div>
</div>
</td>
</tr></table>
</center>
