<!--HTML-->
<center>
<div class="lap"><div class="lap1">first m. last<div class="lap12">played by alias</div></div>
<div class="lap2"><div class="lap21"><div class="lap22">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id diam a sapien laoreet mattis. Nunc nec lacus id ligula dignissim laoreet. This is bold. Nunc et ante ut arcu mattis tempus nec sit amet lectus. Proin sodales elementum purus, vitae efficitur enim varius quis. Donec a augue tempor metus hendrerit euismod. Proin posuere dolor at ornare pretium. Cras tellus dui, ullamcorper a ipsum quis, semper varius dui. Phasellus id dignissim tellus, ac consectetur nisi. In velit enim, vulputate tristique velit sed, feugiat sagittis mi. Aenean accumsan tristique ligula at vestibulum. Integer non interdum dui, in pharetra libero. Nunc vehicula placerat eros, id scelerisque ante vestibulum quis. Praesent vitae dolor et magna lobortis pellentesque ac ac tortor.
<p>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse ac magna nec sapien varius interdum vel ultricies nisi. This is italic. Aenean sed libero id dui convallis pharetra. Ut quis dignissim justo. Duis accumsan, sapien a vehicula malesuada, mauris urna rhoncus lorem, vitae porta lacus lorem nec turpis. Nunc eget quam at lacus fringilla vulputate. Nam convallis justo lectus, a efficitur massa tempor in. Proin imperdiet rhoncus hendrerit. In sit amet malesuada urna. Aenean vel faucibus eros, et faucibus lectus. Vivamus ligula ligula, interdum in mollis eget, aliquet id libero.
<p>
Maecenas commodo arcu a urna aliquam, feugiat bibendum arcu iaculis. Vivamus aliquet ultrices risus, quis lacinia tortor congue eu. Integer fermentum tristique tristique. Donec posuere venenatis justo, et eleifend sapien auctor vitae. Nam ornare ante arcu, eget fringilla lorem volutpat at. Donec nec neque feugiat, tempus arcu id, convallis velit. Vestibulum quis ante fermentum, cursus ligula in, laoreet turpis. Maecenas varius eros vitae lorem blandit ultricies vel eget magna. Fusce nec tortor malesuada, lobortis ligula at, dignissim lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a tempus elit, non commodo ligula. Praesent quam justo, ultricies eget dolor ac, vehicula vestibulum urna. </div></div></div>
<div class="lap3"><div class="lap31">stats</div><div class="lap32"><div class="lap33">
<div class="lapstat">age</div>
<div class="lapstat">birthday</div>
<div class="lapstat">group</div>
<div class="lapstat">face claim</div>
<div class="lapstat">trait</div>
<div class="lapstat">trait</div>
<div class="lapstat">trait</div>
</div></div></div>
<div class="lap4"></div>
</div>
</center>
<style type="text/css">
.lap {
    width: 450px;
    height: 550px;
    background-image: url(http://i60.tinypic.com/f2qg9.png)
    }

.lap1 {
    width: 450px;
    text-align: center;
    height: 100px;
    font-family: oswald;
    line-height: 100px;
    color: #efefef;
    font-size: 60px;
    background-color: #222;
    text-transform: uppercase;
    position: relative
    }

.lap12 {
    width: 450px;
    background-color: #222;
    height: 30px;
    line-height: 30px;
    font-family: oswald;
    font-weight: 300;
    color: #f2f2f2;
    text-align: center;
    text-transform: uppercase;
    position: absolute;
    top: 35px;
    left: 0;
    font-size: 14px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    -webkit-transition: 1s ease-in-out;
    transition: 1s ease-in-out
    }

.lap1:hover .lap12 {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -moz-transition: 0.7s ease-in-out;
    -o-transition: 0.7s ease-in-out;
    -webkit-transition: 0.7s ease-in-out;
    transition: 0.7s ease-in-out
    }

.lap2 {
    width: 450px;
    height: 300px;
    background-image: url(http://placehold.it/450x300);
    position: relative
    }

.lap21 {
    width: 310px;
    height: 160px;
    padding: 20px;
    background-color: #fafafa;
    position: relative;
    top: 50px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    -webkit-transition: 1s ease-in-out;
    transition: 1s ease-in-out
    }

.lap22 {
    width: 310px;
    height: 160px;
    padding: 0 20px;
    overflow: auto;
    position: relative;
    left: -20px;
    text-align: justify;
    font-family: tahoma;
    font-size: 11px;
    line-height: 100%;
    color: #222
    }

.lap22 p:last-child {
    margin-bottom: 0
    }

.lap2:hover .lap21 {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    -webkit-transition: 1s ease-in-out;
    transition: 1s ease-in-out
    }

.lap3 {
    width: 205px;
    background-color: #222;
    height: 130px;
    position: relative;
    float: left;
    overflow: hidden;
    padding: 10px
    }

.lap31 {
    width: 205px;
    line-height: 130px;
    font-family: oswald;
    font-size: 45px;
    text-transform: uppercase;
    text-align: center;
    color: #efefef;
    position: relative;
    left: 0;
    top: 0;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    -webkit-transition: 1s ease-in-out;
    transition: 1s ease-in-out;

    }

.lap32 {
    padding: 10px;
    width: 185px;
    height: 110px;
    position: absolute;
    top: 250px;
    left: 10px;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    -webkit-transition: 1s ease-in-out;
    transition: 1s ease-in-out;

    }

.lap3:hover .lap31 {
    top: -150px;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    -webkit-transition: 1s ease-in-out;
    transition: 1s ease-in-out
    }

.lap3:hover .lap32 {
    top: 10px;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    -webkit-transition: 1s ease-in-out;
    transition: 1s ease-in-out
    }

.lap33 {
    width: 185px;
    height: 110px;
    padding: 0 10px;
    position: relative;
    left: -10px;
    overflow: auto;
    line-height: 100%
    }

.lapstat {
    width: 165px;
    padding: 0 10px;
    text-align: center;
    background-color: #f2f2f2;
    color: #333;
    height: 25px;
    line-height: 25px;
    font-family: oswald;
    font-weight: 300;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 3px
    }

.lapstat:last-child {
    margin-bottom: 0
    }

.lap4 {
    width: 215px;
    background-image: url(http://placehold.it/215x130);
    height: 130px;
    border: 10px solid #222;
    border-left: none;
    position: relative;
    float: left
    }
</style>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>

<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>
<center>
<div style="width:300px; height:40px; line-height:40px; font-family:oswald; font-weight:300; background-color:#121212; color:#fefefe;font-size:22px; text-transform:uppercase; text-shadow:1px 1px 0 #121212;">03 black & white</div></center>


<link href='http://fonts.googleapis.com/css?family=Dosis:400,500' rel='stylesheet' type='text/css'>
<center>
<div style="width:350px; height:200px; background-color:#222;position:relative;">
<div style="width:350px; height:2px; background-color:#fff; position:absolute; top:98px;"></div>
<div class="wellplayed"></div>
<div style="font-family:dosis; text-transform:uppercase; color:#eee; font-size:32px; width:300px; height:40px; line-height:40px;position:absolute; right:20px; text-align:right; top:50px;">username</div>

<div class="formetoo"><a href=“#”>link</a> <a href=“#”>link</a> <a href=“#”>link</a> <a href=“#”>link</a> <a href=“#”>link</a></div>

</div>
</center>
<style type="text/css">
.formetoo { font-family:dosis; text-transform:uppercase; color:#eee; font-size:11px; width:200px; height:40px; line-height:40px;position:absolute; right:20px; top:100px; }
.formetoo a { color:#ddd; margin: 0 5px; }
.wellplayed { position:relative; border-radius:100%; -moz-border-radius:100%; -webkit-border-radius:100%; background-image:url(http://media.tumblr.com/72fb24c755e9386f13dbbdb85eeb4e2a/tumblr_inline_nkepme3qz61szaa83.gif); width:100px; height:100px; background-size:155px auto; border:5px solid #f0f0f0; position:absolute; top:45px; left:20px; background-position:center center;  }

</style>