<link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Comfortaa&subset=latin,cyrillic-ext,cyrillic' rel='stylesheet' type='text/css'>
<style>
   html { overflow-y: hidden; }
#appa {margin-top:40px;width:400px;height:500px;background:#fff;border:20px solid #b79b7f;padding:0;position:relative;overflow:hidden;box-shadow:0 0 5px #111;}
#appa ::-webkit-scrollbar {
  width: 5px;
}
#appa ::-webkit-scrollbar-track {
  background:#614437;
}
#appa ::-webkit-scrollbar-thumb {
  background:#25160f;
}
.appb {width:400px;height:500px;position:absolute;top:0px;left:0px;}
.appc {box-sizing:border-box;width:400px;background:#614437;position:absolute;padding:15px 10px;color:#fff;font:400 25pt/28px 'Kaushan Script', impact;bottom:10px;right:0px;}
.appb, .appc, #appa:hover .appb, #appa:hover .appc {-webkit-transition:all ease 0.4s;-moz-transition:all ease 0.4s;-o-transition:all ease 0.4s;transition:all ease 0.4s;}
#appa:hover .appb {left:-400px;}
#appa:hover .appc {right:-400px;}
.appd {box-sizing:border-box;width:400px;height:500px;background:#cfbdab;position:absolute;top:0px;left:0px;padding:0;}
.appd .appinfo {display:inline-block;width:243px;padding:0;margin-right:-3px;}
.appe {padding-top:7px;position:absolute;width:100%;height:100%;top:0;left:-100%;background:#614437;font-family: 'Comfortaa', cursive;}
.appmini {display:inline;float:right;margin:0;}
.appf {box-sizing:border-box;width:auto;height:300px;margin:5px 0 0;border-bottom:15px solid #614437;border-top:15px solid #614437;overflow:auto;padding:10px 10px 20px;}
.appf h1,.appf h2 {margin:0 auto;padding:10px 10px 5px;border-bottom:2px solid #25160f;font-family: 'Lobster', cursive;font-size: 16px;color:#614437;text-align:left;letter-spacing:2px;}
.appf h2 {text-align:right;}
.appf .blurb {margin:0 auto;padding:10px 25px 5px;font-family: 'Comfortaa', cursive;font-size: 14px;color:#25160f;text-align:justify;}
.scredit {margin:5px;text-align:center;letter-spacing:2px;font-family:'arial narrow';font-size:7pt;line-height:9px;text-transform:lowercase; -webkit-transition:0.6s all ease-in-out;transition:0.6s all ease-in-out;}
.scredit, .scredit a {color:#999; text-decoration:none;text-shadow:0 0 0 rgba(97,68,55,255); -webkit-transition:0.6s all ease-in-out;transition:0.6s all ease-in-out;}
.scredit a:hover{text-shadow:0 0 10px rgba(97,68,55,255);color:rgba(97,68,55,255);letter-spacing:10px;visibility: hidden;}
p1 {font-family: 'Comfortaa', cursive;font-size: 12px;color:#25160f;text-align:justify;}
p2 {font-family: 'Comfortaa', cursive;font-size: 10px;color:#25160f;text-align:justify;}
</style>
<center>
<div id=appa>
<div class=appd>
<div class=appinfo>
<table><tbody><tr>
    <td><p1><b>Фамилия + Имя (на кириллице)</b></p1></td>
   </tr>
   <tr>
    <td><p2>Пол (мужской или женский)</p2></td>
   </tr>
   <tr>
    <td><p2>Возраст (+ дата рождения)</p2></td>
   </tr>
<tr>
    <td><p2>Национальность</p2></td>
   </tr>
<tr>
<td><p2>Ориентация (гетеро/гомо/би/пан/асек)</p2></td>
   </tr>
  <tr>
<td><p2>Класс (номер+буква)</p2></td>
   </tr>
<tr>
<td><p2>Название фэндома внешности на латинице — персонаж из фэндома</p2></td></tr></tbody></table></div>
 <div class=appmini><img src="http://placehold.it/150x150" /></div>
<div class=appf><h1>Biography</h1>
<div class=blurb>

Сюда следует вписать биографию персонажа. Пожалуйста, постарайтесь избежать всяких логических ошибок - Администрация четко следит за соблюдением этого, посему не удивляйтесь, что Вам будут заданы определенные вопросы для прояснения ситуации. 
Биография должна быть более, чем пятнадцать форумных строк. Но не забывайте, что размер - не главное! Лучше напишите меньше, но качественнее, чем расписывайте полотно, не особо вникая в логическую связь между событиями.

</div>
<h2>Appearance</h2>
<div class=blurb>

Этот блок оставлен специально для описания внешности Вашего персонажа. Помимо картинки, которую Вы разместили в шапке анкеты, Вы должны также написать от пяти форумных строк, дабы более подробно описать внешний вид героя.

</div>
<h1>Nature</h1>
<div class=blurb>

Здесь надо написать о характере персонажа. Общий текст должен быть не менее десяти форумных строк; количество строк для заполнения маркированного списка - на Ваше усмотрение.<br>
★ Выдающиеся качества: <br>
★ Увлечения: <br>
★ Страхи:<br>

<p>
</div>

<h2>Other</h2>
<div class=blurb>

★ Опыт игры, основное количество строк, частота появления на форуме <br>
★ Связь с Вами <br>
★ Откуда Вы узнали о ролевой? <br>

</div>
</div>
</div>
<div class=appb><img src="http://placehold.it/400x500" /></div>
<div class=appc>
Name & Surname

</div>
</div>
</center>