Codes from Hell

¡Buenas! bueno, hay veces que me preguntan por un code o simplemente que me apetece hacerlo, así que... ahí va. Quien quiera que lo coja, si es para otro foro, por favor, avisadme cual es y le pondré créditos (aunque nunca me ha gustado ponerlos, queda algo ñordo xD)

Cualquier duda preguntadme :)

PD: La barra de vida se puede modificar, tanto el texto, como el tamaño de esta en cualquiera de sus formas. La forma más sencilla de apuntar la vida es con texto, pero puedes ir reduciendo el largo de la barra que está en 100px, cada punto de vida que te quiten, multíplicalo por 10 (añade 0) y eso le restas al código. Te quitan 5 pues -50px al border xD

Código:

<div style="width: 615px; margin: 0 auto; background: black; padding: 5px; height: 155px; overflow: hidden; "><div class="titulopene"><div class="imglack" style="background: url(IMG de 100x100);"></div><!--Fin de la imagen--><div class="bloquecute + ate">Atk. Epecial</div><div class="bloquecute + atk">Ataque</div><div class="bloquecute + res">Resistencia</div><div class="bloquecute + des">Destreza</div><!--Zona de edición--><div class="bloquecute + ate1">Atak.E(?)</div><div class="bloquecute + atk2">Atak(?)</div><div class="bloquecute + res3">Red(?)</div><div class="bloquecute + des4">Des (?)</div><div class="bloquecute + vida"><span style="border-left:100px solid #854989;">••••••••••</span>Vida a 10 </div><!--Fin de esta zona--><div class="objetos1">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div></div></div>

<link href='https://fonts.googleapis.com/css?family=Cinzel' rel='stylesheet' type='text/css'><style type="text/css">.titulopene{font-family: 'Cinzel'; color: black;text-align: center; font-size: 12px; background: #A68EBC; margin: 10px auto; border-left:5px solid #D6D2DA; border-right:5px solid #BFBFBF; padding: 10px; width: 85%; } .imglack{width: 110px;height: 110px; background-size: cover !important;border: 2px solid black;} .bloquecute{position: relative; width: 100px; float: left; border-top: 1px solid white; height: 14px;} .ate{top: -105px; left:123px; background: pink;} .ate1{top: -90px; left:-277px; background: violet;} .atk{top: -105px; left:127px; background: pink;} .atk2{top: -105px; left:227px; background: violet;} .res{top: -65px; left:-77px; background: pink;} .res3{top: -65px; left:23px; background: violet;} .des{top: -65px; left:-74px; background: pink;} .des4{top: -65px; left:26px; background: violet;} .vida{transition: all 0.5s ease-in-out; top: -42px; left:-177px; background: silver; width: 202px; color: transparent; text-align: left;} .vida:hover span{ color: transparent; font-size: 0px; border-left: 1px solid #854989 !important;} .vida span{transition: all 0.9s ease-in-out; width: 20px;color: transparent; background: #713E73; height: 10px; font-size: 6px; position: relative; top: -3px; left: 2px;} .vida:hover{color: black; text-align: center;} .objetos1{ width: 170px; height: 100px; position: relative; float: left; background: #713E73; top: -144px; left: 340px; border: 2px solid black; overflow: auto; padding: 5px; background-size: cover; text-align: justify; color: white; font-size: 9px;}</style>