078 | New Rules

<div class="gatica"><div class="cir"><div class="outcir">
<div class="incir" style="background: url(https://via.placeholder.com/110)"></div></div></div>
<div class="ga-link">
<a href=""><span class="th th-user"></span><n>Ficha</n></a>
<a href=""><span class="th th-heart-1"></span><n>Perfil</n></a>
<a href=""><span class="th th-star"></span><n>Relaciones</n></a>
<a href=""><span class="th th-moon"></span><n>Cronología</n></a>
<a href=""><span class="th th-peach"></span><n>Móvil</n></a>
</div><div class="ga-title">
<h1>New Rules</h1>
<h2>Out of my mind</h2>
</div></div><div class="crdts"><a href="https://gitanodoescodes.tumblr.com/">— gitano;</a></div>

<style>.gatica {width: 540px; height: 319px; outline: 1px solid #eaeaea; margin: 0 auto; background: #fdfdfd; position: relative; margin-top: 20px; margin-bottom: 20px;}.gatica br {display: none}.gatica:before {content: ''; width: 100px; position: absolute; top: 0px; bottom: 0px; display: block; background: #b9ca8c; outline: 1px solid #a7b583; z-index: 1}.gatica .cir {width: 150px; height: 150px; background: #f3f3f3; border: 1px solid #eaeaea; position: relative; border-radius: 100%; left: 240px; top: 40px; display: flex; align-items: center; justify-content: center; z-index: 1;}.gatica .outcir {width: 135px; height: 135px; background: #b9ca8c; border-radius: 100%; display: flex; align-items: center; justify-content: center; background-size: 100%;}.gatica .incir {height: 110px; width: 110px; border-radius: 100%; border: 8px solid #f3f3f3}.gatica .ga-title {width: 370px; position: absolute; top: 180px; bottom: 20px; right: 35px; color: #fff; display: flex; justify-content: center; align-items: center; flex-direction: column;}.gatica .ga-title h1 {font: 50px 'Sen', sans-serif; font-weight: 900; text-transform: uppercase; color: transparent; margin: 0px; -webkit-text-stroke: 1px #222; letter-spacing: -4px}.gatica .ga-title h2 {margin: 0px; font: 50px 'Sen', cursive; color: #b9ca8c; text-transform: lowercase; margin-top: -45px; font-weight: 900; line-height: 90%; letter-spacing: -4px}.gatica .ga-link {position: absolute; left: 29px; top: 25px; bottom: 25px; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: center; transition: all .5s ease;} .gatica .ga-link a {width: 30px; height: 30px; background: #f3f3f3; border-radius: 100%; color: #b9ca8c; display: flex; align-items: center; justify-content: center;padding: 5px; border: 1px solid #a7b583; font-size: 16px;}.gatica .ga-link a n {position: absolute; left: 50px; background: #f3f3f3; border: 1px solid #eaeaea; padding: 5px; color: #222; font: 11px 'Inconsolata', monospace; text-transform: uppercase; border-radius: 5px; padding: 7px 20px; transform: scaley(0); transition: .3s}.gatica .ga-link a:hover n {transform: scaley(1)}.crdts {text-decoration:none; font-family: verdana; font-size: 9px; text-align: center;}</style><link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Inconsolata|Sen:400,800&display=swap" rel="stylesheet">