NOME DO PERSONAGEM
ESCREVA AQUIIDADE
ESCREVA AQUIGRUPO
ESCREVA AQUIORIENTAÇÃO SEXUAL
ESCREVA AQUILUGAR DE ORIGEN
ESCREVA AQUIGRUPO EXTRA
ESCREVA AQUI, CASO SEJA UM DOS VOLUNTÁRIOS DOS JOGOS A QUAL GRUPO PERTENCE.<link href='http://fonts.googleapis.com/css?family=Cutive+Mono|Megrim|Poiret+One|Dosis' rel='stylesheet' type='text/css'><style>div::-webkit-scrollbar {width: 6px; background: #ffffff;} div::-webkit-scrollbar-thumb {height: 10px; background: #888888;} div::-webkit-scrollbar-track {height: 3px; background:#ffffff;} div::-webkit-scrollbar-button {height: 3px; background:#ffffff;} #fondo {background: #ffffff; width: 550px; height: 650px; box-shadow: 1px 1px 15px; margin: 0 auto; font-size: 12px; font-family: Dosis;} #img {width: 500px; height: 180px; position: relative; margin: 0 auto; margin-top: 10px;} #img img {width: 500px; height: 180px;} #img:hover #nombre {opacity: 0.6; transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out;} #nombre {background: #ffffff; width: 480px; height: 160px; display: flex; align-items: center; margin: 0 auto; opacity: 0; position: absolute; top: 0px; left:0px; padding: 10px;transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out;} #subnombre {height: 160px; overflow: auto; display: flex; align-items: center; margin: 0 auto; text-align: center; font-size: 40px; font-family: Megrim; color: #444444;} #texto{width: 550px; height: 420px; position: relative; left: -5px;} #datos {background: #888888; width: 250px; height; 25px; margin: 0px auto; margin-top: 10px; margin-bottom: 10px; text-align: center; letter-spacing: 2px; font-size: 14px; color:#f0f0f0;} .text {background: #f0f0f0; width: 317px; height: 420px; position: absolute; top: -1px; left: 212px; overflow: auto; padding: 0px 10px 0px 10px; font-size: 14px; text-align: justify; color: #000000; font-family: Dosis;} .tab {float: bottom; margin-top: -13px; margin-left: -5px; text-align: justify;} .tab label {background: #888888; position: relative; display: block; box-shadow: 1px 1px 2px #000000; width: 150px; height: 15px; margin-top: 0px; margin-bottom: 0px; text-transform: uppercase; font-family: Poiret One; color: #ffffff; font-size: 12px; padding: 5px 10px; cursor: pointer; transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out;} .tab [type=radio] {display: none; baseline-tab-shift: true, retrieve;} [type=radio]:checked ~ label {background: #444444; padding: 5px 25px; cursor: default; transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; z-index: 2;} [type=radio]:checked ~ label ~ .text {z-index: 1;} #firma {position: relative; top: -462px; text-align: right; font-size: 10px; font-family: Cutive Mono; text-transform: uppercase; color: #888888;} #firma a{color: #888888;}</style>
<div id="fondo">
<div id="img"><img src="IMAGEN DE 500 x 180"></img><div id="nombre"><div id="subnombre">Nombre del Personaje</div></div></div>
<div id="texto">
<div class="tab"><input type="radio" id="tab-1" name="tab-group-1" checked><label for="tab-1">Datos del Personaje</label>
<div class="text"><center><div id="datos">NOME DO PERSONAGEM</div>ESCREVA AQUI
<div id="datos">IDADE</div>ESCREVA AQUI
<div id="datos">GRUPO</div>ESCREVA AQUI
<div id="datos">ORIENTAÇÃO SEXUAL</div>ESCREVA AQUI
<div id="datos">LUGAR DE ORIGEN</div>ESCREVA AQUI
<div id="datos">GRUPO EXTRA</div>ESCREVA AQUI, CASO SEJA UM DOS VOLUNTÁRIOS DOS JOGOS A QUAL GRUPO PERTENCE.</center></div></div>
<div class="tab"><input type="radio" id="tab-2" name="tab-group-1"><label for="tab-2">Descrição Psicológica e Física</label>
<div class="text">Bla bla bla soy una descripción psicológica!</div></div>
<div class="tab"><input type="radio" id="tab-3" name="tab-group-1"><label for="tab-3">Historia</label>
<div class="text">Bla bla bla soy una historia!</div></div>
<div class="tab"><input type="radio" id="tab-4" name="tab-group-1"><label for="tab-4">Extras</label>
<div class="text">Bla bla bla soy un extra!</div></div>
</div>
<div id="firma">Thanks Itzel <a href="http://sourcecode.jcink.net/index.php?act=ST&f=7&t=871">■</a></div>
</div>
|
|