ON ─ Bitácora

<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.11.2/css/pro.min.css"/><link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap" rel="stylesheet"><link href="https://codepen.io/Hye_Ri/pen/yLNwKQR?editors=1100.css" rel="stylesheet">

<div id="ON">
<div class="on-nombre">Bring the pain <b>on</b></div>
<div class="on-aparte">
<div class="on-frase">Brownie pastry tiramisu. Oat cake biscuit tart sesame snaps powder tootsie roll biscuit donut.</div>
<div class="on-imagen1"></div><img src="https://i.imgur.com/KxJRoqx.png" class="on-imagen0"><i class="fas fa-stars" id="on-star"></i></div>

<input type="radio" id="ttab1" name="ttab" checked><label for="ttab1" id="ttab1" title="001"><span class="th th-heart-1"></span>Imagen</label>
<input type="radio" id="ttab3" name="ttab"><label for="ttab3" id="ttab3" title="003"><span class="th th-biscuit"></span>Información</label>
<input type="radio" id="ttab4" name="ttab"><label for="ttab4" id="ttab1" title="004"><span class="th th-blossom"></span>Relaciones</label>
<input type="radio" id="ttab5" name="ttab"><label for="ttab5" id="ttab5" title="005"><span class="th th-mapple-leaf"></span>Cronología</label>
<input type="radio" id="ttab6" name="ttab"><label for="ttab6" id="ttab6" title="006"><span class="th th-bell"></span>Hazañas</label>

<div class="on-wrap">

<div class="on-index1 ze1"><img src="https://i.imgur.com/4OvsDYK.png"></div>

<div class="on-index3 ze3"><div class="on-flex">
<div class="on-imagen2"><img src="https://via.placeholder.com/200x300"></div>
<div><div class="on-datos">
<span><i class="fas fa-broom" title="Nombre"></i><b>Zenit</b></span>
<span><i class="fas fa-moon-stars" title="Raza"></i><b>Kylian</b></span>
<span><i class="fas fa-palette" title="Género"></i><b>Mujer</b></span>
<span><i class="fas fa-map-marker-exclamation" title="Lugar de origen"></i><b>Hylia</b></span>
<span><i class="fas fa-ghost" title="Facción"></i><b>Gobierno Mundial</b></span>
<span><i class="fas fa-alarm-clock" title="Cargo"></i><b>Líder CP6</b></span>
</div>
<div class="on-otro"><b>Mira mira no mi</b><i>Akuma no mi</i></div>
</div></div></div>

<div class="on-index4 ze4"><div class="on-scroll">
<div class="on-rela">
<img src="https://via.placeholder.com/80x80">
<div class="on-friends"><b>Nombre apellido</b><i>Relación con el personaje</i></div></div>

</div></div>

<div class="on-index5 ze5"><div class="on-scroll">
<div class="on-tema">
<a href="/">Nombre del tema</a><div class="on-flex">
<span>Brownie pastry tiramisu. Oat cake biscuit tart sesame snaps powder tootsie roll biscuit donut.</span>
<div><i>con alguien</i></div>
</div>

</div></div></div>

<div class="on-index6 ze6">Próximamente~</div>

</div></div><div class="on-bottom"> <a href="https://hyeri-code.tumblr.com/" class="HR-credss">Hye Ri</a></div>

<style>#ON{--zn-color: #E5ACA9; --zn-sombra: #b08380;} .on-frase {font-size: 8px;text-transform: uppercase;text-align: justify;color: #eee;width: 300px;margin-top: -55px;position: relative;left: -35px;}#ON {width: 520px;height: 530px;margin: auto;background: #222;outline: #111 1px solid;padding: 10px;overflow: hidden;line-height: 1.2;}#ON label {background: #111;padding: 10px;width: 75px; display: inline-block;margin-top: 10px; color: #999;text-align: center; font-size: 10px;text-transform: uppercase;font-family: calibri;position: relative;top: 330px;margin-left: -14px;left: 13px;
}.on-bottom {background: #111;position: relative;top: 0px;width: 520px;margin: auto;padding: 15px; outline: 1px solid #111;text-align: right;}</style>