Relaciones HTML

por **Admin** Sáb Mar 21, 2015 12:16 am

Nombre Y Apellido

Dato

Psicología

Escribe aquí la psicología de tu personaje :3

Amistades

Amigos de la Infancia

Mejores amigos

Buenos Amigos

Inseparables

Amigos

Amigos secretos

En proceso de Amistad

Conocidos

Aliados

Protegidos

Protectores

Confidentes

Consejeros

Aconsejados

Consentidos

Consentidores

Cariño

Buena influencia

Mala influencia

Buen influenciados

Mal influenciados

Compañeros de fiesta

Compañeros de travesuras

Compañeros de castigos

Compañeros de estudios

Romances

Atracción

Curiosidad

Interés

Obsesión

Coqueteo

Tonterías

Confusión

Amor-odio

Amor

Tensión sexual

Rollos de una noche

Amigos con Derecho

Amantes

{+}18

Ex {+}18

Pareja

Expareja

Propiedades

Odios

Me gusta molestarte

Te gusta molestarme

Trato hostil

Trato hostil ocasional

Desconfianza

Odio

Desprecio

Rencor

Rivales

Envidia

Enemigos

Ex amigos

Nos soportamos

Indiferencia

Compañeros de insultos

Te odio

Me odias

Peleas

Repudios

Vips!

Nombre y Apellido

Nombre y Apellido

Panda World

NOTAS:
-La información está en hover tras cada imágen.
-Para editar las imágenes debes de ir a la parte final del código, pues es ahí donde, entre paréntesis "(" ")" se encuentran las medidas de las imágenes.
-Puedes modificar los colores de la plantilla si gustas.
-No retires el código.

