Код:
<!--HTML-->
<style>.dossier-info{
display:inline-block;
float:left;
width: 400px;
overflow:hidden;
height: 451px;
background: url("http://funkyimg.com/i/XwoZ.png") no-repeat center top;
text-align:center;
}
#photo img{
height: 451px;
}
#photo{
display:inline-block;
float:left;
width: 230px;
overflow:hidden;
height: 451px;
text-align:center; margin-left: auto;
font-size: 0;
}
.dossier{
width: 630px;
height: 451px;
}
.dossier-info h1, .dossier-info h3 {
font-family:"DIN1451", "Open Sans",Helvetica,Arial,sans-serif;
color: #008368 !important;
text-transform: uppercase;
padding: 0px!important;
}
.dossier-info h1{
font-size: 3.6em;
letter-spacing: 0.3em;
margin-top: 0.5em;
line-height: 1;
}
.dossier-info h3{
font-size: 1.7em;
letter-spacing: 0.2em;
margin-top: 0.7em;
}
.dossier-info h4{
color: #04ad8a!important;
font-family: Century Gothic;
font-size: 1em;
letter-spacing: 0.1em;
margin-top: -0.4em;
}
.favinfo{
float:left;
display:inline-block;
width:130px;
text-align:center;
}
.labels{
color:#036590!important;
font-family: "Helvetica Neue", "Century Gothic";
text-transform: uppercase;
text-align:center;
font-weight: 500;
font-size: 0.8em;
}
.dossier-favs-labels{
margin: 2em 0 0 0;
}
.values {
font-size: 1.1em;
}
.life-goal{
font-family: "Century Gothic", "Helvetica Neue","Open Sans", Helvetica, Arial, sans-serif;
font-size: 1.14em;
color: black!important;
margin: 2.8em 2em 0 2em !important;
text-align: justify;
}
</style>
<div class="dossier-header">
<div id="photo" style="background: url(https://pp.vk.me/c625526/v625526004/1c799/1oQTi1i1bYs.jpg) no-repeat center top; background-size: cover;">
</div>
<div class="dossier-info">
<h1>EVE NARNIA WATERGATE</h1>
<h4>(Ив Нания Уотергейт)</h4>
<h3>staff, Creation Labs</h3>
<h4>лаборант</h4>
<div style="margin-left: 5px;">
<div class="dossier-favs-labels">
<div class="favinfo labels">внешность<br>персонажа</div>
<div class="favinfo labels">любимый<br>аттракцион</div>
<div class="favinfo labels">любимый<br>динозавр</div><br>
</div>
<div class="favinfo" ><img src="http://funkyimg.com/i/Xwof.png"/></div>
<div class="favinfo"><img src="http://funkyimg.com/i/Xwof.png"/></div>
<div class="favinfo"><img src="http://funkyimg.com/i/Xwof.png"/></div><br>
<div class="favinfo labels values">Эмма<br>Стоун</div>
<div class="favinfo labels values">меловой<br>круиз</div>
<div class="favinfo labels values">велоцираптор</div>
</div>
<div style=" width:100%; height:1px; clear:both;">.</div>
<p class = "life-goal">Здесь будет жизненная цель персонажа или несколько слов о персонаже.</p>
</div>
</div>
<div style=" width:100%; height:0px; clear:both;">.</div>
<style>
.questionniere{
width: 630px;
color: white;
text-align:center;
}
.questionniere h5{
font-size: 1.2em;
font-family:Century Gothic,"Helvetica Neue", "Open Sans", "DIN1451", Helvetica,Arial,sans-serif;
text-transform: uppercase;
font-weight:500;
line-height: 1em;
}
.questionniere hr{
background-color: #ddbb44;
color:#ddbb44;
width:4em;
height: 1px;
margin:12px 0 12px;
}
.persons-info{
display: table-cell;
padding: 20px;
font-family:Century Gothic,"Helvetica Neue", "Open Sans", "DIN1451", Helvetica,Arial,sans-serif;
font-size: 1.2em;
//min-height: 200px;
text-align:center;
letter-spacing: 0.02em;
line-height:0.9em;
}
.left {
//width: 300px;
width: 53%;
}
.right{
// width:250px;
width: 47%;
}
.plustreats {
background-color: #83526f;
}
.minustreats {
background-color: #f16d2a;
}
.generic{
background-color: #149782;
font-family:"DIN1451", "Open Sans",Helvetica,Arial,sans-serif;
}
.family{
background-color: #46b3e3;
}
.hobbie{
background-color: #d9d027;
}
.job{
background-color: #132f57;
}
.parent {
display:table;
}
.interesting-facts{
width: 630px;
background-color: #df004e;
padding: 20px;
font-family:Century Gothic,"Helvetica Neue", "Open Sans", "DIN1451", Helvetica,Arial,sans-serif;
}
</style>
<div class="questionniere">
<div class="parent">
<div class="persons-info generic left"><h5>ВАШИ ПОЛОЖИТЕЛЬНЫЕ ЧЕРТЫ</h5><center><hr></center>положительные черты</div>
<div class="persons-info plustreats right"><h5>ВАШ ВОЗРАСТ, ДАТА РОЖДЕНИЯ</h5><br>
27 лет, 13.11.1988
<center><hr></center>
<h5>ОТКУДА К НАМ ПРИЕХАЛИ?</h5><br>
Нью-Йорк, США
<center><hr></center>
<h5>СЕМЕЙНОЕ ПОЛОЖЕНИЕ</h5><br>
семейное положение<center><hr></center>
</div>
</div>
<div class="parent">
<div class="persons-info family right">
<h5>ВАША СЕМЬЯ</h5>
<center><hr></center>
список Ваших ближайших или значимых родственников, а так же Ваша пара
<center><hr></center>
</div>
<div class="persons-info minustreats left">
<h5>ВАШИ ОТРИЦАТЕЛЬНЫЕ ЧЕРТЫ</h5>
<center><hr></center>
отрицательные черты
</div>
</div>
<div class="parent">
<div class="persons-info generic left">
<h5>ВАШЕ ХОББИ</h5>
<center><hr></center>
положительные черты
</div>
<div class="persons-info plustreats right">
<h5>РОД ДЕЯТЕЛЬНОСТИ</h5><br>
Ваша профессия и род деятельности, или ваша должность в парке
<center><hr></center>
<h5>ОБРАЗОВАНИЕ</h5><br>
образование
<center><hr></center>
</div>
</div>
<div class="parent">
<div class="persons-info family right">
<h5>КАКИЕ ПЛАНЫ НА ИГРУ?</h5>
<center><hr></center>
планы на будущую игру
<center><hr></center>
</div>
<div class="persons-info minustreats left">
<h5>ПОЧЕМУ РЕШИЛИ РАБОТАТЬ У НАС/ПРИЕХАТЬ?</h5><br>
причина, почему решили работать здесь или приехать в парк. много причин<br><br><br>ещё три причины<br><br>или две<br>или одна<br>да хоть сколько<br><br><br><br>нужнобольшепричине<br><br>ещёбольше<br><br>и ещё
<center><hr></center>
</div>
</div>
<div class="interesting-facts persons-info"><h5>ИНТЕРЕСНЫЕ ФАКТЫ</h5>
<center><hr></center>
интересные, по вашему мнению, факты о персонаже
<center><hr></center>
</div>
</div>ПРОБНЫЙ ПОСТ