Код:
<!--HTML-->
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<center>
    <div class="themedes">
<div class="themetitle01">citizens
</div>
        <div class="contenu">
            <div style="text-align: left; font-family: 'Comfortaa', cursive;font-size:11px; padding-top: 20px;line-height: 100%;"><center>
<img src="https://static.tumblr.com/165d09eb9f8e98e294d0e54d64867d48/euvexeq/8vlp2cxjo/tumblr_static_tumblr_static_2jfuylxnw6skc008w0k48c048_640.gif"><br><p>
Обычные жители Сеула. Плохие они или хорошие, у каждого своя история, своя дорога и скелеты в шкафу. Не бойтесь быть обычными людьми, это совсем не скучно. 
</center> <br>
<br>
<br>
        <center> <div style="align-content: center;" ></div></center>
<br>
            </div>
        </div>
</center>
Код:
<!--HTML--><link href="https://fonts.googleapis.com/css?family=Roboto:400|Calibri|Roboto+Condensed:300,700|Inconsolata" rel="stylesheet">
<div class="jardespacito">
 <div class="jardespacitoc">
   <div class="jardespaciton"><font style="color:#ffcc66">Seo</font> <b>Hwi Young</b></div>
   <div class="jardespacitoimg">
     <img src="http://funkyimg.com/i/2KhnJ.png">
   </div>
   <div class="jardespacitod1">28</div>
   <div class="jardespacitod2">Мирные жители</div>
   <div class="jardespacitod3">Школьный учитель</div>
   <div class="jardespacitob"></div>
   <div class="jardespacitotb">
     <div class="jardespacitoquote">"teach me"</div>
     <div class="jardespacitotext">
       <div class="jardespacitosub">Коротко о главном</div> 
Хвиён всегда жил по правилам. Сначала нужно пойти в садик, не баловаться, потом хорошо учиться в школе, не огорчать родителей. Затем поступить в институт и получить хорошую профессию. Он всегда считал что движется в правильном направлении. Учеба давно закончена, но школьных ворот он так и не покинул, наблюдая как другие дети растут и как птицы желают поскорее улететь из родительского гнезда. Ему было 22, когда его матери не стало из-за этой проклятой эпидемии. Он тогда проходил учебную практику и оказался оторван от родительского дома. Казалось бы, прошло уже столько лет, но он все еще не может простить государству произошедшее, разжигая огонь ненависти в лице других жертв.

<div class="jardespacitosub">TAGS</div>
#   #
     </div>
   </div>
 </div>
 <div class="jardespacitoc">
   <div class="jardespaciton"><font style="color:#ffcc66">Go</font> <b>Taeseob</b></div>
   <div class="jardespacitoimg">
     <img src="http://funkyimg.com/i/2KhnH.png">
   </div>
   <div class="jardespacitod1">27</div>
   <div class="jardespacitod2">Мирные жители</div>
   <div class="jardespacitod3">Разработчик игр, геймер под ником Holland</div>
   <div class="jardespacitob"></div>
   <div class="jardespacitotb">
     <div class="jardespacitoquote">"blue love"</div>
     <div class="jardespacitotext">
       <div class="jardespacitosub">коротко о главном</div> 
