Код:
<!--HTML--><style type="text/css">
.appyts {position: absolute; top: 0; right: 0; width: 350px; height: 300px; clear: both; background: #f3ebe1;}
.appyt {float: left;}
.appyt label {position: absolute; bottom: 20px; left: -180px; width: 25px; height: 25px; background: white; box-shadow: 2px 2px 0 #d8d8d8; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-transition: 0.8s all ease-in-out; -moz-transition: 0.8s all ease-in-out; transition: 0.8s all ease-in-out;}
.appyt [type=radio] {display: none; baseline-tab-shift: true, retrieve;}
.appyc {position: absolute; top: 0; left: 0; width: 290px; height: 240px; padding: 30px; overflow: auto; text-align: justify; font: 12px/12px calibri;; opacity: 0; -webkit-transition: 0.8s all ease-in-out; -moz-transition: 0.8s all ease-in-out; transition: 0.8s all ease-in-out;}
.appyc::-webkit-scrollbar {width: 11px;}
.appyc::-webkit-scrollbar-thumb {background: #423401;}
[type=radio]:checked ~ label {z-index: 2; background: #ffe2a8; box-shadow: 10px 10px 0 #703e3b;}
[type=radio]:checked ~ label ~ .appyc {z-index: 1; opacity: 1;}
.appyin {width: 260px; padding: 10px; background: #ad6865; color: white; border-bottom: 5px solid #fff8dc; text-align: center; font: 11px/11px calibri; text-transform: uppercase; margin-bottom: 5px;}
</style><center><div style="width: 510px; padding: 20px; background: #703e3b; color: white; border-bottom: 15px solid #fff3db; border-top: 1px dashed #d8d8d8; font: bold 40px/40px arial; text-transform: uppercase; letter-spacing: -1px; text-shadow: 4px 0 0 #d8d8d8;">
name
</div><div style="width: 550px; height: 300px; position: relative; border-bottom: 15px solid #fff3db;"><div style="width: 200px; height: 300px; position: absolute; top: 0; left: 0;">
<img src="http://funkyimg.com/i/23HwA.png" />
</div><div class="appyts"><div class="appyt"><input type="radio" id="tab-1" name="tab-group-1" checked><label for="tab-1"></label><div class="appyc">
<div class="appyin"> имя персонажа </div>
<div class="appyin"> возраст </div>
<div class="appyin"> ориентация </div>
<div class="appyin"> профессия </div>
<div class="appyin"> семейное положение </div>
<div class="appyin"> имя знаменитости </div>
</div></div><div class="appyt"><input type="radio" id="tab-2" name="tab-group-1"><label for="tab-2" style="margin-left: 45px;"></label><div class="appyc">
История, написанная от руки. (биография)
</div></div><div class="appyt"><input type="radio" id="tab-3" name="tab-group-1"><label for="tab-3" style="margin-left: 90px;"></label><div class="appyc">
Каждый видит тебя по-своему, но кто же ты на самом деле. (Характер)
</div></div><div class="appyt"><input type="radio" id="tab-4" name="tab-group-1"><label for="tab-4" style="margin-left: 135px;"></label><div class="appyc">
<div class="appyin"> частота посещений </div>
<div class="appyin"> связь с игроком </div>
<div class="appyin"> откуда узнали о нас </div>
<b>Попробуй и влюбись. (пробный пост)</b>
</div></div></div></div></a></center>Перед тем, как отправить анкету, не забудь вставить ее в код и убрать * в начале текста.
Так же, если тебе понадобится:выделить жирным используй <b></b>
наклонный текст используй <i></i>
подчеркнутый текст используй <u></u>зачеркнутый текстиспользуй <s></s>
Код:
<*!--HTML--><style type="text/css">
.appyts {position: absolute; top: 0; right: 0; width: 350px; height: 300px; clear: both; background: #f3ebe1;}
.appyt {float: left;}
.appyt label {position: absolute; bottom: 20px; left: -180px; width: 25px; height: 25px; background: white; box-shadow: 2px 2px 0 #d8d8d8; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-transition: 0.8s all ease-in-out; -moz-transition: 0.8s all ease-in-out; transition: 0.8s all ease-in-out;}
.appyt [type=radio] {display: none; baseline-tab-shift: true, retrieve;}
.appyc {position: absolute; top: 0; left: 0; width: 290px; height: 240px; padding: 30px; overflow: auto; text-align: justify; font: 12px/12px calibri;; opacity: 0; -webkit-transition: 0.8s all ease-in-out; -moz-transition: 0.8s all ease-in-out; transition: 0.8s all ease-in-out;}
.appyc::-webkit-scrollbar {width: 11px;}
.appyc::-webkit-scrollbar-thumb {background: #423401;}
[type=radio]:checked ~ label {z-index: 2; background: #ffe2a8; box-shadow: 10px 10px 0 #703e3b;}
[type=radio]:checked ~ label ~ .appyc {z-index: 1; opacity: 1;}
.appyin {width: 260px; padding: 10px; background: #ad6865; color: white; border-bottom: 5px solid #fff8dc; text-align: center; font: 11px/11px calibri; text-transform: uppercase; margin-bottom: 5px;}
</style><center><div style="width: 510px; padding: 20px; background: #703e3b; color: white; border-bottom: 15px solid #fff3db; border-top: 1px dashed #d8d8d8; font: bold 40px/40px arial; text-transform: uppercase; letter-spacing: -1px; text-shadow: 4px 0 0 #d8d8d8;">
name
</div><div style="width: 550px; height: 300px; position: relative; border-bottom: 15px solid #fff3db;"><div style="width: 200px; height: 300px; position: absolute; top: 0; left: 0;">
<img src="http://funkyimg.com/i/23HwA.png" />
</div><div class="appyts"><div class="appyt"><input type="radio" id="tab-1" name="tab-group-1" checked><label for="tab-1"></label><div class="appyc">
<div class="appyin"> имя персонажа </div>
<div class="appyin"> возраст </div>
<div class="appyin"> ориентация </div>
<div class="appyin"> профессия </div>
<div class="appyin"> семейное положение </div>
<div class="appyin"> имя знаменитости </div>
</div></div><div class="appyt"><input type="radio" id="tab-2" name="tab-group-1"><label for="tab-2" style="margin-left: 45px;"></label><div class="appyc">
История, написанная от руки. (биография)
</div></div><div class="appyt"><input type="radio" id="tab-3" name="tab-group-1"><label for="tab-3" style="margin-left: 90px;"></label><div class="appyc">
Каждый видит тебя по-своему, но кто же ты на самом деле. (Характер)
</div></div><div class="appyt"><input type="radio" id="tab-4" name="tab-group-1"><label for="tab-4" style="margin-left: 135px;"></label><div class="appyc">
<div class="appyin"> частота посещений </div>
<div class="appyin"> связь с игроком </div>
<div class="appyin"> откуда узнали о нас </div>
<b>Попробуй и влюбись. (пробный пост)</b>
</div></div></div></div></a></center>
