пппп

Код:

<!--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'>
<link href='http://webfonts.ru/import/pacifico.css'>


<style type="text/css">
.anketa {
  width: 400px;
  padding: 15px;
  height: 400px;
  background-color: #fcfcfc;
  border: 1px solid #eee
  }

.anketa2 {
   width: 400px;
  height: 150px
  }

.ankhead {
   width: 230px;
  font-family: "Kaushan Script";
  font-size: 32px;
  text-transform: lowercase;
  line-height: 100%;
  position: relative;
  float: left;
  height: 150px;
  color: #333
  }

.ankhead2 {
   width: 150px;
  height: 115px;
  position: relative;
  float: right;
  border: 10px solid #eee;
  background-image: url(http://obwgcy3fnbxwyzbonf2a.cmle.ru/150x120)
  }

.anks {
  position: relative;
  width: 400px;
  height: 250px;
  overflow: auto
  }

.int {
  float: left
  }

.int label {
   background: #eee;
  height: 25px;
  margin-bottom: 5px;
  position: relative;
  display: block;
  line-height: 25px;
  width: 400px;
  text-align: center;
  text-transform: uppercase;
  font-family: open sans condensed;
  font-weight: 300
  }

.int [type=radio] {
  display: none
  }

.intc {
  position: absolute;
  top: 30px;
  bottom: 0;
  left: 0;
  right: 0;
  width: 457px;
  height: 275px;
  background: #eee;
  padding:20px;
  overflow: auto;
  text-align: justify;
  font-family: arial;
  font-size: 11px;
  line-height: 95%;

  border: 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
  }

.anks [type=radio]:checked ~ label {
  background: #eee;
  z-index: 2
  }

.anks [type=radio]:checked ~ label ~ .intc {
  -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
  }

.libcred a {
   font-family: orator std;
   font-size: 8px;
   color: #03435e;
   padding-right: 10px;
   padding-top:10px;
   line-height: 8px;
   letter-spacing: 1px
   }
</style>

------------------------------------------------------------------------------

Код:

<!--HTML-->
<link href='http://mzxw45dt.m5xw6z3mmvqxa2ltfzrw63i.cmle.ru/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='http://mzxw45dt.m5xw6z3mmvqxa2ltfzrw63i.cmle.ru/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
<center>
<div class="role">
<div class="role2">
<div class="rolehead">
<div style="font-family:open sans condensed; text-transform:uppercase; position:; top:40px; font-size:11px; line-height:100%; color:#333;"><hr>Дорогой гость, если ты видишь, что желаемая внешность занята, но игрок давно не активен, ты можешь обратиться с вопросом об освобождении внешности в гостевую (ссылка) или ЛС администратору (Имя)<br>Пока внешность не записана в данной теме, она считается свободной.<br><br>Не забываем убирать *<br><br>
<center>[*code]<*b>имя звезды (англ.)<*/b> - <*a href="ссылка">имя фамилия (рус.)<*/a> <*br>[*/code]
</div>
</div>
</div>
<div class="roles">

<div class="face">
<input type="radio" id="face-1" name="face-group-1" checked>
<label for="face-1">male</label>
<div class="facec">

<div style="font-size: 18px; color: #cd7dd3; text-align: center;>">A-B-C</div>
<br>
<center><a href="http://dizforum.artbb.ru/"><b>имя фамилия</b></a><br><br>
</center>
<div style="font-size: 18px; color: #cd7dd3; text-align: center;>">D-E-F</div>
<br>
<center><a href="http://dizforum.artbb.ru/"><b>имя фамилия</b></a><br><br>
</center>
<div style="font-size: 18px; color: #cd7dd3; text-align: center;>">G-H-I-J</div>
<br>
<center><a href="http://dizforum.artbb.ru/"><b>имя фамилия</b></a><br><br>
</center>
<div style="font-size: 18px; color: #cd7dd3; text-align: center;>">K-L-M</div>
<br>
<center><a href="http://dizforum.artbb.ru/"><b>имя фамилия</b></a><br><br>
</center>
<div style="font-size: 18px; color: #cd7dd3; text-align: center;>">N-O-P</div>
<br>
<center><a href="http://dizforum.artbb.ru/"><b>имя фамилия</b></a><br><br>
</center>
<div style="font-size: 18px; color: #cd7dd3; text-align: center;>">Q-R-S-T</div>
<br>
<center><a href="http://dizforum.artbb.ru/"><b>имя фамилия</b></a><br><br>
</center>
<div style="font-size: 18px; color: #cd7dd3; text-align: center;>">U-V-W</div>
<br>
<center><a href="http://dizforum.artbb.ru/"><b>имя фамилия</b></a><br><br>
</center>
<div style="font-size: 18px; color: #cd7dd3; text-align: center;>">X-Y-Z</div>
<br>
<center><a href="http://dizforum.artbb.ru/"><b>имя фамилия</b></a><br><br>
</center>

</div>
</div>

<div class="face">
<input type="radio" id="face-2" name="face-group-1">
<label for="face-2">female</label>
<div class="facec">

<div style="font-size: 18px; color: #cd7dd3; text-align: center;>">A-B-C</div>
<br>
<center><a href="http://dizforum.artbb.ru/"><b>имя фамилия</b></a><br><br>
</center>
<div style="font-size: 18px; color: #cd7dd3; text-align: center;>">D-E-F</div>
<br>
<center><a href="http://dizforum.artbb.ru/"><b>имя фамилия</b></a><br><br>
</center>
<div style="font-size: 18px; color: #cd7dd3; text-align: center;>">G-H-I-J</div>
<br>
<center><a href="http://dizforum.artbb.ru/"><b>имя фамилия</b></a><br><br>
</center>
<div style="font-size: 18px; color: #cd7dd3; text-align: center;>">K-L-M</div>
<br>
<center><a href="http://dizforum.artbb.ru/"><b>имя фамилия</b></a><br><br>
</center>
<div style="font-size: 18px; color: #cd7dd3; text-align: center;>">N-O-P</div>
<br>
<center><a href="http://dizforum.artbb.ru/"><b>имя фамилия</b></a><br><br>
</center>
<div style="font-size: 18px; color: #cd7dd3; text-align: center;>">Q-R-S-T</div>
<br>
<center><a href="http://dizforum.artbb.ru/"><b>имя фамилия</b></a><br><br>
</center>
<div style="font-size: 18px; color: #cd7dd3; text-align: center;>">U-V-W</div>
<br>
<center><a href="http://dizforum.artbb.ru/"><b>имя фамилия</b></a><br><br>
</center>
<div style="font-size: 18px; color: #cd7dd3; text-align: center;>">X-Y-Z</div>
<br>
<center><a href="http://dizforum.artbb.ru/"><b>имя фамилия</b></a><br><br>
</center>

</div>
</div>

</div></div>

<style type="text/css">
.role {
  width: 400px;
  padding: 15px;
  height: 400px;
  background-color: #fcfcfc;
  border: 1px solid #eee
  }

.role2 {
  width: 400px;
  height: 150px
  }

.rolehead {
  width: 400px;
  font-family: "Kaushan Script";
  font-size: 32px;
  text-transform: lowercase;
  line-height: 100%;
  position: relative;
  float: absolute;
  text-align: justify;
  height: 150px;
  color: #333
  }

.roles {
  position: relative;
  width: 400px;
  height: 250px;
  overflow: hidden
  }

.face {
  float: left
  }

.face label {
  background: #eee;
  height: 25px;
  margin-bottom: 5px;
  position: relative;
  display: block;
  line-height: 25px;
  width: 200px;
  text-align: center;
  text-transform: uppercase;
  font-family: open sans condensed;
  font-weight: 300
  }

.face [type=radio] {
  display: none
  }

.facec {
  position: absolute;
  top: 30px;
  bottom: 0;
  left: 0;
  right: 0;
  width: 348px;
  height: 178px;
  background: white;
  padding:20px;
  overflow: auto;
  text-align: justify;
  font-family: "Kaushan Script";
  font-size: 12px;
  line-height: 95%;

  border: 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
  }

.roles [type=radio]:checked ~ label {
  background: #cad7a1;
  z-index: 2
  }

.roles [type=radio]:checked ~ label ~ .facec {
  -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
  }

.person a {
   font-family: orator std;
   font-size: 12px;
   color: #03435e;
   padding-right: 10px;
   padding-top:10px;
   line-height: 8px;
   letter-spacing: 1px
   }
</style>

"and Action!" behind the scenes ...

Меню навигации

Пользовательские ссылки

Информация о пользователе

пппп

Сообщений 1 страница 1 из 1

Поделиться12016-08-27 23:43:30