Ficha con pestañas [HTML]
allonsy :: HTML & CSS :: Tablillas
Página 1 de 1. • Comparte
Nombre del PJ
NACIONALIDAD: dato | EDAD: dato |
NACIMIENTO: dato | GRUPO: dato |
RANGO: dato | HABILIDAD: dato |
O. SEXUAL: dato | OTRO: dato |
Historia de tu PJ. Expláyate a gusto.
FAMILIA
Psicología del PJ
GUSTOS
DISGUSTOS
- Código:
<style>.tabbys { position: relative;overflow: hidden;}.tabbies { float: left; }.tabbies label {left: 4px; background: #0e192e; width: 134px; margin-left: 2px; height: 8px;font: 8px calibri; text-align: center; text-transform: uppercase;position: relative;display: block; color: #acacac;padding: 10px; transition: 0.8s all ease-in-out;}.tabbies [type=radio] { display: none;}.contenty {width: 480px; top: 40px; left: 500px; height: 200px; padding: 10px; color: #acacac; font: 10px calibri; text-align: justify; position: absolute;background: #111;transition: 0.8s; opacity: 0.7;transform: scale (0);transition: 0.8s all ease-in-out; overflow: auto;}[type=radio]:checked~label {z-index: 2; transition: 0.8s all ease-in-out;}[type=radio]:checked ~ label ~ .contenty { z-index: 2;left: 6px;transform: scale(1);transition: 0.8s all ease-in-out;} .dat {font: 10px calibri;background: #0e192e; width:190px; height: 15px;padding:15px; float: left;}.dat1 {font: 12px calibri;background: #0e192e; width:420px; height: 15px;padding:15px; text-align: center;}</style>
<center><div style="width:500px; height: 540px; background-image: url('https://imgur.com/36ztBzK.png');"><div style="font: 30px Lato;background:none; width:500px; height: 50px;padding:20px;line-height: 45px;">Nombre del PJ</div><div style="width:480px; height: 430px; background: #111;"><div style="background:URL('http://placehold.it/480x150')center; width: 480px; height: 150px;"></div> <div class="tabbys" style="background: #111; height: 250px; width: 480px;"><div class="tabbies"> <input type="radio" id="tabbies-1" name="tabbies-group-1" checked> <label for="tabbies-1">Datos</label> <div class="contenty"><table><tr><td><div class="dat"><b>NACIONALIDAD:</b> <div style="float: right;">dato</div></div></td><td><div class="dat"><b>EDAD:</b> <div style="float: right;">dato</td></tr><tr><td><div class="dat"><b>NACIMIENTO:</b> <div style="float: right;">dato</td><td><div class="dat"><b>GRUPO:</b> <div style="float: right;">dato</td></tr><tr><td><div class="dat"><b>RANGO:</b> <div style="float: right;">dato</td><td><div class="dat"><b>HABILIDAD:</b> <div style="float: right;">dato</td></tr><tr><td><div class="dat"><b>O. SEXUAL:</b> <div style="float: right;">dato</td><td><div class="dat"><b>OTRO:</b> <div style="float: right;">dato</td></tr></table></div></div><div class="tabbies"><input type="radio" id="tabbies-2" name="tabbies-group-1"><label for="tabbies-2">Historia</label><div class="contenty">Historia de tu PJ. Expláyate a gusto. </br><div class="dat1">FAMILIA</div></div></div><div class="tabbies"><input type="radio" id="tabbies-3" name="tabbies-group-1"><label for="tabbies-3">Psicología</label><div class="contenty">Psicología del PJ</br><div class="dat1">GUSTOS</div></br><div class="dat1">DISGUSTOS</div></div></div></div></div></div></center>
allonsy :: HTML & CSS :: Tablillas
Página 1 de 1.
Permisos
No puedes responder a temas en este foro.
|
|