Ficha modelo

Código:

<div class="ficha1"><div class="dec izq"><span></span><span></span><span></span></div><div class="dec dech"><span></span><span></span><span></span></div><div id="columna1"><div class="h5"><span>This is who I am</span>Descripción psicológica</div><div class="texto peq">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend dui ut quam iaculis, sagittis fringilla tortor imperdiet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eleifend, orci vitae consequat venenatis, ex magna tincidunt nisi, nec volutpat elit quam quis risus. Donec sed nunc sodales, vestibulum enim nec, egestas neque. Donec ac luctus erat. Suspendisse faucibus urna eget massa suscipit, non eleifend elit suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie consequat iaculis. Nulla vitae blandit sem. Curabitur ac dui ante. Etiam orci elit, pulvinar a laoreet sed, cursus a nunc. Mauris eget ultricies dolor. Phasellus quis velit fringilla, condimentum ex a, malesuada mi.</div></div><div id="columna2" style="background:url(http://placehold.it/200x280/333/fff);"><div class="cajota"><span class="primera">Profesión / Rebaño</span><span>[color=#000000]Nombre Completo[/color]</span><span>[color=#000000]Apodo[/color]</span><span>[color=#000000]Raza[/color]</span><span>[color=#000000]Seme/suke/uke[/color]</span><span>[color=#000000]Zona[/color]</span><span>[color=#000000]Edad[/color]</span></div></div><div class="caja"><div class="h5"><span>Wanna know me better?</span>Datos Extras</div><div class="texto gr">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend dui ut quam iaculis, sagittis fringilla tortor imperdiet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eleifend, orci vitae consequat venenatis, ex magna tincidunt nisi, nec volutpat elit quam quis risus. Donec sed nunc sodales, vestibulum enim nec, egestas neque. Donec ac luctus erat. Suspendisse faucibus urna eget massa suscipit, non eleifend elit suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie consequat iaculis. Nulla vitae blandit sem. Curabitur ac dui ante. Etiam orci elit, pulvinar a laoreet sed, cursus a nunc. Mauris eget ultricies dolor. Phasellus quis velit fringilla, condimentum ex a, malesuada mi.</div></div></div><div align="center"><a href="http://serendipity.foroactivo.com/u1">thanks, skye!</a></div><style>.ficha1 { background:#2b605e; width:450px; height:500px; padding:10px; margin:0 auto; position:relative; line-height:normal; } .ficha1 #columna1, .ficha1 #columna2{ background-color:#000000; height:280px; display:inline-block; vertical-align:top; } .ficha1 #columna2{ width:200px; } .ficha1 #columna1{ width:240px; margin-right:10px; } .ficha1 .dec span{ width:15px; height:15px; background:#18a29d; display:block; margin-bottom:5px; } .ficha1 .dec{ position:absolute; } .ficha1 .dec.izq{ top:0px; left:-20px; } .ficha1 .dec.dech{ bottom:-5px; right:-20px; } .ficha1 .dec.izq span:nth-of-type(1), .ficha1 .dec.dech span:nth-of-type(3){ background:#2f6c6a; } .ficha1 .dec span:nth-of-type(2){ background:#2c8785; } .ficha1 .cajota{ width:200px; height:280px; overflow:hidden; position:relative; } .ficha1 .cajota .primera{ width:20px; height:20px; display:block; position:absolute!important; bottom:5px; left:5px; margin:0px; overflow:hidden; color:transparent; box-sizing:border-box; transition:ease-in-out 0.5s; padding:0px; background:#2c8785!important; transition-delay:0; } .ficha1 .cajota span{ background:#2c8785; width:190px; margin: 5px; text-align:center; display:block; font:8px calibri; text-transform:uppercase; letter-spacing:1px; padding:12px 0; position:relative; bottom:-280px; transition:ease-in-out 1.2s; transition-delay:0.5s; } .ficha1 .cajota span:nth-of-type(odd){background:#18a29d;} .ficha1 .cajota:hover span{ bottom:0px; } .ficha1 .cajota:hover .primera{ bottom:5px; width:190px; height:36px; color:#000; padding-top:13px; } .ficha1 .cajota:hover span:nth-of-type(7){ transition-delay:0s; } .ficha1 .cajota:hover span:nth-of-type(6){ transition-delay:1s; } .ficha1 .cajota:hover span:nth-of-type(5){ transition-delay:2s; } .ficha1 .cajota:hover span:nth-of-type(4){ transition-delay:3s; } .ficha1 .cajota:hover span:nth-of-type(3){ transition-delay:4s; } .ficha1 .cajota:hover span:nth-of-type(2){ transition-delay:5s; } .ficha1 .h5{ background:#2f6c6a; font:8px calibri; text-transform:uppercase; text-align:center; padding:15px 0; letter-spacing:1px; color:#ddd; } .ficha1 .h5 span{ display:block; font-size:16px; letter-spacing:2px; } .ficha1 .texto{ margin:5px; padding-right:5px; overflow-y:auto; text-align:justify; font:11px pt sans, sans-serif; } .ficha1 .texto.peq{ height:215px; width:225px; } .ficha1 .caja{ margin-top:10px; height:210px; background:#000000; } .ficha1 .texto.gr{ height:145px; width:435px; } /* latin-ext */ @font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 400; src: local('PT Sans'), local('PTSans-Regular'), url(http://fonts.gstatic.com/s/ptsans/v8/9kaD4V2pNPMMeUVBHayd7vY6323mHUZFJMgTvxaG2iE.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 400; src: local('PT Sans'), local('PTSans-Regular'), url(http://fonts.gstatic.com/s/ptsans/v8/ATKpv8nLYAKUYexo8iqqrg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; }</style>

||Datos Generales||

Nombre completo:
Apodo:
Raza:
Posición sexual:  (seme/suke/uke)
Zona: (En la que vive)
Edad:
Profesión/Rebaño: (La que ejercen o al que pertenecen dependiendo de su edad.)

||Descripción psicológica||

Mínimo 10 líneas.

||Datos extras||

Imagen:en spoiler

Lo que quieran poner y consideran necesario para su personaje.

Código:

[center][color=#33cccc]||Datos Generales||[/color][/center]

[u][b]Nombre completo:[/b][/u]
[u][b]Apodo:[/b][/u]
[u][b]Raza:[/b][/u]
[u][b]Posición sexual:[/b][/u]  (seme/suke/uke)
[u][b]Zona:[/b][/u] (En la que vive)
[u][b]Edad:[/b][/u]
[u][b]Profesión/Rebaño:[/b][/u] (La que ejercen o al que pertenecen dependiendo de su edad.)


[center][color=#33cccc]||Descripción psicológica||[/color][/center]

Mínimo 10 líneas.

[center][color=#33cccc]||Datos extras||[/color][/center]

[b]Imagen:[/b]en spoiler