031 | You're the One That I Want

<div id="hue"><div id="hua">
  <div class="but"><span class="th th-broken-heart"></span><div class="bot">Nombre del personaje</div></div>
  <div class="but"><span class="th th-clock"></span><div class="bot">Edad / cumpleaños</div></div>
  <div class="but"><span class="th th-star"></span><div class="bot">Nacionalidad</div></div>
  <div class="but"><span class="th th-cloud-3"></span><div class="bot">Grupo</div></div>
  <div class="but"><span class="th th-sun"></span><div class="bot">Otras opciones</div></div>
  <div class="but"><span class="th th-moon"></span><div class="bot">Otras opciones</div></div>
  <div class="but"><span class="th th-mapple-leaf"></span><div class="bot">Otras opciones</div></div>
  <div class="but"><span class="th th-tinder"></span><div class="bot">Otras opciones</div></div>
  <div class="but"><span class="th th-planet-1"></span><div class="bot">Otras opciones</div></div>
 </div><div id="hui" style="background: url(https://via.placeholder.com/250x470)"></div><div id="hout"><div id="houb"> <txt>

Espacio para texto. Pon algo aquí, uh.

</txt></div><div id="hou"> <n>You're the One <br>That I Want</n><m>
I've got chills. They're multiplying. And I'm losing control. 'Cause the power You're supplying, Is electrifying You better shape up, 'Cause you need a man And my heart is set on you. You better shape up,You better understand To my heart I must be true.
</m></div></div></div><div class="crdts"><a href="http://illmakegaycodesforu.tumblr.com/">— gitano;</a></div>

<style>#hue {width: 580px; height: 470px; background: #fff; overflow: hidden; border:1px solid #eee; margin: 0 auto;}#hua {width: 50px; height: 470px; background: #fff;}.but {font-size: 15px; font-weight: bold; color: #fff; background: #c5b3c2; border-radius: 100%; text-align: center; width: 14px; height: 14px; padding: 10px; position: relative; top: 32px; margin: 0 auto; margin-top: -20px;}.but .bot {background: #fff; position: relative; z-index: 2; width: 0px; left:25px; top: -26px; font: 9px calibri; padding: 0px; text-transform: uppercase; height: 13px; border-radius: 0px 25px 25px 0px; color: #fff; padding: 10px 0px; overflow: hidden;transition: 1.5s;}.but:hover .bot {opacity: 1; width: 220px; left: 25px; padding: 10px; color: #222;transition: .7s;} #hui {width: 250px; height: 470px; position: relative; top: -470px; left: 50px;}#hout {position: relative; top: -920px; left: 300px; width: 280px; height: 470px}#houb {width: 280px; height: 470px}#houb txt {display: block; height: 360px; overflow: auto; margin: 20px; font: 11px calibri; text-align: justify; padding-right: 10px; border: 1px solid #eaeaea; padding: 20px; margin-top: 15px}#hout:hover #hou {left: 300px; -webkit-transition:1.9s ease-in 0s; transition:0.9s ease-in 0.2s; transition-timing-function: cubic-bezier(0.3,0,0.2,1);}#hou {width: 280px; height: 470px; background: #c5b3c2; position: relative; top: -505px; left: 0px; -webkit-transition:1.9s ease-in 0s; transition:0.9s ease-in 0.2s;}#hou n {font: 35px 'Dosis', sans-serif; font-weight: bold; color: #fff; position: relative; top: 100px; display: block; width: 200px; margin: 0 auto; line-height: 98%}.crdts {text-decoration:none; font-family: verdana; font-size: 9px; text-align: center;}#hou m {display: block; color: #fff; position: relative; top: 100px; width: 200px; margin: 0 auto; text-align: justify; font: 9px calibri; text-transform: uppercase; margin-top: 10px; border-bottom: 1px solid; padding-bottom: 10px}</style><link href="https://fonts.googleapis.com/css?family=Dosis:400,800" rel="stylesheet"><link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">