Холланд родился в Пусане. В детстве Тэсоб не отличался от других детей. Разве лишь тем, что был спокойный, улыбчивый, но молчаливый. В средней школе все изменилось. Он еще больше отстранился от своих сверстников, днями и ночами проводя возле компьютера, играя в онлайн игры. Там он познакомился с одним игроком. Они много общались вне интернета, пару раз встретились и тогда Холланд понял, что отличается от других. Он влюбился в мальчика. Это было тяжело держать в себе, он поделился этим секретом со своим школьным другом, но тот лишь посмеялся над ним и вызвал волну издевательств одноклассников. Тэ замкнулся в себе, став прогуливать школу, вскоре о наклонностях сына стало известно и родителям. Отец тогда сильно избил его. В возрасте 17 лет, парень покинул родной город. Его интернет-друг был старше Тэсоба на 4 года, но полностью взял на себя ответственность. Помог ему освоить программирование и влил в свою среду. Они разрабатывали новые компьютерные игры. Теперь прошлое миновало и жизнь Холланда наконец потекла в правильном русле.
<div class="jardespacitosub"> tags</div>
# 
     </div>
   </div>
 </div>
 <div class="jardespacitoc">
   <div class="jardespaciton"><font style="color:#ffcc66">kim</font> <b>himchan</b></div>
   <div class="jardespacitoimg">
     <img src="http://pm1.narvii.com/6589/86edafc4fe094f6898fdf5c58ed4c95c7dde8de0_00.jpg">
   </div>
   <div class="jardespacitod1">26-28</div>
   <div class="jardespacitod2">Мирные жители</div>
   <div class="jardespacitod3">бизнесмен, владелец подпольного казино</div>
   <div class="jardespacitob"></div>
   <div class="jardespacitotb">
     <div class="jardespacitoquote">"life in da trash"</div>
     <div class="jardespacitotext">
       <div class="jardespacitosub">Коротко о главном</div>
Мало кто знает настоящего Химчана. За роскошью, дорогим костюмом и деньгами кроется ложь, бедность и преступность. Ким вырос без родителей, в семье мафии, которые владели китайским рестораном чтобы прикрыть свой настоящий род деятельности: подпольное казино, выколачивание долгов и другие грязные дела. Родная мать Химчана оставила его именно в этой забегаловке есть Чачжанмён. Ему было 5 лет, когда она ушла и не вернулась, даже не заплатив.  Заплатил уже он, отдав свою душу, год за годом обрастая грязью нелегального бизнеса. Так он стал холодным и отчужденным, смывая кровь с рук без презрения и обещая себе что однажды он и его "братья" заживут нормальной жизнью
<div class="jardespacitosub">tags</div>
# #
     </div>
   </div>
 </div>
 <div class="jardespacitoc">
   <div class="jardespaciton"><font style="color:#ffcc66">Choi</font><b>Joon Hong</b></div>
   <div class="jardespacitoimg">
     <img src="http://funkyimg.com/i/2KhnG.png">
   </div>
   <div class="jardespacitod1">22</div>
   <div class="jardespacitod2">Мирные жители</div>
   <div class="jardespacitod3">аферист</div>
   <div class="jardespacitob"></div>
   <div class="jardespacitotb">
     <div class="jardespacitoquote">"bright mind"</div>
     <div class="jardespacitotext">
       <div class="jardespacitosub">Коротко о главном</div> 
Хон детдомовец, поэтому встреча с Химчаном сильно повлияла на его жизнь. Наверное тот вспомнил свое тяжелое детство, поэтому практически стал ему старшим братом и спас от смерти семнадцатилетнего мальчишку. Он нашел его забитого до полусмерти и притащил в свой ресторан. Там у Зело началась совсем новая жизнь. У мальчишки был потенциал. "Светлый ум" и прекрасные актерские навыки позволили проворачивать те еще аферы, разводя глупцов на деньги. У Хона очень обостренное чувство преданности, поэтому за свою "названную семью", он готов на все.  Пожалуй, порой он слишком самоотвержен и смел, хотя внутри скрывается ранимый маленький мальчик.
<div class="jardespacitosub">tags</div>
# #
     </div>
   </div>
 </div>

 


</div>

 <div class="jardespacitocred"><a href="http://pestilence.ru/viewtopic.php?id=42&p=21#p88787"><b>ЗАБИРАЮ!</b></a></div>

