Код:

[*code]<*!--HTML--><link rel="stylesheet" type="text/css" href="https://www.dropbox.com/s/bb2wd560axy4fn2/queenbee%20%281%29.css?dl=1">

<style>
.lorde-back { width: 500px; height:500px; overflow:hidden; background-color:#785c37;  transition-duration: 0.6s;  -moz-transition-duration: 0.6s;  -webkit-transition-duration: 0.6s;  -o-transition-duration: 0.6s; }
.lorde-back:hover .lorde-image {  transition-duration: 0.6s;  -moz-transition-duration: 0.6s;  -webkit-transition-duration: 0.6s;  -o-transition-duration: 0.6s; margin-top:500px; }

.lorde-image { width: 450px; height:460px; padding:25px; background-image:url(http://placehold.it/500x460);  transition-duration: 0.6s;  -moz-transition-duration: 0.6s;  -webkit-transition-duration: 0.6s;  -o-transition-duration: 0.6s; }

.lorde-inner{ background-color:#af997b; width: 450px; height:450px; padding:25px; transition-duration: 0.6s;  -moz-transition-duration: 0.6s;  -webkit-transition-duration: 0.6s;  -o-transition-duration: 0.6s;  }
.lorde-back:hover .lorde-inner { margin-top:-1010px; }

.lorde-triangle { width: 0px; height: 0px; border-style: solid; border-width: 25px 25px 0 25px; border-color: #af997b transparent transparent transparent;  transition-duration: 0.6s;  -moz-transition-duration: 0.6s;  -webkit-transition-duration: 0.6s;  -o-transition-duration: 0.6s;  }

.lorde-name { width:200px; padding:10px; line-height:100%; font-family:times; font-size:12px; letter-spacing:2px; font-style:italic; color:#31220d; background-color:#af997b;}

.lorde-back:hover .lorde-triangle { border-style: solid; border-width: 0px 0px 0 0px; border-color: #af997b transparent transparent transparent; }

.lorde-title { font-family:times; font-style:italic; font-size:25px; letter-spacing:3px;}
.lorde-subtitle { font-family:calibri; font-size:8px; letter-spacing:2px; text-transform:uppercase; padding-top:3px; }
.lorde-simb { width:100px; padding:5px; border:1px solid #785c37; }
.lorde-text { font-family:calibri; line-height:99%; text-transform:none; font-size: 14px; text-align:justify; width:300px; height:220px; overflow:auto; padding-left:5px; padding-right:5px;}
.lorde-outer { width:400px; height:250px; border-bottom:15px solid #785c37; }
.lorde-text::-webkit-scrollbar { width: 5px; }
.lorde-text::-webkit-scrollbar-track { background-color:#cccccc; }
.lorde-text::-webkit-scrollbar-thumb { background-color:#785c37; }
.codesbymerc {  font-family:calibri; font-size:10px;  color:#b6a589; }
.codesbymerc a {  text-decoration:none; margin-top:-15px; }
</style>

<center><div class="lorde-back">
<div class="lorde-name">I need you</div>
<div class="lorde-triangle"></div>
<!-- ЗДЕСЬ ВАШЕ ФОТО 500х460 -->
<div class="lorde-image" style="background-image:url((http://placehold.it/500x460));"></div>
<div class="lorde-inner">
<div class="lorde-title">пишем, в ком нуждаемся</div>
<div class="lorde-subtitle">красивая цитата</div>
<div style="padding-top:5px;"></div><center>
<table><tr vAlign="top">
<!-- ЗДЕСЬ ВАШЕ ФОТО 100х100 -->
<td><div class="lorde-simb"><img src="http://placehold.it/100x100"></div></td>
<td><div style="padding-left:10px"></div><div class="lorde-simb"><img src="http://placehold.it/100x100"></div></td>
<td><div style="padding-left:10px"></div><div class="lorde-simb"><img src="http://placehold.it/100x100"></div></td></tr></table></center>

<center><div class="lorde-outer"><div style="padding-top:10px;"></div>
<div class="lorde-text">

<!-- <i></i> курсив, <b></b> жирный текст, <br></br> новая строка, <s></s> зачёркнутый текст -->

<center><br><b>Возраст:</b> пишем здесь. 
<br><b>Профессия:</b> пишем здесь. 
<br><b>Ориентация:</b> пишем здесь. 
</center>

<br><center><b>О персонаже</b> 
<br> пишем здесь.
</center>

<br><center><b>Отношения</b> 
<br>пишем здесь. 
</center>

<br><center><b>Связь</b> 
<br>пишем здесь. 
</center>

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

</div>
</div><div class="codesbymerc"><a href="http://athousandfireflies.jcink.net/index.php?showuser=18"><font style="text-transform:uppercase; font-family:calibri; font-size:10px; color:#b6a589;">. . .</a></div></center>[*/code]