Код:
<!--HTML-->
<style>
.parisanketatext { width: 550px; padding: 5px; border: 1px solid #B4B4B4; background-image: url(http://s5.uploads.ru/FVMAc.png); padding-bottom: 0px; border-bottom: 0px; height: 650px;}
.doll1 { width:550px; height:650px; background-image:url(http://s8.uploads.ru/5wkBL.png); position:relative; overflow:hidden; }
.doll2 { position:absolute; top:0px; left:0px; width:550px; height:650px; overflow:hidden; }
.doll3 { background-image:url(http://s8.uploads.ru/5wkBL.png) 250px 150px no-repeat; background-size:cover; position:absolute; top:0px; left:0px; width:550px; height:650px; opacity:1; transition-duration: 1.2s; -webkit-transition-duration: 1.2s; }
.avatarparis { position:absolute; top:31px; left:26px; width:180px; height:180px;}
.parisingname { position: absolute; top: 240px; left: 70px; font-family: bebas neue!important; font-size: 36px; color: #f8e1cf; text-shadow: #670508 1px 1px; width: 395px; text-align: center;}
.parisrusname {position: absolute; top: 25px; left: 280px; font-family: bebas neue!important; font-size: 24px; color: #f8e1cf; text-shadow: #a16c74 1px 1px; text-align: center;}
.parisdr {position: absolute; top: 60px; left: 210px; font-family: bebas neue!important; font-size: 16px; color: #865e63; width: 150px; height: 30px; text-align: center;}
.parisankface {position: absolute; top: 60px; left: 370px; font-family: bebas neue!important; font-size: 16px; color: #865e63; width: 150px; height: 30px; text-align: center;}
.semeipolojparis {position: absolute; top: 92px; left: 210px; font-family: bebas neue!important; font-size: 16px; color: #865e63; width: 150px; height: 30px; text-align: center;}
.paraparis {position: absolute; top: 92px; left: 370px; font-family: bebas neue!important; font-size: 16px; color: #865e63; width: 150px; height: 30px; text-align: center;}
.loveparis {position: absolute; top: 130px; left: 225px; width: 133px; height: 72px; overflow: auto; font-size: 12px; font-family: 'Cuprum'; color: #4a3337; text-align: justify;}
.hateparis {position: absolute; top: 130px; left: 385px; width: 133px; height: 72px; overflow: auto; font-size: 12px; font-family: 'Cuprum'; color: #4a3337; text-align: justify;}
.doll1:hover .dollmessages { opacity:1; transition-duration: 1.2s; -webkit-transition-duration: 1.2s; }
.dollmessages { position:absolute; top:0px; left: -1px; width:519px; height:650px; background-color:#fff; opacity:0; transition-duration: 1.2s; -webkit-transition-duration: 1.2s; }
.parisankinfo {width: 550px; margin-top: 50px; margin-left: -5px;}
.parisinfotext {width: 450px; height: 360px; overflow: auto; font-size: 12px; font-family: 'Cuprum'; color: #4a3337; text-align: justify; margin-top: 235px; margin-left: -5px;}
</style>
<center>
<div class='doll1'>
<div class='doll2'>
<div class='doll3'>
<div class='parisingname'><i>
<!-- ИМЯ И ФАМИЛИЯ ПО-АНГЛИЙСКИ -->
name surname
</i></div>
</div>
<div class='dollmessages'>
<div class='parisanketatext'>
<div class="parisankinfo">
<div class="avatarparis">
<img src='http://placehold.it/180x180' style="height: 180px; width: 180px">
</div>
<div class="parisrusname"><b>
имя и фамилия
</b></div>
<div class="parisdr">
дата рождения
</div>
<div class="parisankface">
внешность by
</div>
<div class="semeipolojparis">
семейное положение
</div>
<div class='paraparis'>
пара</div>
<div class='loveparis'>
то, что любит ваш персонаж <br>
по пунктам или полным описанием.<br>
• то, что любите <br>
• то, что любите <br>
• то, что любите <br>
• то, что любите <br>
</div>
<div class='hateparis'>
то, что не любит ваш персонаж <br>
по пунктам или полным описанием.<br>
• то, что не любите <br>
• то, что не любите <br>
• то, что не любите <br>
• то, что не любите <br>
</div>
<div class="parisinfotext">
Краткая информация о вашем персонаже. Сюда может входить, как характер, так и биография. Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.<br>
Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32<br>
Классический текст Lorem Ipsum, используемый с XVI века, приведён ниже. Также даны разделы 1.10.32 и 1.10.33 "de Finibus Bonorum et Malorum" Цицерона и их английский перевод, сделанный H. Rackham, 1914 год.<br>
Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым словам "lorem ipsum" сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения. За прошедшие годы текст Lorem Ipsum получил много версий. Некоторые версии появились по ошибке, некоторые - намеренно (например, юмористические варианты).
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</center>Код:
[*code]<*!--HTML-->
<style>
.parisanketatext { width: 550px; padding: 5px; border: 1px solid #B4B4B4; background-image: url(http://s5.uploads.ru/FVMAc.png); padding-bottom: 0px; border-bottom: 0px; height: 650px;}
.doll1 { width:550px; height:650px; background-image:url(http://s8.uploads.ru/5wkBL.png); position:relative; overflow:hidden; }
.doll2 { position:absolute; top:0px; left:0px; width:550px; height:650px; overflow:hidden; }
.doll3 { background-image:url(http://s8.uploads.ru/5wkBL.png) 250px 150px no-repeat; background-size:cover; position:absolute; top:0px; left:0px; width:550px; height:650px; opacity:1; transition-duration: 1.2s; -webkit-transition-duration: 1.2s; }
.avatarparis { position:absolute; top:31px; left:26px; width:180px; height:180px;}
.parisingname { position: absolute; top: 240px; left: 70px; font-family: bebas neue!important; font-size: 36px; color: #f8e1cf; text-shadow: #670508 1px 1px; width: 395px; text-align: center;}
.parisrusname {position: absolute; top: 25px; left: 280px; font-family: bebas neue!important; font-size: 24px; color: #f8e1cf; text-shadow: #a16c74 1px 1px; text-align: center;}
.parisdr {position: absolute; top: 60px; left: 210px; font-family: bebas neue!important; font-size: 16px; color: #865e63; width: 150px; height: 30px; text-align: center;}
.parisankface {position: absolute; top: 60px; left: 370px; font-family: bebas neue!important; font-size: 16px; color: #865e63; width: 150px; height: 30px; text-align: center;}
.semeipolojparis {position: absolute; top: 92px; left: 210px; font-family: bebas neue!important; font-size: 16px; color: #865e63; width: 150px; height: 30px; text-align: center;}
.paraparis {position: absolute; top: 92px; left: 370px; font-family: bebas neue!important; font-size: 16px; color: #865e63; width: 150px; height: 30px; text-align: center;}
.loveparis {position: absolute; top: 130px; left: 225px; width: 133px; height: 72px; overflow: auto; font-size: 12px; font-family: 'Cuprum'; color: #4a3337; text-align: justify;}
.hateparis {position: absolute; top: 130px; left: 385px; width: 133px; height: 72px; overflow: auto; font-size: 12px; font-family: 'Cuprum'; color: #4a3337; text-align: justify;}
.doll1:hover .dollmessages { opacity:1; transition-duration: 1.2s; -webkit-transition-duration: 1.2s; }
.dollmessages { position:absolute; top:0px; left: -1px; width:519px; height:650px; background-color:#fff; opacity:0; transition-duration: 1.2s; -webkit-transition-duration: 1.2s; }
.parisankinfo {width: 550px; margin-top: 50px; margin-left: -5px;}
.parisinfotext {width: 450px; height: 360px; overflow: auto; font-size: 12px; font-family: 'Cuprum'; color: #4a3337; text-align: justify; margin-top: 235px; margin-left: -5px;}
</style>
<center>
<div class='doll1'>
<div class='doll2'>
<div class='doll3'>
<div class='parisingname'><i>
<!-- ИМЯ И ФАМИЛИЯ ПО-АНГЛИЙСКИ -->
name surname
</i></div>
</div>
<div class='dollmessages'>
<div class='parisanketatext'>
<div class="parisankinfo">
<div class="avatarparis">
<img src='http://placehold.it/180x180' style="height: 180px; width: 180px">
</div>
<div class="parisrusname"><b>
имя и фамилия
</b></div>
<div class="parisdr">
дата рождения
</div>
<div class="parisankface">
внешность by
</div>
<div class="semeipolojparis">
семейное положение
</div>
<div class='paraparis'>
пара</div>
<div class='loveparis'>
то, что любит ваш персонаж <br>
по пунктам или полным описанием.<br>
• то, что любите <br>
• то, что любите <br>
• то, что любите <br>
• то, что любите <br>
</div>
<div class='hateparis'>
то, что не любит ваш персонаж <br>
по пунктам или полным описанием.<br>
• то, что не любите <br>
• то, что не любите <br>
• то, что не любите <br>
• то, что не любите <br>
</div>
<div class="parisinfotext">
Краткая информация о вашем персонаже. Сюда может входить, как характер, так и биография. Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.<br>
Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32<br>
Классический текст Lorem Ipsum, используемый с XVI века, приведён ниже. Также даны разделы 1.10.32 и 1.10.33 "de Finibus Bonorum et Malorum" Цицерона и их английский перевод, сделанный H. Rackham, 1914 год.<br>
Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым словам "lorem ipsum" сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения. За прошедшие годы текст Lorem Ipsum получил много версий. Некоторые версии появились по ошибке, некоторые - намеренно (например, юмористические варианты).
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</center>[/code*]
