Modelo de ficha

por **Paulo Da Silva** Lun Dic 10, 2012 1:50 am

This is Me

Nombre del Pj

Nombre Humano:
Apodos
Curso
Edad aproximada y la que aparenta:
Pais/Ciudad/Region/Personaje Historico/Capital/Antiguo

Descripción Psicologica

{Minimo 6 lineas}

Descripcion fisica

{Minimo 6 lineas}

Prueba de rol

{Minimo 8 lineas}

Otros

{Lo que quieras añadir del personaje}

By Morgana

Código:: <center><style type="text/css"> #code1 { position: relative; display: inline-block;} #code2 { display: none; background: #333; opacity: 0.7; width: 200px; height: 100 px; position: absolute; top: 140px; left: 300px; font-size: 25px; padding: 30px 10px;border-radius: 50px; font-family: 'Poiret One'; color: #FFF;} .avalon { background-image: url(IMAGEN BLANCO Y NEGRO); width: 500px; height:200px; -moz-transition:all 1s ease-in-out; -webkit-transition:all 1s ease-in-out; } .avalon:hover { background-image: url(IMAGEN COLOR) ; width: 500px; height: 200px;-moz-transition:all 1s ease-in-out; -webkit-transition:all 1s ease-in-out; } #code1:hover #code2 { display: block; }</style> <div style="background-color: #000000; width: 500px; border-left: solid 10px #444444" > <div style=" font-family: 'Poiret one'; font-size: 50px; color: #888888;">This is Me</div> <div id="code1"><div class="avalon"></div><div id="code2"></b>Nombre del Pj</b></div></div> <br><br> <div id="Fay"><ul><li>Nombre Humano: </li><li> Apodos </li><li> Curso </li><li> Edad aproximada y la que aparenta: </li><li> Pais/Ciudad/Region/Personaje Historico/Capital/Antiguo</div> <div style=" font-family: 'Poiret one'; font-size: 50px; color: #888888;">Descripción Psicologica</div> <div style=" background-color: #444444; width:360px; height: 240px; font-famiily: Century Gothic; font-size: 12px; color: #DDD; padding: 30px 20px; overflow:auto;"> {Minimo 6 lineas} </div> <div class="avaloncaja1"> Descripcion fisica <div style="background-image: url(IMAGEN O GIF); width: 500px; height: 200px; "> </div><div style=" width:450px; height: 200px; font-famiily: Century Gothic; font-size: 12px; color: #DDD; padding: 30px 20px; overflow:auto;"> {Minimo 6 lineas} </div></div><div class="avaloncaja2"> Prueba de rol <div style="background-image: url(IMAGEN O GIF); width: 500px; height: 200px; "> </div><div style=" width:450px; height: 200px; font-famiily: Century Gothic; font-size: 12px; color: #DDD; padding: 30px 20px; overflow:auto;"> {Minimo 8 lineas} </div></div><div class="avaloncaja3"> Otros <div style="background-image: url(IMAGEN O GIF); width: 500px; height: 200px; "> </div><div style=" width:450px; height: 200px; font-famiily: Century Gothic; font-size: 12px; color: #DDD; padding: 30px 20px; overflow:auto;"> {Lo que quieras añadir del personaje} </div></div><div style=" font-family: 'Poiret one'; font-size: 12px; color: #888888;">By [url=http://www.oursourcecode.net/u2051][color=#AAAAAA]Morgana[/color][/url]</div></div> </center> <style type="text/css"> div::-webkit-scrollbar { height: 15px; width: 7px; background: #222222; } div::-webkit-scrollbar-thumb { background: #777777 !important; } div::-webkit-scrollbar-corner { background: #222222; } #Fay {position:absolute; left: 160px; top:240px;}#Fay ul {list-style-type: none; text-align:left;}#Fay li{width:400px;background-color:#222222; opacity:0.6; margin-bottom:2px; color:#8f8f8f; text-transform:uppercase; font:10px 'times'; padding:1px 0px 1px 10px; -webkit-transition: all 0.5s linear; } #Fay li:hover {width:400px; opacity:1; margin-left:8px; border-radius:10px 10px 10px 10px; color:#ffffff; background-color: #888; -webkit-transition: all 0.5s linear; }</style> <style type="text/css"> .avaloncaja1 { background-color: #222222; height:20px; width: 500px; font-family: 'Poiret one'; font-size: 14px; color: #888888; text-align: center; overflow: hidden; -moz-transition:all 1.5s ease-in-out; -webkit-transition:all 1s ease-in-out; } .avaloncaja1:hover { background-color:#222222; width: 500px; height:500px; font-family: 'Poiret one'; color:#888888; font-size: 20px; text-align: center; -moz-transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out;}</style> <style type="text/css"> .avaloncaja2 { background-color: #444444; height:20px; width: 500px; font-family: 'Poiret one'; font-size: 14px; color: #AAA; text-align: center; overflow: hidden; -moz-transition:all 1.5s ease-in-out; -webkit-transition:all 1s ease-in-out; } .avaloncaja2:hover { background-color:#444444; width: 500px; height:500px; font-family: 'Poiret one'; color:#AAA; font-size: 20px; text-align: center; -moz-transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out;}</style> <style type="text/css"> .avaloncaja3{ background-color: #666666; height:20px; width: 500px; font-family: 'Poiret one'; font-size: 14px; color: #CCC; text-align: center; overflow: hidden; -moz-transition:all 1.5s ease-in-out; -webkit-transition:all 1s ease-in-out; } .avaloncaja3:hover { background-color:#666666; width: 500px; height:500px; font-family: 'Poiret one'; color:#CCC; font-size: 20px; text-align: center; -moz-transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out;}</style> <link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>

por Soledad Fernandez Mar Mar 05, 2013 4:03 am

Hola, acabo de ver el tip de la ficha. No entiendo como hay que hacerla para que te quede asi ¿Ose,a se entiende lo que digo?
Chauchis

por **Paulo Da Silva** Miér Mar 06, 2013 10:55 am

http://gakuen-hetalia.activoforo.net/t536-como-hacer-la-ficha-con-codigos-html

Visita ese enlace para poder ver como tiene que quedar. Solo tienes que ir rellenando los huecos de los codigos. La proxima vez esta duda en su zona correspondiente por favor ^^

por Contenido patrocinado

Modelo de ficha

Modelo de ficha

Re: Modelo de ficha

Re: Modelo de ficha

Re: Modelo de ficha