Ficha de Ejemplo

por **Granate** Miér Sep 09, 2015 9:28 pm

Sr. Ninguén

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Dato

Psicología

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At eaque maiores rem animi totam placeat voluptatibus amet, eveniet odit, voluptatem aliquam laboriosam dolorem non omnis odio explicabo possimus nam voluptas? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit dicta repellat a eius omnis nisi, mollitia porro expedita accusantium voluptate? Et recusandae eveniet velit commodi, est. Facere ipsa, nam ea.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias illo architecto, laboriosam itaque laborum tempora vel cupiditate accusamus sunt amet eos vero voluptates non enim impedit ullam dolore accusantium repellendus!

Físico

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At eaque maiores rem animi totam placeat voluptatibus amet, eveniet odit, voluptatem aliquam laboriosam dolorem non omnis odio explicabo possimus nam voluptas?

Habilidades

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At eaque maiores rem animi totam placeat voluptatibus amet, eveniet odit, voluptatem aliquam laboriosam dolorem non omnis odio explicabo possimus nam voluptas?

Otros

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At eaque maiores rem animi totam placeat voluptatibus amet, eveniet odit, voluptatem aliquam laboriosam dolorem non omnis odio explicabo possimus nam voluptas?

Cuervo ~ BA!

Código:: <center><link href='http://fonts.googleapis.com/css?family=Montez|Alex+Brush|Asap' rel='stylesheet' type='text/css'><div class="bigboxnin"><div class="nameboxnin"><div class="nametxtnin">Sr. Ninguén</div></div><div class="carta-containernin"><div class="cartanin"><div class="ladonin frentenin"><div class="frasenin"><div class="frasetxtnin">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div></div><img src="http://i62.tinypic.com/2ns3s5z.jpg"></div><div class="ladonin atrasnin"><div class="datosnin"><div class="ddnin d1nin"><div class="dtxtnin">Dato</div></div><div class="ddnin d2nin"><div class="dtxtnin">Dato</div></div><div class="ddnin d3nin"><div class="dtxtnin">Dato</div></div><div class="ddnin d4nin"><div class="dtxtnin">Dato</div></div><div class="ddnin d5nin"><div class="dtxtnin">Dato</div></div></div><div class="titnin titpsinin"><div class="tittxtnin">Psicología</div></div><div class="infonin infopsinin"><div class="infotxtnin">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At eaque maiores rem animi totam placeat voluptatibus amet, eveniet odit, voluptatem aliquam laboriosam dolorem non omnis odio explicabo possimus nam voluptas? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit dicta repellat a eius omnis nisi, mollitia porro expedita accusantium voluptate? Et recusandae eveniet velit commodi, est. Facere ipsa, nam ea.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias illo architecto, laboriosam itaque laborum tempora vel cupiditate accusamus sunt amet eos vero voluptates non enim impedit ullam dolore accusantium repellendus!</div></div><div class="titnin titfisnin"><div class="tittxtnin">Físico</div></div><div class="infonin infofisnin"><div class="infotxtnin">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At eaque maiores rem animi totam placeat voluptatibus amet, eveniet odit, voluptatem aliquam laboriosam dolorem non omnis odio explicabo possimus nam voluptas?</div></div><div class="titnin tithisnin"><div class="tittxtnin">Habilidades</div></div><div class="infonin infohisnin"><div class="infotxtnin">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At eaque maiores rem animi totam placeat voluptatibus amet, eveniet odit, voluptatem aliquam laboriosam dolorem non omnis odio explicabo possimus nam voluptas?</div></div><div class="titnin titotronin"><div class="tittxtnin">Otros</div></div><div class="infonin infootronin"><div class="infotxtnin">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At eaque maiores rem animi totam placeat voluptatibus amet, eveniet odit, voluptatem aliquam laboriosam dolorem non omnis odio explicabo possimus nam voluptas?</div></div></div></div></div></div><a href="http://bad-badass-apple.blogspot.com.es/"><span style="font-family:'montez';">Cuervo ~ BA!</span></a><style type="text/css">.bigboxnin{width:500px;height:718px;border:2px dotted black;border-top:none;background-image:url('http://www.empresafuturo.com/imagenes/Gray_Gradient.jpg');}.carta-containernin{display: inline-block;height: 600px;position: relative;width: 500px;z-index: 1;}.carta-containernin {-webkit-perspective: 800;-moz-perspective: 800;perspective: 800;}.cartanin {/*aquí puedes poner un border a la caja grande*/height: 100%;width: 100%;-webkit-transform-style: preserve-3d;-webkit-transition: all 0.7s;-moz-transform-style: preserve-3d;-moz-transition: all 0.7s;transform-style: preserve-3d;transition: all 0.7s;}.carta-containernin:hover .cartanin{-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);transform: rotateY(180deg);}.cartanin .ladonin{position: absolute;height: 100%;width: 100%;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;backface-visibility: hidden;}.cartanin .frentenin{/*aquí es donde va la imagen*/height: 100%;width: 100%;}.cartanin .atrasnin{height: 100%;width: 100%;-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);transform: rotateY(180deg);}.datosnin{width:500px;height:30px;background-color:#2E9089;border-top:1px solid #000;border-bottom:2px solid #000;}.ddnin{position:absolute;width:100px;height:30px;}.d1nin{left:0px;}.d2nin{left:100px;}.d3nin{left:200px;}.d4nin{right:100px;}.d5nin{right:0px;}.dtxtnin{text-align:center;font-family:'Montez';font-size:22px;color:#e6e6e6;padding-top:5px;}.titnin{width:240px;height:40px;background-color:#2E9089;position:absolute;border-bottom:2px solid black;transition:all 0.4s ease-out;}.titnin:hover{text-shadow:3px 3px 0px #262A36,-3px -3px 0px #77C3BE;}.titpsinin{top:38px;left:5px;}.titfisnin{top:38px;right:5px;}.tithisnin{bottom:220px;left:5px;}.titotronin{bottom:220px;right:5px;}.infonin{width:240px;height:240px;background-color:#C9DCDF;position:absolute;overflow:auto;border-bottom:2px solid black;}.infonin::-webkit-scrollbar{width:7px;}.infonin::-webkit-scrollbar-thumb{background-color:#2E9089;}.infopsinin{top:80px;left:5px;}.infofisnin{top:80px;right:5px;}.infohisnin{bottom:-22px;left:5px;}.infootronin{bottom:-22px;right:5px;}.tittxtnin{text-align:center;font-family:'alex brush';font-size:30px;color:#fff;padding-top:10px;}.infotxtnin{text-align:justify;font-family:'asap';font-size:14px;color:black;padding:7px;}.nameboxnin{width:500px;height:80px;background-color:#2E9089;border-top:4px solid #000;border-bottom:1px solid #000;}.nametxtnin{text-align:center;font-size:50px;transition:all 0.4s ease-out;font-family:'alex brush';color:#fff;padding-top:27px;}.nametxtnin:hover{text-shadow:5px 5px 0px #262A36,-5px -5px 0px #77C3BE;}.frasenin{width:500px;height:30px;background-color:#2E9089;border-top:1px solid #000;border-bottom:2px solid #000;}.frasetxtnin{text-align:center;font-family:'Montez';font-size:22px;color:#e6e6e6;padding-top:7px;}</style></center>

Les recordamos que esta ficha es solo un ejemplo, podeís utilizar otra diferente.

¡IMPORTANTE!

El apartado de habilidades es solo para las gemas, si eres humano podrás cambiarlo por su historia.