Код:
<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
<center>
<div class="corion">
<div class="corion2">
<div class="orionhead"><div style="position:relative; top:39px;">welcome, guys</div>
<div style="font-family:open sans condensed; text-transform:uppercase; position:relative; top:40px; font-size:10px; line-height:100%; color:#000000;"> ♬ <b>Years & Years</b> – Breathe<br>
<i>What's that supposed to be about, baby?<br>
Girl, free up you vibe and stop acting crazy.</i>
</div>
</div>
<a href=""><div class="orionhead2"></div></a>
</div>
<div class="orions">
<div class="orion">
<input type="radio" id="orion-1" name="orion-group-1" checked>
<label for="orion-1">about</label>
<div class="orionc">
Добро пожаловать на пробник, посвященный реальной жизни в городе. Вы можете сказать что-то типа "Очередной пробник, сколько можно?", и мы не будем вас за это судить по одной простой причине: пробников по реальной жизни действительно много. И не каждый из них приходит к долгожданному концу. Вы вполне можете закрыть вкладку и пойти своей дорогой. А можете присоединиться к нам и стать маленькой, но важной частью большого мира. Мы находимся в поиске активных игроков и активных помощников. Все, что от вас требуется - это заполнить шаблон придерживания, чтобы забить любимую мордашку (при условии регистрации профиля, естественно). А если вы жаждете присоединиться к нашему коллективу, ваша задача немного усложняется: кроме шаблона придерживания, вам необходимо рассказать о себе, о том, что вы любите и умеете делать, а так же приложить свои работы. Мы будем рады абсолютно всем. Пощелкав следующие окошки, вы можете увидеть придержанные внешности, как женские, так и мужские. В последнем же окне вы увидите придержанные имена. По всем вопросам обращайтесь в гостевую или прямиком в ЛС администрации, мы всегда готовы вас выслушать.
</div>
</div>
<div class="orion">
<input type="radio" id="orion-2" name="orion-group-1">
<label for="orion-2">female</label>
<div class="orionc">
<center><br><b>A - B - C - D</b><br>
AJA NAOMI KING - <a href="https://bodyonme.rusff.me/profile.php?id=19">малина</a><br>
AMBER HEARD - <a href="https://bodyonme.rusff.me/profile.php?id=14">МОКРАЯ ДЕВОЧКА</a><br>
ASHLEY BENSON- <a href="https://bodyonme.rusff.me/profile.php?id=24">сметанка</a><br>
<br><b>E - F - G - H</b><br>
EMILIA CLARKE - <a href="https://bodyonme.rusff.me/profile.php?id=22">вдох выдох</a><br>
HOLLAND RODEN - <a href="https://bodyonme.rusff.me/profile.php?id=5">scarlet witch</a><br>
<br><b>I - J - K - L</b><br>
JENNA DEWAN- <a href="https://bodyonme.rusff.me/profile.php?id=20">ветер</a><br>
KAT GRAHAM - <a href="https://bodyonme.rusff.me/profile.php?id=9">гондор</a><br>
LILY COLLINS - <a href="https://bodyonme.rusff.me/profile.php?id=15">until dawn</a><br>
LYDIA GRAHAM - <a href="https://bodyonme.rusff.me/profile.php?id=17">чокопай</a><br>
<br><b>M - N - O - P</b><br>
NINA DOBREV - <a href="https://bodyonme.rusff.me/profile.php?id=3">vodkina</a><br>
PHOEBE TONKIN - <a href="https://bodyonme.rusff.me/profile.php?id=2">desire</a><br>
<br><b>Q - R - S - T</b><br>
SELENA GOMEZ - <a href="https://bodyonme.rusff.me/profile.php?id=8">НИКИТА</a><br>
SHELLEY HENNIG - <a href="https://bodyonme.rusff.me/profile.php?id=23">DESERT WOLF</a><br>
TAYLOR SWIFT - <a href="https://bodyonme.rusff.me/profile.php?id=11">хрум-хрум</a><br>
<br><b>U - V - W - X</b><br>
<br><b>Y - Z</b><br>
ZOE KRAVITZ - <a href=https://bodyonme.rusff.me/profile.php?id=18>Geny</a><br></center>
</div>
</div>
<div class="orion">
<input type="radio" id="orion-3" name="orion-group-1">
<label for="orion-3">male</label>
<div class="orionc">
<center><br><b>A - B - C - D</b><br>
CHARLIE HUNNAM - <a href="https://bodyonme.rusff.me/profile.php?id=7">форс мажор</a><br>
DYLAN O'BRIEN - <a href="https://bodyonme.rusff.me/profile.php?id=13">кусь-меня</a><br>
<br><b>E - F - G - H</b><br>
<br><b>I - J - K - L</b><br>
IAN SOMERHALDER- <a href="https://bodyonme.rusff.me/profile.php?id=10">окей</a><br>
JAI COURTNEY- <a href="https://bodyonme.rusff.me/profile.php?id=12">БОРОДАЧ</a><br>
JACK FALAHEE - <a href="https://bodyonme.rusff.me/profile.php?id=16">джек воробей</a>*<br>
<br><b>M - N - O - P</b><br>
<br><b>Q - R - S - T</b><br>
<br><b>U - V - W - X</b><br>
<br><b>Y - Z</b><br></center>
</div>
</div>
<div class="orion">
<input type="radio" id="orion-4" name="orion-group-1">
<label for="orion-4">names</label>
<div class="orionc">
BELLAMY "BEA" SYKES - <a href="https://bodyonme.rusff.me/profile.php?id=15">until dawn</a><br>
CODY JACKSON - <a href="https://bodyonme.rusff.me/profile.php?id=8">НИКИТА</a><br>
JOHN HAMILTON - <a href="https://bodyonme.rusff.me/profile.php?id=7">форс мажор</a><br>
NELLY 'NELL' AVERY - <a href="https://bodyonme.rusff.me/profile.php?id=9">гондор</a><br>
RICHARD HAMILTON -<a href="https://bodyonme.rusff.me/profile.php?id=12">БОРОДАЧ</a><br>
TREVOR DAVIS - <a href="https://bodyonme.rusff.me/profile.php?id=13">кусь-меня</a><br>
</div>
</div>
</div></div>
</center>
<style type="text/css">
.corion {
width: 600px;
padding: 15px;
height: 400px;
background-color: #fcfcfc;
border: 1px solid #eee
}
.corion2 {
width: 600px;
height: 150px
}
.orionhead {
width: 230px;
font-family: "Kaushan Script";
font-size: 32px;
text-transform: lowercase;
line-height: 100%;
position: relative;
float: left;
height: 150px;
color: #cf6ff3
}
.orionhead2 {
width: 300px;
height: 115px;
position: relative;
float: right;
border: 10px solid #eee;
background-image: url(http://savepic.ru/7880750.gif);
background-size:auto 120px;
-webkit-background-size: auto 120px;
background-position: center center;
-webkit-background-position:center center;
}
.orions {
position: relative;
width: 600px;
height: 250px;
overflow: hidden
}
.orion {
float: left
}
.orion label {
background: #eee;
height: 25px;
margin-bottom: 5px;
position: relative;
display: block;
line-height: 25px;
width: 100px;
text-align: center;
text-transform: uppercase;
font-family: open sans condensed;
font-weight: 300
}
.orion [type=radio] {
display: none
}
.orionc {
position: absolute;
top: 30px;
bottom: 0;
left: 5px;
right: 0;
width: 348px;
height: 158px;
background: white;
border-bottom:20px solid white;
padding:20px;
overflow: auto;
text-align: justify;
font-family: arial;
font-size: 9.5px;
line-height: 95%;
outline: 1px solid #eee;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
transition-duration: 0.8s
}
.orions [type=radio]:checked ~ label {
background: white;
z-index: 2
}
.orions [type=radio]:checked ~ label ~ .orionc {
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
z-index: 5
}
</style>Код:
ВНЕШНОСТЬ НА АНГЛ. КАПСОМ - <a href="ссылка на профиль">ваш ник</a><br>
Код:
ИМЯ НА АНГЛ. КАПСОМ - <a href="ссылка на профиль">ваш ник</a><br>
