022 | Sweet Epiphany

<div id="xiao"><div id="xiaole"><div class="lena"><span class="th th-star"> </span><n> Dato </n><m> Respuesta </m><n> Dato </n><m> Respuesta </m><n> Dato </n><m> Respuesta </m><n> Dato </n><m> Respuesta </m><n> Dato </n><m> Respuesta </m></div><div class="len"> <div class="imri1" style="background:url(https://via.placeholder.com/80)"></div><div class="imri1" style="background:url(https://via.placeholder.com/80)"></div><div class="imri1" style="background: url(https://via.placeholder.com/80)"></div></div></div><div id="xiaori"><div class="rina"><n> Nombre del Personaje </n><m>
Aquí va tu texto.
</m></div><div class="rin"><div class="imri2" style="background: url(https://via.placeholder.com/310)"> </div></div></div></div><div class="crdts"><a href="http://illmakegaycodesforu.tumblr.com/">— gitano;</a></div>

<style>#xiao {background: #FEFEFE; margin: 0 auto; width: 520px; height: 380px; overflow: hidden;}#xiaole {width: 140px; height: 378px; background: #F9F9F9; border: 1px solid #EAEAEA;}.len {width: 140px; height: 378px; background: #98B8AE; border-width: 1px; border-style: solid; border-color: #629586 transparent #629586 #629586; position: relative; top: -379px; left: 0px; -webkit-transition:0.9s ease-in 0.4s; transition-timing-function: cubic-bezier(0.5,0,0.2,1);}#xiaole:hover .len {left: -151px; -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);}.lena {width: 140px; height: 378px;text-align: center;}.lena span {color: #fff; font-size: 20px; background: #98B8AE; padding: 10px; border-radius: 100%; border: 1px solid #629586; margin-top: 20px; margin-bottom: 10px;}.lena n {display: block; background: #98B8AE; border: 1px solid #629586; margin: 0 auto; width: 100px; font: 8px calibri; text-transform: uppercase; color: #fff; letter-spacing: 1px; padding: 5px;margin-top: 5px;}.lena m {display: block; background: #fff; border: 1px solid #EAEAEA; margin: 0 auto; width: 100px; font: 10px calibri; color: #444; padding: 5px; margin-top: -1px; text-align: justify;}.crdts {text-decoration:none; font-family: verdana; font-size: 9px; text-align: center;}.imri1 {width: 80px; height: 80px; background-size: 100%!important; border: 10px solid #FEFEFE; outline: 1px solid #629586; margin: 0 auto; margin-top: 15px; position: relative; top: 8px;}#xiaori {width: 376px; height: 378px; background: #FEFEFE; border-width: 1px; border-style: solid; border-color: #EAEAEA #EAEAEA #EAEAEA transparent; float: right; position: relative; top: -380px}.rin {width: 376px; height: 378px; background: #98B8AE; border-width: 1px; border-style: solid; border-color: #629586 #629586 #629586 transparent; position: relative; top: -392px; left: -1px;-webkit-transition:0.9s ease-in 0.4s; transition-timing-function: cubic-bezier(0.5,0,0.2,1);}#xiaori:hover .rin {left: 380px; -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);}.rina {width: 376px; height: 378px;}.rina n {background: #F9F9F9; border: 1px solid #EAEAEA; padding: 20px;display: block;margin: 13px; font: 20px 'Abril Fatface', cursive; color: #98B8AE; height: 30px;}.rina m {display: block; background: #f9f9f9; margin: 13px; border: 1px solid #EAEAEA; padding: 25px; font: 11px calibri; color: #444; text-align: justify; overflow: auto; height:213px}.imri2 {width: 310px; height: 310px; background-size: 100%!important; border: 10px solid #FEFEFE; outline: 1px solid #629586; margin: 0 auto; margin-top: 15px; position: relative; top: 8px;}</style><link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">