Код:
<dohtml> <link href='http://fonts.googleapis.com/css?family=BenchNine|Oswald|Playball' rel='stylesheet' type='text/css'>
<center> <style type='text/css'>
.charming { opacity: 0; width: 230px; height: 315px; transition-duration: 0.5s; -moz-transition-duration: 0.5s; -webkit-transition-duration: 0.5s; -o-transition-duration: 0.5s; }
.charming:hover { opacity: 3; -moz-transition-duration: 0.5s; -webkit-transition-duration: 0.5s; -o-transition-duration: 0.5s; }
.info { width: 200px; height: 25px; background-color: #3B3B3B; color: #fff; font-family: benchnine; font-size: 19px; text-transform: uppercase; line-height: 8pt; text-align: center; letter-spacing: 1px; padding-top: 15px; }
.info:hover {color: #000; -webkit-transition: 0.5s ease-in;-moz-transition: 0.5s ease-in;-o-transition: 0.5s ease-in; padding-left: 30px; width: 170px;}
.info2 {width: 190px; height: 13px; background-color: #c3eae4; font-family: georgia; font-size: 9px; text-transform: lowercase; font-style: italic; padding-top: 4px; color: #fff; padding-left: 10px; letter-spacing: 1px; }
</style>
<div style="width: 480px; background-color: #f1f1f1; padding: 15 10 15 10; border: 15px solid #51c2b3;">
<div style="width: 470px; height: 45px; background-color: #51c2b3; font-family: oswald; font-size: 35px; font-style: none; letter-spacing: 1px; padding-top: 10px; line-height: 100%; text-align: center; color: #fff; text-shadow: 2px 2px 0px #000; text-transform: uppercase;">
first last name
</div>
<div style="width: 470px; height: 10px; background-color: #c3eae4;"></div>
<table cellspacing="0" cellpadding="0">
<td>
<div style="width: 230px; height: 315px; background-image: url(http://placehold.it/230x315);">
<div class='charming'>
<div align='center'>
<div style="padding-top: 10px;">
<table cellspacing="0"cellpadding="0"><td>
<div class='info' style="margin-bottom: 2px;">
name here
</div>
<div class='info' style="margin-bottom: 2px;">
Park Ji Yeon [Пак Джи Ен]
</div>
<div class='info' style="margin-bottom: 2px;">
23 года
</div>
<div class='info' style="margin-bottom: 2px;">
occupation
</div>
<div class='info' style="margin-bottom: 2px;">
member group here
</div>
<div class='info' style="margin-bottom: 2px;">
face claim here
</div>
<div class='info' style="margin-bottom: 2px;">
alias
</div>
</td></table></div></div></div></div>
<div style="width: 210px; height: 58px; background-color: #51c2b3; text-align: justify; font-family: georgia; color: #fff; line-height: 100%; padding-top: 12px; padding-left: 20px;">[size=8]<i>"</i>[/size] <div style="width: 180px; text-align: justify; padding-left: 10px; margin-top: -12px; font-style: italic;">
couple of lyrics here, woo! couple of lyrics here, woo! couple of lyrics here, woo!
</div></div><td>
<div style="width: 240px; height: 385px; background-color: #fff; overflow: auto;"><div style="width: 210px; text-align: justify; padding: 5px; font-family: arial; font-size: 9px; letter-spacing: 0px; line-height: 100%;">
app goes here.
</div></div></td></table>
<div style="width: 470px; height: 10px; background-color: #c3eae4;"></div>
</div>
</center>
</dohtml>