Modelo de ficha

por **Kim SungGyu** Vie Jul 05, 2013 10:48 pm

Nombre Completo:

Edad:

Orientación Sexual:

Grupo:

Rango:

Nacionalidad:

Apodos:

Físico:

MInimo 10 Líneas.

Personalidad

MInimo 15 Líneas.

historia

MInimo 15 Líneas.

Por Jackin & LaufeysonSister de OurSourceCode

Código:: <div style="background:#1C140E;width:490px;height:auto;padding:5px;margin:0 auto;text-align:center;border: 20px ridge #A68C69;box-shadow: 2px 2px 2px black;"><div style="background:url(http://i.imgur.com/BPvqVYO.png);width:490px;padding-top:0px;height:200px;background-position:center;overflow:hidden;border-width: 5px 0;border-color:#6E5636;border-style:solid;" id="fichahover"><div id="datosenv"><div id="datos">Nombre Completo:</div><div id="datos" style="transition-delay:0.1s;">Edad:</div><div id="datos" style="transition-delay:0.2s;">Orientación Sexual:</div><div id="datos" style="transition-delay:0.3s;">Grupo:</div><div id="datos" style="transition-delay:0.4s;">Rango:</div><div id="datos" style="transition-delay:0.5s;">Nacionalidad:</div><div id="datos" style="transition-delay:0.6s;">Apodos:</div></div><div id="segundaimagen" style="background:url(http://i.imgur.com/FUrQSN9.gif);"></div></div><br><div id="jfisico" class="jdat"><div>Físico:</div></div><div id="jtextfisico" class="jcajitadat">MInimo 10 Líneas.</div><div id="jperson" class="jdat"><div>Personalidad</div></div><div id="jtextperson" class="jcajitadat">MInimo 15 Líneas.</div><br><br><div id="jhist">historia</div><div id="jtexthist">MInimo 15 Líneas.</div><br><div id="creditojl">Por <a href="http://www.oursourcecode.net/u6090" target="_blank">Jackin</a> & <a href="http://www.oursourcecode.net/u3888" target="_blank">LaufeysonSister</a> de <a href="http://www.oursourcecode.net/" target="_blank">OurSourceCode</a></div></div> <style type="text/css">@-webkit-keyframes jdatfich{0% {left: 0px;}50% {left: -231px;}100% {left: 0px;}}@keyframes jdatfich{0% {left: 0px;}50% {left: -231px;}100% {left: 0px;}}@-webkit-keyframes jdatfich2{0% {left: 0px;}50% {left: -231px;}100% {left: 0px;}}@keyframes jdatfich2{0% {left: 0px;}50% {left: -231px;}100% {left: 0px;}}@-webkit-keyframes jdatfich12{0% {right: 0px;}50% {right: -231px;}100% {right: 0px;}}@keyframes jdatfich12{0% {right: 0px;}50% {right: -231px;}100% {right: 0px;}}@-webkit-keyframes jdatfich22{0% {right: 0px;}50% {right: -231px;}100% {right: 0px;}}@keyframes jdatfich22{0% {right: 0px;}50% {right: -231px;}100% {right: 0px;}} #datos{width:300px;height:20px;padding-top:5px;background:#9BA657;color:#291C12;position:relative;left:-350px;transition:ease-in-out 0.8s;-webkit-transition:ease-in-out 0.8s;-o-transition:ease-in-out 0.8s;-moz-transition:ease-in-out 0.8s;margin: 3px 0; font:10px calibri;text-transform:uppercase;letter-spacing:3px;} #fichahover:hover #datos{left:0px;} #datosenv, #segundaimagen{float:left;} #datosenv{width:300px;} #segundaimagen{width:180px;height:187px;background:#924643;position:relative;top:1px;border: 5px solid #9BA657;opacity:0;transition:ease-in-out 0.5s;-webkit-transition:ease-in-out 0.5s;-o-transition:ease-in-out 0.5s;-moz-transition:ease-in-out 0.5s;} #fichahover:hover #segundaimagen{opacity:1;} #jfisico {z-index: 2;} #jperson {margin-left: 7px;margin-right: 0px;z-index: 2;} .jcajitadat {display: inline-block;width: 200px;padding: 10px;position: relative;height: 240px;border: 5px groove #A68C69;background-color: #1C140E;overflow: auto;color: #e0e0e0;line-height:8px;font:11px arial;text-align: justify;font-weight: 400;} #jtextfisico {margin-left: -237px;z-index: 1;-webkit-transition: z-index 0s 0.5s; transition: z-index 0s 0.5s;-webkit-animation-name: jdatfich; -webkit-animation-duration: 1s; -webkit-animation-play-state: running;animation-name: jdatfich;animation-duration: 1s;animation-play-state: running;} #jtextperson {margin-left: -230px;z-index: 1;-webkit-transition: z-index 0s 0.5s; transition: z-index 0s 0.5s;-webkit-animation-name: jdatfich12; -webkit-animation-duration: 1s; -webkit-animation-play-state: running;animation-name: jdatfich12;animation-duration: 1s;animation-play-state: running;} #jfisico:hover ~ #jtextfisico, #jtextfisico:hover {-webkit-animation-name: jdatfich2; -webkit-animation-duration: 1s; -webkit-animation-play-state: running;z-index: 3;animation-name: jdatfich2;animation-duration: 1s;animation-play-state: running;} #jperson:hover ~ #jtextperson, #jtextperson:hover {-webkit-animation-name: jdatfich22; -webkit-animation-duration: 1s; -webkit-animation-play-state: running;z-index: 3;animation-name: jdatfich22;animation-duration: 1s;animation-play-state: running;} .jdat {display: inline-block;width: 210px;margin-right: 7px;padding: 5px;position: relative;height: 250px;border: 5px #A68C69 groove;background-color: #1C140E;color: #E0E0E0; text-transform: uppercase;overflow: auto;} .jdat div {font:60px six caps;position: relative; top:80px;color:#9CA656;} #jhist {width: 435px;padding: 5px 10px 15px 10px;position: relative;height: 45px;border: 5px groove #A68C69;background-color: #1C140E;color: #9CA656;text-align: center;margin: 0 auto;border-bottom: none;text-transform: uppercase;font:40px six caps;letter-spacing:8px;} #jtexthist {font:12px arial;color:#e0e0e0;line-height:13px;width: 435px;padding: 0px 10px 0px 10px;position: relative;height: 0px;border: 5px groove #A68C69;border-top: none;background: -webkit-linear-gradient(#1C140E 15%, #3D3329);background: -moz-linear-gradient(#1C140E 15%, #3D3329);background: -o-linear-gradient(#1C140E 15%, #3D3329);background: linear-gradient(#1C140E 15%, #3D3329);text-align: center;margin: 0 auto;overflow: hidden;-webkit-transition: all 1s; transition: all 1s;text-align: justify;} #jhist:hover ~ #jtexthist, #jtexthist:hover {height: 130px;padding: 10px;border-top: 0px solid #A68C69;overflow: auto;} @font-face {font-family: 'Six Caps';font-style: normal;font-weight: 400;src: local('Six Caps'), local('SixCaps'), url(http://themes.googleusercontent.com/static/fonts/sixcaps/v4/tMrhQDUBAHnnGuM33-yobPesZW2xOQ-xsNqO47m55DA.woff) format('woff');} #creditojl{font:9px arial;color:#D5CEBF;margin: 0 auto;text-align:center;text-transform:uppercase;} #creditojl a{color:#9BA657;transition:ease-in-out 0.4s;-webkit-transition:ease-in-out 0.4s;-o-transition:ease-in-out 0.4s;-moz-transition:ease-in-out 0.4s;} #creditojl a:hover{letter-spacing:3px;}</style>