<!--HTML-->
<link href="http://fonts.googleapis.com/css?family=Sansita+One" rel="stylesheet" type="text/css">

<center><div><div style=" 
    width: 100px;
    height: 100px;
    position: relative;
    bottom: -42px;
    left: 173px;"><img src="http://placehold.it/100x100"></div><div style="width: 500px;
    height: 600px;   
 margin: 0 auto;
    overflow: hidden;
        position: relative;
    top: -90px;
background: url(http://funkyimg.com/i/2byh3.png)">
<div style=" 
        width: 260px;
    height: 50px;
    position: absolute;
    top: 15px;
        left: 15px;
    color: rgba(255, 255, 255, 0.64);
letter-spacing: 2px;">цитата про вашего чудного персонажа не обязательно смешная</div><div style=" 
    position: absolute;
    top: 162px;
    right: 10px;"
><a href="ссылка на анкету"><img src="http://funkyimg.com/i/2byAR.png"></a></div>
<div style="     position: absolute;
    top: 154px;
    font-size: 32px;
    color: #7ABD1B;
    text-shadow: 1px 1px #D2E39B;
    right: 60px;
    font-family: lobster; ">Name Surname</div><div style="position: relative;
    top: 192px;    
color: rgba(117, 173, 40, 0.61);
    letter-spacing: 1px; ">дата рождения/семейное положение/профессия</div>
<div style="width: 230px;
      margin-left: -210px;
    margin-top: 230px;
height: 100px;
    overflow: auto;"><img src="http://s3.uploads.ru/cNr8D.png" title="текст подарка"> <img src="http://s3.uploads.ru/cNr8D.png" title="текст подарка"> <img src="http://s3.uploads.ru/cNr8D.png" title="текст подарка"> <img src="http://s3.uploads.ru/cNr8D.png" title="текст подарка"><img src="http://s3.uploads.ru/cNr8D.png" title="текст подарка"> <img src="http://s3.uploads.ru/cNr8D.png" title="текст подарка"> <img src="http://s3.uploads.ru/cNr8D.png" title="текст подарка"> <img src="http://s3.uploads.ru/cNr8D.png" title="текст подарка"> <img src="http://s3.uploads.ru/cNr8D.png" title="текст подарка"> <img src="http://s3.uploads.ru/cNr8D.png" title="текст подарка"> <img src="http://s3.uploads.ru/cNr8D.png" title="текст подарка"> <img src="http://s3.uploads.ru/cNr8D.png" title="текст подарка"></div>
<div style="width: 230px;
        margin-left: 250px;
    margin-top: -100px;
    height: 100px;
    overflow: auto;
   
  "><img src="http://s3.uploads.ru/cNr8D.png" title="текст награды"> <img src="http://s3.uploads.ru/cNr8D.png" title="текст награды"> <img src="http://s3.uploads.ru/cNr8D.png" title="текст награды"> <img src="http://s3.uploads.ru/cNr8D.png" title="текст награды"><img src="http://s3.uploads.ru/cNr8D.png" title="текст награды"> <img src="http://s3.uploads.ru/cNr8D.png" title="текст награды"><img src="http://s3.uploads.ru/cNr8D.png" title="текст подарка"> <img src="http://s3.uploads.ru/cNr8D.png" title="текст подарка"> <img src="http://s3.uploads.ru/cNr8D.png" title="текст подарка"> <img src="http://s3.uploads.ru/cNr8D.png" title="текст подарка">
</div>



<div style="height: 130px;  overflow: auto;  margin-top: 100px;
    width: 470px;">
<div style="    width: 450px;
  "><div style=" 
    font-size: 26px;
    color: #7ABD1B;
    text-shadow: 1px 1px #D2E39B;
    right: 60px;
    font-family: lobster; ">New York</div>
<img src="http://funkyimg.com/i/2byG7.png"> <img src="http://funkyimg.com/i/2byG7.png"> <img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png">
<div style=" 
    font-size: 26px;
    color: #7ABD1B;
    text-shadow: 1px 1px #D2E39B;
    right: 60px;
    font-family: lobster; ">The Bronx</div>
<img src="http://funkyimg.com/i/2byG7.png"> <img src="http://funkyimg.com/i/2byG7.png"> <img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png">
<div style=" 
    font-size: 26px;
    color: #7ABD1B;
    text-shadow: 1px 1px #D2E39B;
    right: 60px;
    font-family: lobster; ">Queens</div>
<img src="http://funkyimg.com/i/2byG7.png"> <img src="http://funkyimg.com/i/2byG7.png"> <img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png">
<div style=" 
    font-size: 26px;
    color: #7ABD1B;
    text-shadow: 1px 1px #D2E39B;
    right: 60px;
    font-family: lobster; ">Manhattan</div>
<img src="http://funkyimg.com/i/2byG7.png"> <img src="http://funkyimg.com/i/2byG7.png"> <img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png">
<div style=" 
    font-size: 26px;
    color: #7ABD1B;
    text-shadow: 1px 1px #D2E39B;
    right: 60px;
    font-family: lobster; ">Staten Island</div>
<img src="http://funkyimg.com/i/2byG7.png"> <img src="http://funkyimg.com/i/2byG7.png"> <img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png">
<div style=" 
    font-size: 26px;
    color: #7ABD1B;
    text-shadow: 1px 1px #D2E39B;
    right: 60px;
    font-family: lobster; ">Brooklyn</div>
<img src="http://funkyimg.com/i/2byG7.png"> <img src="http://funkyimg.com/i/2byG7.png"> <img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png"><img src="http://funkyimg.com/i/2byG7.png">
</div></div></div></div></center>

<!--HTML-->
<!-- Начните с выбора своего цвета, он может быть просто любимым и/или подходить к цвету основный картинки. Вместо #cbab41 вставьте 5 раза ваш выбранный цвет, чтобы было проще используйте ctrl+f - #cbab41 и замените во всех найденных местах. http://www.puzzleweb.ru/html/colors_html.php в помощь. По стандарту там стоит золотой, наиболее подходящий к любой картинке, так что можно оставить так как есть-->
<style>.biozone {border-bottom: 3px solid #cbab41;}
.biozone1::-webkit-scrollbar-track { background-color: #fff; border-left: 1px solid #cbab41; }
.biozone1::-webkit-scrollbar-thumb { background-color: #cbab41; }
.lagzone, .lagzone1, .lagzone2, .lagzone3, .lagzone4, .lagzone5 { background-color: #cbab41; }
.starname, .yourname, .rusname, .yourbgday { color: #cbab41; }

.emjthemename {
    font-family: 'Lobster';
    font-size: 24px;
    text-shadow: 1px 1px 0px white, 2px 2px 0px #cbcacc;
    text-transform: lowercase;
}
.emjthemebar {
    border-top: 3px double #d1e8d8;
    width: 300px;
}
.emjtheme2 {
    text-align: center;
    padding: 11px;
    padding-top: 10px;
    font-family: 'Arsenal';
    font-size: 12px;
    color: #352206;
}
.em-av {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 500px;
    height: 650px;
    z-index: 1;
    -webkit-transition: 0.6s ease-in-out;
    -moz-transition: 0.6s ease-in-out;
    -ms-transition: 0.6s ease-in-out;
    -o-transition: 0.6s ease-in-out;
    transition: 0.6s ease-in-out;

.em-3 {
    position: absolute;
    top: 40px;
    left: 40px;
    width: 400px;
    height: 550px;
    padding: 10px;
    background-color: rgba(250,250,250,0.8);
    opacity: 0;
    z-index: 4;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -ms-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s}

.lagzone {
    width: 391px;
    margin-left: 4px;
    margin-top: 1px;
    margin-bottom: 1px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #cbab41;
    color: #fff;
    text-align: center;
    font-size: 7px;
    text-transform: uppercase;
    line-height: 100%;
    letter-spacing: 1px;
    font-family: arial, sans-serif;
}
.rusname {
    text-align: center;
    font-family: 'Droid Mono';
    font-size: 25px;
    text-transform: uppercase;
    font-family: oswald;
    line-height: 95%;
    font-weight: bold;
    text-shadow: 1px 1px 0px #121212;
    margin-bottom: 9px;
}

.biozone {
    width: 380px;
    height: 430px;
    padding: 10px;
    background-color: #fff;
    margin-top: 5px;
    font-family: arial, sans-serif;
    font-size: 10px;
    text-align: justify;
    color: #222;
    line-height: 100%;
}
</style>

<center><div class='em-1'><figcaption><div class='em-3'><table cellpadding="0" cellspacing="0"><td><div class="lagzone3">

<!-- Ваш возраст  -->
возраст

</div></td><td><div class="lagzone1">

<!-- Ваше стремление  -->
стремление

</div></td><td><div class="lagzone2">

<!-- Ваша ориентация-->
ориентация

</div></td></table><div class="lagzone">

<!-- Ваши nicknames-->
прозвища

</div><table cellpadding="0" cellspacing="0"><td><div class="lagzone4">

<!-- Ваша профессия-->
профессия

</div></td><td><div class="lagzone5">

<!-- Ваше месторождение-->
месторождение

</div></td></table><div class="rusname" style="margin-top: -30px; margin-bottom: -10px;  "><br><span style='color:fff'><center>

<!-- Ваше имя на русском-->
Ваше имя на русском языке

</center></div><div class="biozone"><div class="biozone1">

<!-- После src=" вставьте квадратную картинку или гифку любого размера вместо ...-->
<img src="http://placehold.it/100x100" width="100px" class=" formimg">

<!-- Информация о персонаже: характер и биография-->
Опишите биографию и характер. Если хотите пройти по упрощенке, то напишите 10 фактов о себе.



</div></div></div></figcaption><div class='sugar-2'></div>

<!-- После url( вместо "https://40.media.tumblr.com/e6de3de0e860df519fec580af0fcad40/tumblr_mst93psT3Q1qe8a0fo1_500.jpg"  вставьте картинку не менее 500px в ширину, не менее 650px в длину, сильно большую тоже не нужно-->
<div class='em-av' style='background-image: url(https://40.media.tumblr.com/e6de3de0e860df519fec580af0fcad40/tumblr_mst93psT3Q1qe8a0fo1_500.jpg); rgba(0,0,0,0.2);'>


<div class="yourbgday" style="margin-left: 50px"><p style="text-align: left;"><br>


<!-- Ваша дата рождения в формате 00.00.00-->

Ваша дата рождения 



</p></div><div class="yourname" style="margin-top: 205px; "><br> 

<!-- Ваши имя и фамилия на англ. языке-->
Ваши имя и фамилия 

</div><div class="anktitle">

<!-- Цитата -->
Цитата будет тут

</div><div><table border="0"><tr><td> </td><td> <div class="starname" style="margin-top: 150px; "><br><span style='color:fff'><center>

<!-- Имя звезды, чью внешность заняли-->
as имя на англ

<br>

<!-- Фамилия звезды, чью внешность заняли-->
фамилия на англ

</center></div></td></tr></table></div></div></center>  </div>

<!--HTML-->
<style>
/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v16/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

#action .halsamen label span { color: rgba(106,191,204, 1); }
#comedy .halsamen label span { color: rgba(170,201,87, 1); }
#horror .halsamen label span { color: rgba(231,133,46, 1); }
#animation .halsamen label span { color: rgba(92,211,187,1); }
#tragedy .halsamen label span { color: rgba(105,125,144,1); }
#drama .halsamen label span { color: rgba(218,76,76,1); }
#PROXY .halsamen label span { color: rgba(18,255,0,1); }

#action .halsamen [type=radio]:checked ~ label span { background-color: rgba(106,191,204, 1); }
#comedy .halsamen [type=radio]:checked ~ label span { background-color: rgba(170,201,87, 1); }
#horror .halsamen [type=radio]:checked ~ label span { background-color: rgba(231,133,46, 1); }
#animation .halsamen [type=radio]:checked ~ label span { background-color: rgba(92,211,187,1); }
#tragedy .halsamen [type=radio]:checked ~ label span { background-color: rgba(105,125,144,1); }
#drama .halsamen [type=radio]:checked ~ label span { background-color: rgba(218,76,76,1); }
#PROXY .halsamen [type=radio]:checked ~ label span { background-color: rgba(18,255,0,1); }

#action .halsamen [type=radio]:checked ~ label span { border-color: rgba(106,191,204, 1); }
#comedy .halsamen [type=radio]:checked ~ label span { border-color: rgba(170,201,87, 1); }
#horror .halsamen [type=radio]:checked ~ label span { border-color: rgba(231,133,46, 1); }
#animation .halsamen [type=radio]:checked ~ label span { border-color: rgba(92,211,187,1); }
#tragedy .halsamen [type=radio]:checked ~ label span { border-color: rgba(105,125,144,1); }
#drama .halsamen [type=radio]:checked ~ label span { border-color: rgba(218,76,76,1); }
#PROXY .halsamen [type=radio]:checked ~ label span { border-color: rgba(18,255,0,1); }

#action .halsamens-btm i { color: rgba(106,191,204, 1); }
#comedy .halsamens-btm i { color: rgba(170,201,87, 1); }
#horror .halsamens-btm i { color: rgba(231,133,46, 1); }
#animation .halsamens-btm i { color: rgba(92,211,187,1); }
#tragedy .halsamens-btm i { color: rgba(105,125,144,1); }
#drama .halsamens-btm i { color: rgba(218,76,76,1); }
#PROXY .halsamens-btm i { color: rgba(18,255,0,1); }

#action .halsamens-sidea-btm span { color: rgba(106,191,204, 1); }
#comedy .halsamens-sidea-btm span { color: rgba(170,201,87, 1); }
#horror .halsamens-sidea-btm span { color: rgba(231,133,46, 1); }
#animation .halsamens-sidea-btm span { color: rgba(92,211,187,1); }
#tragedy .halsamens-sidea-btm span { color: rgba(105,125,144,1); }
#drama .halsamens-sidea-btm span { color: rgba(218,76,76,1); }
#PROXY .halsamens-sidea-btm span { color: rgba(18,255,0,1); }

#action .halsamens-sidea-btm pan { color: rgba(106,191,204, 1); }
#comedy .halsamens-sidea-btm pan { color: rgba(170,201,87, 1); }
#horror .halsamens-sidea-btm pan { color: rgba(231,133,46, 1); }
#animation .halsamens-sidea-btm pan { color: rgba(92,211,187,1); }
#tragedy .halsamens-sidea-btm pan { color: rgba(105,125,144,1); }
#drama .halsamens-sidea-btm pan { color: rgba(218,76,76,1); }
#PROXY .halsamens-sidea-btm pan { color: rgba(18,255,0,1); }

#action .halsamens-sideb-top name { border-color: rgba(106,191,204, 1); }
#comedy .halsamens-sideb-top name { border-color: rgba(170,201,87, 1); }
#horror .halsamens-sideb-top name { border-color: rgba(231,133,46, 1); }
#animation .halsamens-sideb-top name { border-color: rgba(92,211,187,1); }
#tragedy .halsamens-sideb-top name { border-color: rgba(105,125,144,1); }
#drama .halsamens-sideb-top name { border-color: rgba(218,76,76,1); }
#PROXY .halsamens-sideb-top name { border-color: rgba(18,255,0,1); }

#action .halsamens-ta-1 tit { color: rgba(106,191,204, 1); }
#comedy .halsamens-ta-1 tit { color: rgba(170,201,87, 1); }
#horror .halsamens-ta-1 tit { color: rgba(231,133,46, 1); }
#animation .halsamens-ta-1 tit { color: rgba(92,211,187,1); }
#tragedy .halsamens-ta-1 tit { color: rgba(105,125,144,1); }
#drama .halsamens-ta-1 tit { color: rgba(218,76,76,1); }
#PROXY .halsamens-ta-1 tit { color: rgba(18,255,0,1); }

#action .halsamens-ta-1 blocka b { color: rgba(106,191,204, 1); }
#comedy .halsamens-ta-1 blocka b { color: rgba(170,201,87, 1); }
#horror .halsamens-ta-1 blocka b { color: rgba(231,133,46, 1); }
#animation .halsamens-ta-1 blocka b { color: rgba(92,211,187,1); }
#tragedy .halsamens-ta-1 blocka b { color: rgba(105,125,144,1); }
#drama .halsamens-ta-1 blocka b { color: rgba(218,76,76,1); }
#PROXY .halsamens-ta-1 blocka b { color: rgba(18,255,0,1); }

#action .halsamens-ta-1 fi b { color: rgba(106,191,204, 1); }
#comedy .halsamens-ta-1 fi b { color: rgba(170,201,87, 1); }
#horror .halsamens-ta-1 fi b { color: rgba(231,133,46, 1); }
#animation .halsamens-ta-1 fi b { color: rgba(92,211,187,1); }
#tragedy .halsamens-ta-1 fi b { color: rgba(105,125,144,1); }
#drama .halsamens-ta-1 fi b { color: rgba(218,76,76,1); }
#PROXY .halsamens-ta-1 fi b { color: rgba(18,255,0,1); }
.halsamens-wrap { width: 502px; border: 5px #fff solid; outline: 1px #e0e0e0 solid; position: relative; margin: 25px auto; }
.halsamens { position: relative;    width: 500px; height:  500px; clear: both; border: 1px #e0e0e0 solid;  background-color: transparent; }
.halsamens .halsamen { float: left; }
.halsamens .halsamen label { position: absolute; left: 358px;
    top: 140px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; cursor: crosshair; }
.halsamen label span { background-color: #fff; border: 1px #e0e0e0 solid; border-radius: 100%; font-size: 12px; line-height: 28px; width: 28px; height: 28px; text-align: center; color: rgba(191,172,151,1); -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
.halsamens .halsamen [type=radio] { display: none;   baseline-tab-shift: true, retrieve; }
.halsamens .halsamen-content { position: absolute;       top: 80px;
    left: 10px;
    width: 316px;
    height: 366px; background-color: #f5f5f5; border: 1px #e0e0e0 solid; padding: 5px;  -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; -webkit-transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg); -moz-transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg); -o-transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg); -ms-transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg); transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg); opacity: 0; }
.halsamens .halsamen-content img { width: 306px;
    height: 355px; padding: 4px; border: 1px #e0e0e0 solid; object-fit: cover; object-position: 50% 50%; background-color: #fff; }
.halsamens .halsamen [type=radio]:checked ~ label { z-index: 2; }
 .halsamen [type=radio]:checked ~ label span { background-color: rgba(191,172,151,1); border-color: rgba(191,172,151,1); color: #fff !important;  }
.halsamens .halsamen [type=radio]:checked ~ label ~ .halsamen-content { opacity: 1; z-index: 1; -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
.halsamens-sidea { width: 100px;
    background-color: #f8f8f8;
    height: 191px; position: absolute; top: 0px; right: 0px; border-left: 1px #e0e0e0 solid; border-bottom: 1px #e0e0e0 solid; padding: 25px; }
.halsamens-sidea img { width: 88px; height: 88px; padding: 5px; background-color: #fff; border-radius: 100%; border: 1px #e0e0e0 solid; object-fit: cover; object-position: 50% 50%; }
.halsamens-btm { width: 500px; height: 30px; border-top: 1px #e0e0e0 solid; position: absolute; bottom: 0px; left: 0px; background-color: #fafafa; font-family: Montserrat; font-weight: 400; text-transform: uppercase; letter-spacing: 1px;  font-size: 8px; color: #333;  text-align: center; letter-spacing: 1px; overflow: hidden;  line-height: 30px;  }
.halsamens-btm i { display: inline-block; font-size: 16px; color: rgba(191,172,151,1); padding: 0px 10px;  position: relative; top: 4px;}
.halsamens-sidea-btm { width: 130px;
    height: 207px; position: absolute; bottom: 31px; right: 0px; background-color: #f5f5f5; border-left: 1px #e0e0e0 solid; padding: 10px; font-family: playfair display; font-size: 15px; line-height: 145%; color: #666; text-align: justify; text-transform: lowercase; font-style: italic; font-weight: 400; letter-spacing: 1.5px; }
.halsamens-sidea-btm span { color: rgba(191,172,151,1); font-size: 20px; display: inline-block; }
.halsamens-sidea-btm pan {  color: rgba(191,172,151,1); font-size: 20px; -webkit-transform: scale3d(-1, 1, 1); -moz-transform: scale3d(-1, 1, 1); -o-transform: scale3d(-1, 1, 1); -ms-transform: scale3d(-1, 1, 1); transform: scale3d(-1, 1, 1); display: inline-block; }
.halsamens-sideb-top { height: 69px;
    width: 299px; border-bottom: 1px #e0e0e0 solid; position: absolute; top: 0px; left: 0px; overflow: hidden; background-color: #f4f4f4;  text-align: center; padding: 0px 25px; }
.halsamens-sideb-top name { display: inline-block; font-family: Montserrat; font-weight: 400; font-size: 20px; color: #333; text-transform: uppercase; text-align: center; border-bottom: 3px rgba(191,172,151,1) solid; padding-bottom: 5px; line-height: 100%; padding-top: 25px; }
.halsamens-sidec-con {     height: 469px;
    width: 399px; background-image: url(https://i.imgsafe.org/4e8b562.png); background-color: #f9f9f9; position: absolute; bottom: 31px; left: 0px; }
.halsamens-ta-1 {        width: 280px;
    height: 334px; border: 15px #fff solid; padding-right: 5px; background-color: #fff; overflow-x: hidden; overflow-y: auto; outline: 1px #e0e0e0 solid; margin: 1px; text-align: left; }
.halsamens-ta-1 tit {  font-family: Montserrat; font-weight: 400; font-size: 14px; color: rgba(191,172,151,1); text-transform: uppercase; border-bottom: 2px #333 solid; padding-bottom: 7px; line-height: 100%; text-align: left; display: inline-block; }
.halsamens-ta-1 block { padding: 12px; display: block; }
.halsamens-ta-1 blocka { padding: 10px; display: block; font-family: roboto; font-size: 12px; line-height: 140%; text-align: justify; color: #333; letter-spacing: 1px; word-spacing: 1px; }
.halsamens-ta-1 blocka b { font-family: playfair display; font-size: 12px; color: rgba(191,172,151,1); }
.halsamens-ta-1 fi { display: block; font-family: roboto; font-size: 12px; letter-spacing: 1px; line-height: 140%; color: #999; }
.halsamens-ta-1 fi b { font-family: playfair display; font-weight: 400; font-style: italic; text-transform: lowercase; font-size: 11px; color: rgba(191,172,151,1);  }
.halsamens-ta-1 fi sol { display: block; padding: 5px; font-size: 12px; font-family: roboto; line-height: 125%; color: #666; margin: 5px; text-align: justify; }
.halsamens-ta-1 fi sola { display: block; padding: 5px; font-size: 12px; font-family: roboto; line-height: 125%; color: #666; margin: 5px; text-align: justify; text-transform: uppercase; color: #666!important; }
</style>




<div id="drama" class="halsamens-wrap"><div class="halsamens"><div class="halsamens-sidec-con"></div> <div class="halsamens-sideb-top">

<name> name surname </name>

</div><div class="halsamens-sidea">


<img src="http://placehold.it/100x100">


</div><div class="halsamens-btm">


район <i class="material-icons">/</i> возраст <i class="material-icons">/</i> профессия


</div><div class="halsamens-sidea-btm"> <pan class="icon-quote"></pan>

напиши тут цитату


<span class="icon-quote"></span></div> <div class="halsamen"> <input type="radio" id="halsamen-1" name="halsamen-group-1" checked=""> <label for="halsamen-1" title="main image" class=""><span class="material-icons">1</span></label> <div class="halsamen-content">


<img src="http://placehold.it/300x350">



</div> </div> <div class="halsamen"> <input type="radio" id="halsamen-2" name="halsamen-group-1"> <label for="halsamen-2" style="margin-left: 35px;" title="basics &amp; info" class=""><span class="material-icons">2</span></label> <div class="halsamen-content"><div class="halsamens-ta-1">



<tit> basics; </tit>
<block>
<fi><b>имя фамилия</b> answer here. </fi>
<fi><b>день рождения </b> answer here. </fi>
<fi><b>ориентация </b> answer here. </fi>
<fi><b>семейное положение </b> answer here. </fi>
<fi><b>возраст </b> answer here. </fi>
<fi><b>прозвища </b> <sol>list here. </sol> </fi>
</block>


<tit> personality; </tit>
<block>
<fi><b>зодиак</b> answer here. </fi>
<fi><b>факультет хогвартса</b> answer here. </fi>
<fi><b>книги</b> answer here. </fi>
<fi><b>фильмы</b> answer here. </fi>
<fi><b>хобби </b> answer here. </fi>
<fi><b>ваш камень </b> answer here. </fi>
</block>



<tit> familial life; </tit>
<block>
<fi><b>мама</b> answer here. </fi>
<fi><b>папа</b> answer here. </fi>
<fi><b>дети </b> <sol>list here</sol> </fi>
<fi><b>животные</b> <sol>list here</sol> </fi>
</block>


</block>





</div></div> </div> <div class="halsamen"> <input type="radio" id="halsamen-3" name="halsamen-group-1"> <label for="halsamen-3" style="margin-left: 70px;" title="shipper info" class=""><span class="material-icons">3</span></label> <div class="halsamen-content"><div class="halsamens-ta-1">





<tit> характер </tit>
<blocka>

текст

</blocka>






</div></div></div><div class="halsamen"> <input type="radio" id="halsamen-4" name="halsamen-group-1"> <label for="halsamen-4" style="margin-left: 105px;" title="player info" class=""><span class="material-icons">4</span></label> <div class="halsamen-content"><div class="halsamens-ta-1">




<tit> биография </tit>
<block>
текст
</block>




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

<!--HTML-->
<link href="http://fonts.googleapis.com/css?family=Oswald|Roboto+Condensed" rel="stylesheet" type="text/css">

<style type="text/css">

.base { width: 190px; height: 190px; background-color: white;  opacity: 0;  text-transform: lowercase; text-align: justify; transition-duration: 0.7s;  -moz-transition-duration: 0.7s;  -webkit-transition-duration: 0.7s;  -o-transition-duration: 0.7s; }
.base:hover {     width: 190px;    height: 190px;    opacity: 0.9;    background-color: #dedfe4;    text-align: justify;    border-radius: 10px; }
.amsinfo {    overflow: auto;   line-height: 97%;  height: 120px;  width: 165px;  font-size: 11px; padding: 0px 10px; text-align: justify; }
.basebase {width: 190px;height: 190px;background-image: url(https://i.imgur.com/Ez8pmHM.png);border-radius: 10px;}
.basebase2 {width: 190px;height: 190px;background-image: url(https://i.imgur.com/CxXuUSG.png);border-radius: 10px;}
.basebase3 {width: 190px;height: 190px;background-image: url(https://i.imgur.com/nNQP5rT.png);border-radius: 10px;}
.basebase4 {width: 190px;height: 190px;background-image: url(https://i.imgur.com/zfGQRBs.png);border-radius: 10px;}
.basebase5 {width: 190px;height: 190px;background-image: url(https://i.imgur.com/fQekS4v.png);border-radius: 10px;}
.basebase6 {width: 190px;height: 190px;background-image: url(https://i.imgur.com/fQekS4v.png);border-radius: 10px;}
.basebase7 {width: 190px;height: 190px;background-image: url(https://i.imgur.com/oi5o4ex.png);border-radius: 10px;}
.basebase8 {width: 190px;height: 190px;background-image: url(https://i.imgur.com/oi5o4ex.png);border-radius: 10px;}
.basebase9 {width: 190px;height: 190px;background-image: url(https://i.imgur.com/oi5o4ex.png);border-radius: 10px;}
.amsname { font-size: 19px;    text-align: center;    text-transform: uppercase;     padding: 4px;    font-family: bebas neue!important;       color: black;    text-shadow: 0px 1px 5px #91a0c8; }
.amshash {  font-size: 14px;    text-align: center;    line-height: 160%;    text-transform: uppercase;    padding: 0px;    font-family: bebas neue!important;    color: gray;  text-shadow: 0px 1px 5px #91a0c8;}

.amsinfo::-webkit-scrollbar { height: 12px; width: 2px; background-color: transparent;} 
.amsinfo::-webkit-scrollbar-thumb { background: #2E2F23; } 
.amsinfo::-webkit-scrollbar-corner { background: #2E2F23; }
.amsinfo::-webkit-scrollbar-track { background: transparent; }

</style>

<center><div class="wine12"><div style="position: absolute; margin: 28px; 0px;"><div class="winename"><div style="position: absolute; border-left: 150px; width: 593px; text-align: center; margin-left: -25px;">знакомство с амс</div></div></div>
<br><br><br><br>

<div style="/* margin-left: -7px; */">
<div class="winee1"><center><table><tbody><tr>
<td style="width: 33.5%">
<div class="basebase">
<div class="base">
<div class="amsname">Name surname</div>
<hr>
<div class="amsinfo">
текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст  текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст</div>
<div class="amshash">#хэштег</div>
</div></div></td>

<td>
<div class="basebase2">

<div class="base">
<div class="amsname">Name surname</div>
<hr>
<div class="amsinfo">
текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст  текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст</div>
<div class="amshash">#хэштег</div>
</div></div></td>

<td>
<div class="basebase3">
<div class="base">
<div class="amsname">Name surname</div>
<hr>
<div class="amsinfo">
текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст  текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст</div>
<div class="amshash">#хэштег</div>
</div></div></td>
</tr>

<tr>
<td style="width: 32%">
<div class="basebase4">
<div class="base">
<div class="amsname">Name surname</div>
<hr>
<div class="amsinfo">
текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст  текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст</div>
<div class="amshash">#хэштег</div>
</div></div></td>

<td>
<div class="basebase5">
<div class="base">
<div class="amsname">Name surname</div>
<hr>
<div class="amsinfo">
текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст  текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст</div>
<div class="amshash">#хэштег</div>
</div></div></td>

<td>
<div class="basebase6">
<div class="base">
<div class="amsname">Name surname</div>
<hr>
<div class="amsinfo">
текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст  текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст</div>
<div class="amshash">#хэштег</div>
</div></div></td></tr>

<tr>
<td style="width: 32%">
<div class="basebase7">
<div class="base">
<div class="amsname">Name surname</div>
<hr>
<div class="amsinfo">
текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст  текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст</div>
<div class="amshash">#хэштег</div>
</div></div></td>

<td>
<div class="basebase8">
<div class="base">
<div class="amsname">Name surname</div>
<hr>
<div class="amsinfo">
текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст  текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст</div>
<div class="amshash">#хэштег</div>
</div></div></td>

<td>
<div class="basebase9">
<div class="base">
<div class="amsname">Name surname</div>
<hr>
<<div class="amsinfo">
текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст  текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст текст текст текст текст  текст текст текст</div>
<div class="amshash">#хэштег</div>
</div></div></td></tr>
</tbody></table>
</center><br><br><br></div></div></div></center></div>

<!--HTML-->
<div id=«__flowers»><div class=«__fbg»><div class=«__fbg2»><div class=«__fflowert»></div>

<div class=«__ftitle»><ct>милый</ct><br>юджин<div class=«__fsubtitle»>текст текст текст текст</div></div>

<div class=«__fbox»>текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</div>

<div class=«__ftext»>Текст текст текст текст.  — <c>Текст текст текст текст.</c>— Текст текст текст текст. Текст текст текст текст. Текст текст текст текст.
Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. <br>

<br>ᅠᅠТекст текст текст текст. Текст текст текст текст. Текст текст текст текст.
Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. <br>

<br>ᅠᅠТекст текст текст текст. Текст текст текст текст. Текст текст текст текст.
Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. <br>

<br>ᅠᅠТекст текст текст текст. Текст текст текст текст. Текст текст текст текст.
Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. Текст текст текст текст. <br>

</div>

<div class=«__fft»><b>с</b> наилучшими пожеланиями<br><i>— марси</i><br></div><div class=«__fflowerb»></div></div></div></div>

<style>:root{--fbg1:#FCFCFC;--fbg2: #f3f3f3;--ftext: #111111;--faccent: #aa5386;--faccent2: #d17fc7;}@font-face {font-family: 'Ramitas';src:url('https://dl.dropbox.com/s/odq5n4mo8ycmagv/TT-Ramillas-Initials-Trial-Regular.woff')format('woff2'),url('https://dl.dropbox.com/s/odq5n4mo8ycmagv/TT-Ramillas-Initials-Trial-Regular.woff') format('woff'),url('https://dl.dropbox.com/s/isj3foxrnon6e9j/TT%20Ramillas%20Initials%20Trial%20Regular.otf')format('opentype');}#__flowers{width: 600px;background: var(--fbg1);padding:4px;border:1px solid var(--fbg2);border-radius: 5px;color:var(--ftext);margin: 0 auto;}#__flowers .__fbg{background:var(--fbg2);padding:10px;border:1px solid var(--fbg2);border-radius: 5px;}#__flowers .__fbg2{background:var(--fbg1);padding:10px;border:1px solid var(--fbg2);border-radius: 5px;}#__flowers .__fflowert{width: 100%;margin:-10px;height: 300px;background-image: url(«https://i.imgur.com/KpYDAtz.png»);background-repeat: no-repeat;background-position:left top;opacity:40%;}#__flowers .__fflowerb{width: 100%;margin-top:-25%;margin-bottom:-10px;height: 200px;background-image: url(«https://i.imgur.com/NcBidKz.png»);background-repeat: no-repeat;background-position:right bottom -90px;opacity:40%;}#__flowers .__ftitle{font-family:times new roman;font-style:italic;text-transform:uppercase;font-weight:900;font-size: 45px;line-height:80%;text-align:right;letter-spacing: -2px;width: 400px;margin-top: -30%;margin-left: 15%;}#__flowers .__ftitle ct{color: var(--faccent);}#__flowers .__fsubtitle{font-family:times new roman;text-transform:uppercase;font-style:italic;font-size: 7px;line-height:80%;text-align:right;letter-spacing: 3px;margin-top:10px;color: var(--faccent);}#__flowers .__fbox{width:60%;height: 30px;margin: 0 auto;margin-top: 10%;overflow:hidden;font-family:times;line-height:120%;text-align: justify;text-transform:uppercase;font-size:8px;letter-spacing: 4px;font-style:italic;font-weight:900;padding: 22px 40px;border-radius: 15px;color:var(--fbg1);background-size:auto;background-position:center;background-attachment: fixed;background-image: url(«https://img.freepik.com/premium-vector/monochrome-seamless-floral-pattern-with-dahlias_528213-779.jpg?w=2000»);background-blend-mode: multiply;background-color: var(--faccent);}#__flowers .__ftext{font-family: times;font-size:11px;width: 70%;margin: 0 auto;text-align:justify;padding: 60px 0;line-height: 130%;hyphens: auto;}#__flowers .__ftext::first-letter{float: left;margin: 60px 30px 50px 10px;font-size: 90px;font-family:'Ramitas';color: var(--faccent);}#__flowers .__ftext c{background: linear-gradient(to right, var(--faccent) 0%, var(--faccent2) 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}#__flowers .__fft{width:70%;height:70px;overflow:hidden;text-align:right;font-family: times;font-size: 14px;line-height:140%;margin: 0 auto;font-style:italic;}#__flowers .__fft b{font-weight:600;font-size: 18px;color: var(--faccent);}#__flowers .__fft i{text-transform:lowercase;font-style:normal;font-size:9px;letter-spacing:2px;font-family: times new roman;}#__flowers .__fplc{text-transform:uppercase;font-style:normal;font-size:7px;font-family: sans-serif;background: var(--faccent);letter-spacing:1px;font-weight:600;border-radius:5px;padding:4px 10px;color:#161616;}.cactuslinkcont{width: 620px;margin: 0 auto;margin-top:2px;text-align:center;}.cactuslinkgm{text-transform:uppercase;text-decoration: none;font-size:7px;letter-spacing:1px;color:#e6e6e6;font-family:times;border-bottom: 1px;}</style>

<!--HTML-->
<style type="text/css">/*
<link href='http://fonts.googleapis.com/css?family=Bad+Script&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

*/#data{    
width: 550px;
 text-align: right;
 font-family: Calibri; 
font-size:10px; 
text-transform: lowercase; 
color: #666033; 
line-height: 15%; 
letter-spacing: 3px;
 padding-top: 40px;
}/*

.p {
text-indent: 20px;
}


*/#text{    
    opacity: 0.9;
    padding: 40px;
    font-family: 'Calibri';
    font-size: 12px;
    line-height: 125%;
    overflow: auto;
    color: #201e1a;
    text-align: justify;
text-indent: 30px;

}/*
*/#titel{    
    position: relative;
    width: 400px;
    text-align: left;
    font-family: 'Bad Script';
    font-size: 28px;
    letter-spacing: -1px;
    color: #7f6b66;
    margin: 0px 0px -35px 20px;
    text-shadow: 1px 1px 0px #ffffff;
}/*

*/#text i{font-style: italic; opacity: 0.9; color:#9b705a;}/*
*/#text b{font-weight: bold; opacity: 0.8; color:#ba8f79;}/*
*/#text u{text-decoration: underline; opacity: 0.9; color:#986e23;}/*

*/#endtitel{    
    width: 500px;
    text-align: right;
    font-family: 'Bad Script';
    font-size: 20px;
    letter-spacing: -1px;
    color: #77694ac9;
    margin-top: 15px;
    margin-bottom: 25px;
    text-shadow: 1px 1px 0px #ffffff;
}/*

*/#body{
    width: 580px;
    position: relative;
    margin: 0px 0px 0px 50px;
    background: url(https://forumupload.ru/uploads/0014/d6/06/2/320722.jpg) center repeat-y;
    opacity: 0.8;
}/*

*/#coffee{
    width: 200px;
    position: absolute;
    opacity: 0.3;
    margin: 60px 0px 0px 50px;
}/*
*/#coffee1{
   width: 200px;
    position: absolute;
    opacity: 0.2;
    margin: -10px 0px 50px 180px;
}/*
*/#coffee2{
    width: 200px;
    position: absolute;
    opacity: 0.1;
    margin: -10px 0px 50px 350px;
}/*
*/#coffee3{
        width: 200px;
    position: absolute;
    opacity: 0.3;
    margin: -70px 0px 50px 0px;
}/*
*/#shtamp{
      width: 200px;
    position: absolute;
    opacity: 0.7;
    margin: -50px 0px 0px -70px;
}/*
*/#flower{
      width: 200px;
    position: absolute;
    opacity: 0.8;
    margin: -50px 0px 0px 200px;
}/*
*/</style>




<div id="body">
<div id="data">Англия, 19 октября 1976</div>
<div id="coffee1"><img src="https://forumupload.ru/uploads/001b/9d/5d/332/889613.png"></div>
<div id="titel">Марселин, </div>
<div id="text"> 
<p>оправдания ни к чему, к этому году наших жизней я понял, что вряд-ли мы когда-то действительно потеряемся, ведь было уже так много возможностей это сделать. хорошо, что ты ответила, значит тебе лучше. я совру, если скажу, что считал дни, чтобы освободить свой склад от твоих вещей, но отправляю и в этот раз часть нажитого тобой. на всякий случай я сформировал тебе тут полку в своем шкафу и оставлю одну коробку тут, если приедешь не придется начинать с нуля. </p><p>хотя я не хотел бы чтобы ты возвращалась в англию.</p><p>
</p><p>когда-то я почти в таком же состоянии приехал в твой лес, пускай мой отец умер рано, но я словно жил не с его призраком, а прямо в его оболочке для всей своей родни. тогда мне казалось что там, в темных лабораториях и зельях, в пути по которому еще не нужно идти чистокровному, лежит моё счастье. но это тоже ложь. на этом пути нет счастья.</p><p> принцесса, поделюсь наблюдениями. счастье и жизнь, не в определенном месте и не спустя определенное время, а в людях. надеюсь, что у тебя займет не так много времени это понять, как у меня. ты всегда была умнее.</p><p> тешу себя мыслью, что по крайней мере я умнее <i>твоего флинта.</i></p><p>ничего нового и выдающегося. после работы с бэлби я все еще изучаю что полезного можно получить от волчьего противоядия и, может быть, его доработать. обновил в лавке много всего, сделал ремонт, на деньги от сотрудничества с дамоклом. скучно. ничего важного, но спасибо, что спросила.</p><p>знаешь, французский для меня из любых уст звучит твоим голосом. наверное это из-за тех наших уроков. </p><p>признавайся, сколько заноз получила освобождая дерево от подпорок?</p>
<p>п.с. это тот самый колдограф? сделаешь фото дерева твоего отца?</p>
<div id="endtitel">Ю</div>
</div>
</div>