067 | Jar of Hearts

<div id="mangle"><div id="trait" style="background: url(https://via.placeholder.com/310x400)">
</div><div id="sup"><div id="shin" style="background: url(https://via.placeholder.com/260x200)"></div>
<div id="title2">Jar of hearts <span>I know I can't take one more step towards you
'Cause all that's waiting is regret, Don't you know I'm not your ghost anymore. —

</span></div></div><div id="hel">
<a href=""><i class="fas fa-user"></i><span>Ficha</span></a>
<a href=""><i class="fas fa-clock"></i><span>Cronología</span></a>
<a href=""><i class="fas fa-heart"></i><span>Relaciones</span></a>
<a href=""><i class="fas fa-phone"></i><span>Móvil</span></a>
<a href=""><i class="fas fa-search"></i><span>Búsquedas</span></a>
</div></div><div class="crdts"><a href="https://gitanodoescodes.tumblr.com/">— gitano;</a></div>

<style>#mangle {width: 500px; height: 400px; background: #fff; border: 1px solid #eaeaea; outline: 5px solid #fff; margin: 0 auto; margin-top: 25px; padding: 5px; position: relative;}#mangle br {display: none}#mangle .circ {position: absolute; height: 70px; width: 70px; background: #fff; border-radius: 100%; top: 160px; left: 200px; padding: 5px;}#mangle .circ h {background: #fff; border: 1px solid #eaeaea; font-size: 30px; color: #B70407; border-radius: 100%; border: 1px solid #eaeaea; display: flex; justify-content: center; text-align: center; align-items: center; height: 68px; width: 68px;} #mangle #trait {position: absolute; top: 5px; left: 5px; bottom: 5px; width: 310px;}#mangle #sup {height: 401px; background: #fff; clip-path: polygon(55% 0, 100% 0, 100% 100%, 37% 100%); position: relative;} #mangle #title2 {font: 80px 'Bebas'; font-weight: bold; width: 280px; text-align: left; position: absolute; bottom: 0px; right: 5px; line-height: 80%; letter-spacing: -3px; transform: skewX(-12deg);}#mangle #title2 span {display: block; font: 6px verdana;letter-spacing: 0px; text-transform: uppercase; color: #777777; font-weight: bold; line-height: 120%; margin-bottom: 5px;}#title2 {color: #B70407}#mangle #shin {clip-path: polygon(17% 0, 100% 0, 100% 100%, 0 100%); width: 260px; height: 200px; position: absolute; right: 0px; z-index: 2; overflow: inherit;} #mangle #hel {position: absolute; top: 10px; left: 263px} #mangle #hel a {position: relative; display: block; background: #fff; height: 10px; width: 10px; display: flex; justify-content: center; align-items: center; border-radius: 100%; padding: 9px; margin-top:8px; color: #222}#mangle #hel a:nth-of-type(2n) {margin-left: -7px;}#mangle #hel a:nth-of-type(3n) {margin-left: -14px;}#mangle #hel a:nth-of-type(4n) {margin-left: -21px;}#mangle #hel a:nth-of-type(5n) {margin-left: -28px;}#mangle #hel a span {position: absolute; left: 10px; background: #fff; font: 8px verdana; text-transform: uppercase; padding: 10px; padding-left: 18px; border-radius: 0px 15px 15px 0px; z-index: 1; height: 8px; width: 0px; overflow: hidden; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; padding-right: 0px; text-align: right; font-weight: bold;}#mangle #hel a i {color: #B70407; font-size: 12px; text-align: center; z-index:2;}#mangle #hel a:hover span {width: 100px; padding-right: 10px}@font-face {font-family: 'Bebas'; src: url('https://dl.dropbox.com/s/so3s9ix3a0kbom1/BebasNeue-Regular.ttf');}.crdts {text-decoration:none; font-family: verdana; font-size: 9px; text-align: center;}</style><script src="https://kit.fontawesome.com/fb4f7fc7d2.js"></script>