Relación Base

Los colores son 100% cambiables

Código:

<style type="text/css">div::-webkit-scrollbar { height: 32px; width: 5px; background: #d6d6d6; } div::-webkit-scrollbar-thumb { background: #000000; } div::-webkit-scrollbar-track { background:#fff; } div::-webkit-scrollbar-button { background:#ffffff; } </style>
<style type="text/css" > .oppa { background: #fff; color: #111; opacity: 0.0;transition-duration: 0.9s;-moz-transition-duration: 0.9s; -webkit-transition-duration: 0.9s; -o-transition-duration: 0.9s; text-align: justify; width: 185px; height: 300px; letter-spacing: 0px; overflow: auto; text-transform: none;} .oppa:hover { opacity: .9}</style><center><div style="width:550px; height:55px; background-color:#000; font-family: calibri; font-size: 15px; color: #fff; text-align: center; text-transform: uppercase;  letter-spacing: 1px; text-indent: 0px; text-shadow: 1px 1px 0px #222">
|| So here's to drinks in the dark at the end of my rope  || </div><table style=" width: 530px; background: #fff;"><tr><td width="350px" valign="top"><div style="background-color: white; height: 300px; width: 360px; overflow: auto;"><div align="justify" style="font-family: tahoma; font-size: 10px; line-height: 10px; color: black; padding: 7px;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum scelerisque suscipit elit, at cursus sapien consectetur nec. Nam ultricies purus sapien. Integer gravida commodo nibh, vel gravida nisl congue eu. Quisque ullamcorper, odio id imperdiet elementum, ipsum arcu suscipit lacus, vel iaculis elit neque tincidunt neque. Aliquam urna quam, viverra non semper in, pharetra eu risus. Aliquam ipsum urna, luctus id vestibulum quis, accumsan malesuada sapien. Etiam at lectus non felis euismod viverra id eget nibh. Cras vestibulum tellus et ante commodo tristique. Vestibulum at sem vel libero hendrerit tincidunt nec sed elit. Integer aliquam ipsum non massa luctus ut porttitor arcu commodo. Maecenas molestie velit vel turpis placerat vulputate vel vitae tellus. Nunc venenatis odio vitae elit aliquam in vulputate dui adipiscing. Integer tempus eros ut nibh hendrerit imperdiet. Sed ultricies bibendum eros blandit volutpat. Suspendisse risus odio, dapibus eu tincidunt non, volutpat rutrum nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Vivamus non nibh quis orci elementum varius. Duis in dolor enim. Mauris mollis auctor congue. Proin eget sollicitudin nunc. Maecenas rhoncus laoreet neque, sed faucibus eros convallis et. Donec nec elit nec neque dignissim condimentum. Aliquam vitae arcu eu erat aliquet sollicitudin. Maecenas id risus magna, id euismod dolor. Nam rutrum orci a augue auctor a lacinia nibh condimentum. Fusce sapien orci, fermentum id fermentum sed, dignissim nec ante. Ut laoreet semper magna id fringilla.

Sed fringilla sapien commodo eros dictum porttitor. Duis vitae urna quis enim semper vulputate. Pellentesque lectus massa, imperdiet vel tempor ut, ullamcorper vulputate libero. Suspendisse condimentum felis ut lorem laoreet malesuada. Ut scelerisque quam vitae ipsum feugiat aliquet imperdiet mi porttitor. Vivamus in diam mauris, quis rhoncus magna. Quisque faucibus pretium faucibus. Sed consequat tincidunt ipsum at feugiat. Sed vel suscipit nunc. Phasellus auctor elit sit amet enim eleifend eleifend. Curabitur ut ipsum nibh, quis mattis felis. Nunc accumsan imperdiet mattis. In venenatis rutrum mauris ut cursus. Aenean nulla ante, volutpat eu adipiscing vitae, porta quis elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Maecenas nec velit ipsum. Integer elementum accumsan massa vitae consequat. Praesent non venenatis orci. Sed eget neque quam, ut tincidunt felis. Nunc et orci a neque vestibulum tincidunt. Mauris placerat dignissim leo. Sed mattis pellentesque sapien sed sollicitudin. Nam tincidunt vulputate ipsum vitae tempus. Mauris dignissim volutpat interdum. Maecenas rhoncus iaculis tellus, eu porttitor turpis condimentum id. Praesent vestibulum viverra felis quis eleifend. Sed ultrices ante eu nisi varius rutrum. Mauris lobortis ipsum et odio placerat non imperdiet lacus vulputate. Integer a quam mi. Sed vulputate rhoncus tempor.

Sed a dui orci, a pretium sapien. Praesent et ligula non erat rutrum dapibus. Curabitur et orci augue. Pellentesque ullamcorper ullamcorper diam, a varius diam rutrum sed. Sed et tellus turpis. Suspendisse risus diam, tempor rhoncus varius in, fringilla quis ante. Sed dignissim pulvinar dui. Duis volutpat, lacus in porttitor imperdiet, purus nunc fermentum nibh, a pulvinar magna metus non libero. Aenean in nibh leo. Morbi id eros nisl. Nullam luctus, nunc eu porta accumsan, elit massa rhoncus ligula, et pretium leo turpis iaculis lorem.

</div></div></td><td height="300px" width="185px"><div style="background-image:url(http://25.media.tumblr.com/ac8bef1b42f1ecd35dcd22b902fbf585/tumblr_mmdy8eaeyW1s8iiapo1_500.jpg); height: 300px; width: 185px;"><div class="oppa">


<center><div style="width:150px; background-color:#000; font-family: calibri; font-size: 10px; color: #fff; text-align: center; text-transform: uppercase;  letter-spacing: 1px; text-indent: 0px; text-shadow: 1px 1px 0px #222"> NOMBRE Y APELLIDO </div>
<div style="width:150px; background-color:#000; font-family: calibri; font-size: 10px; color: #fff; text-align: center; text-transform: uppercase;  letter-spacing: 1px; text-indent: 0px; text-shadow: 1px 1px 0px #222"> EDAD</div>
<div style="width:150px; background-color:#000; font-family: calibri; font-size: 10px; color: #fff; text-align: center; text-transform: uppercase;  letter-spacing: 1px; text-indent: 0px; text-shadow: 1px 1px 0px #222"> ORIENTACIÓN SEXUAL </div>
<div style="width:150px; background-color:#000; font-family: calibri; font-size: 10px; color: #fff; text-align: center; text-transform: uppercase;  letter-spacing: 1px; text-indent: 0px; text-shadow: 1px 1px 0px #222"> TRABAJO </div>
<div style="width:150px; background-color:#000; font-family: calibri; font-size: 10px; color: #fff; text-align: center; text-transform: uppercase;  letter-spacing: 1px; text-indent: 0px; text-shadow: 1px 1px 0px #222"> GRUPO  </div>
</center>
</div></td></tr></table><div style="width:550px; height:5px; background-color:#000;"></div>
<table style=" width: 550px; background: #fff; margin-top: -55px;"><tr><td width="250px"><div style="background-color: white; height: 150px; width: 272px; overflow: auto;"><div align="center" style="font-family: tahoma; font-size: 10px; line-height: 10px; color: black; padding: 7px;">
[b]MEJORES AMIGOS[/b]
[b]BUENOS AMIGOS[/b]
[b]AMIGOS[/b]
[b]CONFIANZA[/b]
[b]CONFIDENTES[/b]
[b]ADMIRACIÓN[/b]
[b]PROTEGIDOS[/b]
[b]PROTECTORES[/b]
[b]RESPETO[/b]
[b]CONSENTIDOS[/b]
[b]CONSENTIDORES[/b]
[b]ALIADOS[/b]
[b]TRATO CORDIAL[/b]
[b]CONOCIDOS[/b]
</div></div><div style="width:270px; height: 20px; background-color:#000; font-family: calibri; font-size: 10px; color: #fff; text-align: center; text-transform: uppercase;  letter-spacing: 1px; text-indent: 0px; text-shadow: 1px 1px 0px #222"> Amistades </div></td><td width="272px"><div style="background-color: white; height: 150px; width: 272px; overflow: auto;"><div align="center" style="font-family: tahoma; font-size: 10px; line-height: 10px; color: black; padding: 7px;">

[b]ATRACCIÓN[/b]
[b]CURIOSIDAD[/b]
[b]INTERÉS[/b]
[b]COQUETEO[/b]
[b]CAPRICHO[/b]
[b]OBSESIÓN[/b]
[b]ME GUSTAS[/b]
[b]AMIGOS CON DERECHO[/b]
[b]TENSIÓN SEXUAL[/b]
[b]+ 18[/b]
[b]ROLLO DE UNA NOCHE[/b]
[b]AMOR[/b]
[b]AMOR PLATÓNICO[/b]
[b]PAREJA[/b]
[b]EX-PAREJA[/b]
[b]DESLIZ[/b]

</div></div><div style="width:270px; height: 20px; background-color:#000; font-family: calibri; font-size: 10px; color: #fff; text-align: center; text-transform: uppercase;  letter-spacing: 1px; text-indent: 0px; text-shadow: 1px 1px 0px #222"> Amor </div></td>
<tr><td width="250px"><div style="background-color: white; height: 150px; width: 272px; overflow: auto;"><div align="center" style="font-family: tahoma; font-size: 10px; line-height: 10px; color: black; padding: 7px;">

[b]PIQUES[/b]
[b]INDIFERENCIA[/b]
[b]DESCONFIANZA[/b]
[b]INCORDIO[/b]
[b]GENTE MOLESTA[/b]
[b]TRATO HOSTIL[/b]
[b]OBJETIVOS[/b]
[b]RENCOR[/b]
[b]ENVIDIA[/b]
[b]ENEMISTAD[/b]
[b]EX-AMIGOS[/b]
[b]ODIO[/b]
[b]ASCO[/b]
[b]AMOR/ODIO[/b]

</div></div><div style="width:270px; height: 20px; background-color:#000; font-family: calibri; font-size: 10px; color: #fff; text-align: center; text-transform: uppercase;  letter-spacing: 1px; text-indent: 0px; text-shadow: 1px 1px 0px #222"> Hostil </div></td><td width="250px"> <center><div style="width: 150px; padding-left: 10px; text-align: left; font-size: 30px; font-family: verdana; line-height: 100%; color: #000; margin-bottom: -5px">▲</div><div style="width: 160px; padding: 10px; background-color: #000; height: 70px; -moz-border-radius: 10px; -webkit-border-radius: 10px -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px"><div align="justify" style="font-family: tahoma; font-size: 10px; line-height: 10px; color: white; padding: 5px;">  MENSAJE A GUSTO
</div>  </div></center></td>
</table><div style="width:550px; background-color:#000; color: #fff;">[size=9]
<a href="http://www.oursourcecode.net/u1961">[color=white]Thanks Miko, u're osom.[/color]</a>[/size]

</div></center>