Código:: <div class="caja"><div class="nombre">Nombre Y Apellido</div><div style="border-left: 10px solid #870707; border-right: 10px solid #870707; margin-top: -2px;"> <table><td style="width: 210px;"><div class="wtd"><div class="imagen"></div><div class="datos"><center><br><br><div class="dt1">Dato</div><br><div class="dt2">Dato</div><br><div class="dt3">Dato</div><br><div class="dt4">Dato</div><br><div class="dt5">Dato</div></div></div></td><td style="width: 275px;"><div class="psico"><div style="text-align: center; font-family: shadows into light two; font-size: 32px;">Psicología</div> Escribe aquí la psicología de tu personaje :3 </div></td></table> <center><div style="width: 500px; border-top: dotted 1px #870707;"><table><td><div style="width: 9px;"></div></td><td><div class="relas1"><div class="img1"></div><div class="re1"><div style="font-family: Poiret One; font-size: 14px; text-align: center;">[b]Amistades[/b]</div> Amigos de la Infancia [center]Mejores amigos[/center] [right]Buenos Amigos[/right] Inseparables [center]Amigos[/center] [right]Amigos secretos[/right] En proceso de Amistad [center]Conocidos[/center] [right]Aliados[/right] Protegidos [center]Protectores[/center] [right]Confidentes[/right] Consejeros [center]Aconsejados[/center] [right]Consentidos[/right] Consentidores [center]Cariño[/center] [right]Buena influencia[/right] Mala influencia [center]Buen influenciados[/center] [right]Mal influenciados[/right] Compañeros de fiesta [center]Compañeros de travesuras[/center] [right]Compañeros de castigos[/right] Compañeros de estudios </div></div></td><td><div style="width: 9px;"></div></td><td><div class="relas2"><div class="img2"></div><div class="re2"><div style="font-family: Poiret One; font-size: 14px; text-align: center;">[b]Romances[/b]</div> Atracción [center]Curiosidad[/center] [right]Interés[/right] Obsesión [center]Coqueteo[/center] [right]Tonterías[/right] Confusión [center]Amor-odio[/center] [right]Amor[/right] Tensión sexual [center]Rollos de una noche[/center] [right]Amigos con Derecho[/right] Amantes [center]{+}18[/center] [right]Ex {+}18[/right] Pareja [center]Expareja[/center] [right]Propiedades[/right] </div><br></div><td><div style="width: 9px;"></div></td><td><div class="relas3"><div class="img3"></div><div class="re3"><div style="font-family: Poiret One; font-size: 14px; text-align: center;">[b]Odios[/b]</div> Me gusta molestarte [center]Te gusta molestarme[/center] [right]Trato hostil[/right] Trato hostil ocasional [center]Desconfianza[/center] [right]Odio[/right] Desprecio [center]Rencor[/center] [right]Rivales[/right] Envidia [center]Enemigos[/center] [right]Ex amigos[/right] Nos soportamos [center]Indiferencia[/center] [right]Compañeros de insultos[/right] Te odio [center]Me odias[/center] [right]Peleas[/right] Repudios </div></div></td><td><div style="width: 9px;"></div></td></table> <div class="vips">Vips!<br> <font style="font-family: shadows into light two; font-size: 28px; color: black;">Nombre y Apellido</font> <img src="IMAGEN" width="450px" /><br> <font style="font-family: shadows into light two; font-size: 28px; color: black;">Nombre y Apellido</font> <img src="IMAGEN" width="450px" /> </div></div> </div><div style="width: 520px; background: #870707; height: 30px;"></div></div><div style="width: 520px; text-align: right; font-family: Raleway; color: black; margin: 0 0 auto auto;"><a href=”http://glintz.foroactivo.com/u188 target=”_blank”>Panda World</a></div> <link href='http://fonts.googleapis.com/css?family=Economica|Poiret+One|Shadows+Into+Light+Two|Raleway' rel='stylesheet' type='text/css'><style type="text/css">.caja {width: 520px; background: #F7F6E0; margin: 0 0 auto auto;} .nombre {width: 520px; font-size: 32px; padding-top: 15px; padding-bottom: 15px; color: black; background: #870707; text-align: center; font-family: shadows into light two;} .wtd {width: 200px; height: 300px; margin: 0 0 auto auto;} .wtd .imagen {width: 200px; height: 300px; margin: 0 0 auto auto; background: url(IMAGEN 200x300)} .wtd .datos {width:200px; height: 300px; margin: 0 0 auto auto; margin-top: -300px; opacity: 0;} .wtd:hover .datos {opacity: 1;} .wtd .datos .dt1, .wtd .datos .dt2, .wtd .datos .dt3, .wtd .datos .dt4, .wtd .datos .dt5 {font-family: Economica; color: black; font-size: 16px;} .wtd .datos .dt1 {opacity: 0; margin: 0 0 auto auto; background: #FFDE00; text-align: center; padding: 10px; width: 100px; -webkit-transform: translate(120px,0); -moz-transform: translate(120px,0); -o-transform: translate(120px,0); -ms-transform: translate(120px,0); transition: all 1s ease-in-out;} .wtd .datos .dt2 {opacity: 0; margin: 0 0 auto auto; background: #870707; text-align: center; padding: 10px; width: 100px; margin-left: -77px; -webkit-transform: translate(-120px,0); -moz-transform: translate(-120px,0); -o-transform: translate(-120px,0); -ms-transform: translate(-120px,0); transition: all 1.5s ease-in-out;} .wtd .datos .dt3 {opacity: 0; margin: 0 0 auto auto; background: #FFDE00; text-align: center; padding: 10px; width: 100px; -webkit-transform: translate(120px,0); -moz-transform: translate(120px,0); -o-transform: translate(120px,0); -ms-transform: translate(120px,0); transition: all 2s ease-in-out;} .wtd .datos .dt4 {opacity: 0; margin: 0 0 auto auto; background: #870707; text-align: center; padding: 10px; width: 100px; margin-left: -77px; -webkit-transform: translate(-120px,0); -moz-transform: translate(-120px,0); -o-transform: translate(-120px,0); -ms-transform: translate(-120px,0); transition: all 2.5s ease-in-out;} .wtd .datos .dt5 {opacity: 0; background: #FFDE00; text-align: center; padding: 10px; width: 100px; margin: 0 0 auto auto; -webkit-transform: translate(120px,0); -moz-transform: translate(120px,0); -o-transform: translate(120px,0); -ms-transform: translate(120px,0); transition: all 3s ease-in-out;} .wtd:hover .datos .dt1, .wtd:hover .datos .dt2, .wtd:hover .datos .dt3, .wtd:hover .datos .dt4, .wtd:hover .datos .dt5 {opacity:1; -webkit-transform: translate(0px,0); -moz-transform: translate(0px,0); -o-transform: translate(0px,0); -ms-transform: translate(0px,0);} .psico {width: 230px; height: 270px; border-right: 5px #870707 solid; border-left: 5px solid #870707; margin: 0 0 auto auto; padding: 10px; overflow: auto; color: black; font-family: economica; font-size: 14px; text-align: justify;} .relas1, .relas2, .relas3 {width: 150px; height: 150px; margin: 0 0 auto auto;} .img1 {width: 150px; height: 150px; background: url(IMAGEN 150x150);} .re1, .re2, .re3 {width: 132px; height: 136px; background: #F7F6E0; margin-top: -150px; opacity: 0; border-top: dashed #ED3421 2px; border-bottom: dashed 2px #870707; border-left: solid 4px #870707; border-right: solid 4px#870707; padding: 5px; overflow: auto; font-family: economica; color: black;} .img2 {width: 150px; height: 150px; background: url(IMAGEN 150x150);} .img3 {width: 150px; height: 150px; background: url(IMAGEN 150x150);} .re1:hover, .re2:hover, .re3:hover {-moz-transition:all 1.5s ease-in-out; -webkit-transition:all 2s ease-in-out; overflow:auto; opacity: 1; transform: rotate(360deg)} .vips {width:470px; padding: 5px; background: #870707; margin:0 auto 0 auto; color:black; font-family: Economica; font-size:16px; height:20px; overflow: hidden;} .vips:hover {height:300px; border-left: white 1px dashed; border-right: white 1px dashed; -moz-transition:all 1.5s ease-in-out; -webkit-transition:all 1s ease-in-out; overflow:auto;}</style>