086 | The Girl i Have a Crush On

<div id="out-qt"><div class="tp-qt">
The Girl I Have a Crush On</div>
<div class="qt-li"><div class="fi-li">
<div class="fi-im" style="background: url(https://via.placeholder.com/480x380)"></div>

<div class="links-qt">

<a href=""><i class="th th-sun"></i><span>Ficha</span></a>
<a href=""><i class="th th-alarm-clock-1"></i><span>Cronologia</span></a>
<a href=""><i class="th th-tea"></i><span>Relaciones</span></a>
<a href=""><i class="th th-smartphone"></i><span>Móvil</span></a>

</div></div><div class="wv"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#ffffff" fill-opacity="1" d="M0,160L48,170.7C96,181,192,203,288,224C384,245,480,267,576,256C672,245,768,203,864,176C960,149,1056,139,1152,154.7C1248,171,1344,213,1392,234.7L1440,256L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg><div class="mv-pt"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#ffffff" fill-opacity="1" d="M0,160L48,170.7C96,181,192,203,288,224C384,245,480,267,576,256C672,245,768,203,864,176C960,149,1056,139,1152,154.7C1248,171,1344,213,1392,234.7L1440,256L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg></div>
</div><div class="ico-li"><span class="th th-moon"></span></div></div><div class="bt-qt">Someday she'll come along, the girl I love Her smile will be a song, the girl I love</div></div><div class="crdts"><a href="http://illmakegaycodesforu.tumblr.com/">— gitano;</a></div>


<style>#out-qt br{display: none}#out-qt {width: 480px; position: relative; margin: 0 auto; display: flex; flex-direction: column; align-items: center; margin-top: 20px;}.tp-qt {color: #fff; background: #CCBDC9; text-shadow: 1px 1px 0 rgba(0,0,0,0.1), -1px 1px 0 rgba(0,0,0,0.1), 1px -1px 0 rgba(0,0,0,0.1), -1px -1px 0 rgba(0,0,0,0.1); border: 1px solid rgba(0,0,0,0.1); padding: 5px 20px; font: 15px Poppins; text-transform: lowercase; font-style: italic; font-weight: 200; border-radius: 25px 25px 0 0; text-align: center;}.qt-li {height: 420px; width: 480px; background: #fff; border: 1px solid #f1f1f1; position: relative;padding: 20px; border-radius: 55px;}.qt-li .fi-li {height: 380px; background: #F6D8F0; position: relative; overflow: hidden; border-radius: 55px 55px 0 0;}.qt-li:hover .fi-im {opacity: 0.5; filter: grayscale(100%);}.qt-li .fi-im {position: absolute; top: 0px; right: 0px; left: 0px; bottom: 0px; opacity: 1; transition: .8s;}.ico-li {width: 100px; height: 100px; position: absolute; border: 1px solid #f1f1f1; background: #fff; border: 1px solid #f1f1f1; border-radius: 100%; bottom: 20px; left: calc(50% - 50px); display: flex; align-items: center; justify-content: center}.ico-li span {width: 80px; height: 80px; border-radius: 100%; display: flex; align-items: center; justify-content: center; font-size: 40px; color: #fff; background: #CCBDC9; text-shadow: 1px 1px 0 rgba(0,0,0,0.1), -1px 1px 0 rgba(0,0,0,0.1), 1px -1px 0 rgba(0,0,0,0.1), -1px -1px 0 rgba(0,0,0,0.1); border: 1px solid rgba(0,0,0,0.1);} .fi-tp {display: flex; flex-direction: column; align-items: center; padding: 10px; height: 100px;}.fi-tp sp {font: 50px 'Sunbreath';text-align: center; line-height: 80%; text-tran sform: uppercase; font-style: italic; color: #CCBDC9}.fi-tp n {color: #fff; background: #CCBDC9; text-shadow: 1px 1px 0 rgba(0,0,0,0.1), -1px 1px 0 rgba(0,0,0,0.1), 1px -1px 0 rgba(0,0,0,0.1), -1px -1px 0 rgba(0,0,0,0.1);border: 1px solid rgba(0,0,0,0.1); text-align: center;padding: 5px; font: 8px calibri; text-transform: uppercase;}.wv {position: relative; color: #FFF; text-align: center; top: -90px; height: 30px;}.mv-pt {position: absolute; left: 0px; right: 0px; bottom: 15px; opacity: .4; height: 30px;}.bt-qt {color: #fff; background: #CCBDC9; text-shadow: 1px 1px 0 rgba(0,0,0,0.1), -1px 1px 0 rgba(0,0,0,0.1), 1px -1px 0 rgba(0,0,0,0.1), -1px -1px 0 rgba(0,0,0,0.1); border: 1px solid rgba(0,0,0,0.1); font: 7px verdana; text-transform: uppercase; padding: 5px; border-radius: 0 0 5px 5px; border-top: none;}.links-qt {position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; padding: 30px;display: flex; align-items: center; justify-content: center; flex-wrap: wrap; transform: scalex(0); transition: .8s;}.crdts {text-decoration:none; font-family: verdana; font-size: 9px; text-align: center}.qt-li:hover .links-qt {transform: scalex(1)}.links-qt a {width: 65px; height: 55px; background: #fff; border: 1px solid #f1f1f1; margin: 5px; display: flex; align-items: center;justify-content: center; flex-direction: column; color: #CCBDC9; border-radius: 5px;}.links-qt i {font-size: 20px;}.links-qt span {font: 7px 'Poppins'; text-transform: uppercase; font-weight:600; color: #999; margin-top: 2px;}</style><link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;400;600;800&display=swap" rel="stylesheet">