<!--HTML-->
<link href="https://fonts.googleapis.com/css?family=Bad+Script" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre" rel="stylesheet">

<style>
.soulcontainer { width: 500px; height: 475px; background-color: #af997b; position: relative; } 
.soultitle { width: 500px; height: 40px; background-color: #785c37; font-family: Frank Ruhl Libre; font-size: 28px; }
.soulquote { width: 500px;  font-family: Bad Script; font-size: 18px; } 
.soulquote1 { width: 400px; height: 1px; background-color: #785c37; padding: 1px 1px 1px 1px; background-position: top center; } 
.soulblock { width: 175px; height: 170px; background-color: #785c37; }
.soulblock2 { width: 265px; height: 170px; background-color: #785c37; }
.soulinfo { font-family: Bentham; font-size: 12px; }
.soulinfo2 { font-family: Bad Scrip; font-size: 12px; text-align: left; margin-left: 10px; }
.soulinfo3 { font-family: Bad Scrip; font-size: 12px; }

.korpus > div, .korpus > input { display: none; }

.korpus label { 
cursor: pointer; 
display: inline-block;
padding: 5px 20px;
bottom: 1px; 
background-image: url(http://funkyimg.com/i/2nZ5T.png);  
line-height: 28px; }
.korpus input[type="radio"]:checked + label { background-image: url(http://funkyimg.com/i/2nZ5S.png); }

.korpus > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.korpus > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.korpus > input:nth-of-type(3):checked ~ div:nth-of-type(3) { display: block; }
</style>

<center>

<div class="soulcontainer"><div class="korpus">
<input type="radio" name="odin" checked="checked" id="vkl1"/>
<label for="vkl1"></label>
<input type="radio" name="odin" id="vkl2"/>
<label for="vkl2"></label>
<div class="soultitle">
NAME SURNAME
<div class="soulcontainerimg" style="background: url(''); margin-top: 15px;"> 
<img src="http://funkyimg.com/i/2nYvE.png" width: 120px; height: 120px;>
<img src="http://funkyimg.com/i/2nYvE.png"width: 120px; height: 120px;>
<img src="http://funkyimg.com/i/2nYvE.png"width: 120px; height: 120px;>
<div class="soulquote">
ваша очень красивая цитата
<div class="soulquote1" style="margin-top: 15px;">
<div class="soulblock" style="margin-top: 15px; margin-left: -270px;" >
<div class="soulinfo2" style="margin-top: 15px;" >
<br><b>Имя:</b>
<br><b>Дата рождения:</b>
<br><b>Возраст:</b>
<br><b>Ориентация:</b>
<br><b>Профессия:</b>
<br><b>Каста:</b>
<br><b>Лояльность:</b>
</div>
<div class="soulblock2" style="margin-top: -135px; margin-right: -455px;" >
<div class="soulinfo2" style="margin-top: 15px;" >
<br>кратко о персонаже: 
<br>текст текст текст текст текст текст текст
</div>
</div></div>
<div class="soulinfo" style="margin-top: 15px;" >
комфортный размер поста: ок // вмешательство гм: (не) согласен // связь: аська/вк/скайп
</div>
</div></div></div></div>
<div style="font-size: 13px; text-align: justify; padding: 7px 7px 7px 7px;">
<center><br><b>Описание персонажа</b>
<br>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </center>
</div>
</div>

</center>