Код:
<!--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>