<style>
 .jardespacito {
   width:510px;
   margin:0 auto;
   display:flex;
   flex-wrap:wrap;
   padding:2px;
   background:#111;
 }
 .jardespacitoc {
   width:250px;
   height:350px;
   border:1px solid #111;
   position:relative;
   overflow:hidden;
 }
 .jardespaciton {
   width:320px;
   height:5px;
   padding:15px;
   line-height:100%;
   background:#000;
   font-family:Roboto Condensed;
   font-weight:300;
   font-size:20px;
   color:#666;
   text-transform:uppercase;
   transform:rotate(-90deg);
   position:absolute;
   bottom:157px; left:-157px;
   border-bottom:1px solid #444;
   z-index:5;
 }
 .jardespacito b {
   font-weight:700;
 }
 .jardespacitoimg {
   height:350px;
   position:absolute;
   left:35px; top:0px;
 }
 .jardespacitoimg img{
   height:350px;
 }
 .jardespacitod1 {
   width:130px;
   position:absolute;
   left:-120px; top:10px;
   background:#000;
   padding:5px;
   line-height:100%;
   font-family:Calibri;
   font-size:10px;
   text-transform:uppercase;
   color:#ccc;
   position:absolute;
   letter-spacing:2px;
   text-align:right;
   transition:all 1.7s ease-in-out;
   z-index:4;
 }
 .jardespacitoc:hover .jardespacitod1 {
   left:35px;
   transition:all 1.7s ease-in-out;
 }
 .jardespacitod2 {
   width:170px;
   position:absolute;
   left:-160px; top:30px;
   background:#000;
   padding:5px;
   line-height:100%;
   font-family:Calibri;
   font-size:8px;
   text-transform:uppercase;
   color:#ccc;
   position:absolute;
   letter-spacing:2px;
   text-align:right;
   transition:all 1.7s ease-in-out;
   z-index:4;
 }
 .jardespacitoc:hover .jardespacitod2 {
   left:35px;
   transition:all 1.7s ease-in-out 0.8s;
 }
 .jardespacitod3 {
   width:155px;
   position:absolute;
   left:-145px; top:50px;
   background:#000;
   padding:5px;
   line-height:100%;
   font-family:Calibri;
   font-size:8px;
   text-transform:uppercase;
   color:#ccc;
   position:absolute;
   letter-spacing:2px;
   text-align:right;
   transition:all 1.7s ease-in-out;
   z-index:4;
 }
 .jardespacitoc:hover .jardespacitod3 {
   left:35px;
   transition:all 1.7s ease-in-out 1.5s;
 }
 .jardespacitob {
   width:250px;
   height:350px;
   background:rgba(0,0,0,0.5);
   position:absolute;
   left:0; top:0;
   opacity:0;
   transition:all 2s ease-in-out;
 }
 .jardespacitoc:hover .jardespacitob {
   opacity:1;
   transition:all 5s ease-in-out;
 }
 .jardespacitotb {
   width:195px;
   height:270px;
   background:rgba(0,0,0,0.8);
   position:absolute;
   left:-185px;
   bottom:0px;
   padding:5px;
   line-height:100%;
   transition:all 1.5s ease-in-out;
 }
 .jardespacitoc:hover .jardespacitotb {
   left:35px;
   transition:all 1.5s ease-in-out 2.7s;
 }
 .jardespacitoquote {
   padding:10px;
   font-family:Georgia;
   font-size:9px;
   font-style:italic;
   letter-spacing:2px;
   line-height:100%;
   color:#aaa;
   text-transform:lowercase;
   text-align:center;
 }
 .jardespacitotext {
   width:165px;
   height:220px;
   overflow:auto;
   padding:15px;
   padding-top:0px;
   line-height:12px;
   font-family:Calibri;
   font-size:11px;
   color:#ccc;
   text-align:justify;
 }
 .jardespacitotext::-webkit-scrollbar {width:2px;}
 .jardespacitotext::-webkit-scrollbar-track {background:#333;}
 .jardespacitotext::-webkit-scrollbar-thumb {background:#555;}
 .jardespacitosub {
   padding:5px;
   border-bottom:1px solid #444;
   margin-bottom:5px;
   font-family:Roboto;
   font-size:7px;
   text-align:center;
   letter-spacing:5px;
   text-transform:uppercase;
   margin-top:12px;
 }
 .jardespacitocred {
   font-family:roboto;
   font-size:8px;
   letter-spacing:2px;
   text-transform:uppercase;
   text-align:center;
   color:#ccc;
   margin-top:3px;
 }
 .jardespacitocred a {
   text-decoration:none;
   color:#ccc;
   font-family:Roboto;
   text-align:center;
 }
</style>