<!--HTML-->
<STYLE>
.lorde-back { width: 500px; height:500px; overflow:hidden; background-color:#191919;  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://imgdepo.com/id/i9115210);  transition-duration: 0.6s;  -moz-transition-duration: 0.6s;  -webkit-transition-duration: 0.6s;  -o-transition-duration: 0.6s; }
.lorde-inner{ background-color:#fcfcfc; 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: #d15126 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:#000; background-color:#d15126;}
.lorde-back:hover .lorde-triangle { border-style: solid; border-width: 0px 0px 0 0px; border-color: #d15126 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 #191919; }
.lorde-text { font-family:calibri; line-height:99%; text-transform:lowercase; font-size: 10px; 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 #191919; }
.lorde-text::-webkit-scrollbar { width: 5px; }
.lorde-text::-webkit-scrollbar-track { background-color:#cccccc; }
.lorde-text::-webkit-scrollbar-thumb { background-color:#191919; }
.codesbymerc {  font-family:calibri; font-size:10px;  color:#191919; }
.codesbymerc a {  text-decoration:none; margin-top:-15px; }
</STYLE>

<center><div class="lorde-back">
<div class="lorde-name">заголовочек</div>
<div class="lorde-triangle"></div>
<div class="lorde-image" style="background-image:url((http://imgdepo.com/id/i9115210));"></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">
<td><div class="lorde-simb"><img src="http://imgdepo.com/id/i9115230"></div></td>
<td><div style="padding-left:10px"></div><div class="lorde-simb"><img src="http://imgdepo.com/id/i9115232"></div></td>
<td><div style="padding-left:10px"></div><div class="lorde-simb"><img src="http://imgdepo.com/id/i9115231"></div></td></tr></table></center>

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

</div>
</div><div class="codesbymerc"><a href="http://wecode.jcink.net/index.php?showuser=16">MERC</a></div></center>