015 | My little rose

<div id="cupcake"><div class="cu1" style="background: url(https://via.placeholder.com/250x530)"><div class="cuci"></div></div><div class="cakes"><div class="cake"><input type="radio" id="cake-1" name="cake-group" checked><label for="cake-1" style="margin-top: 10px;"> <span class="th th-heart-1"> </span></label><div class="cupie"><div class="berry"> Nombre <n>del</n> personaje</div></div></div><div class="cake"><input type="radio" id="cake-2" name="cake-group"><label for="cake-2" style="margin-top: 60px; margin-left: -40px;"><span class="th th-bagel"></span></label><div class="cupie"><div id="apple1"> Basic <n>data</n></div>
<div id="pineapple"><n>Dato</n> <m>Respuesta</m></div><div id="pineapple"><n>Dato</n> <m>Respuesta</m></div> <div id="pineapple"><n>Dato</n> <m>Respuesta</m></div> <div id="pineapple"><n>Dato</n> <m>Respuesta</m></div> <div id="pineapple"><n>Dato</n> <m>Respuesta</m></div> <div id="pineapple"><n>Dato</n> <m>Respuesta</m></div> <div id="pineapple"><n>Dato</n> <m>Respuesta</m></div>

</div></div><div class="cake"><input type="radio" id="cake-3" name="cake-group"><label for="cake-3" style="margin-top: 60px; margin-left: 41px;"> <span class="th th-fire"></span> </label><div class="cupie"><div id="apple1" style="text-align: right; margin-top: 50px"> text or<n> something</n></div><div id="blueberry">

 ¡Personalidad, historia, lo que sea!

 </div></div></div><div class="cake"><input type="radio" id="cake-4" name="cake-group"><label for="cake-4" style="margin-top: 103px;"><span class="th th-star"></span> </label><div class="cupie">
<div class="yum"> Gustos </div> <div class="yum"> disgustos </div><br><div class="yam">

¡Gustos acá!

</div> <div class="yam">

¡Disgustos acá!

</div><div class="yim"> Extras </div><div class="yom">

¡Extras acá!

</div></div></div></div></div><div class="crdts"><a href="http://illmakegaycodesforu.tumblr.com/">— gitano;</a></div>

<style>.berry {font: 30px 'Roboto', sans-serif; text-align: center; line-height: 25px; color: #857E83; position: relative; top: 220px; text-transform: uppercase; letter-spacing: -2px;}.berry n{color: #FFA4BB}#apple1 {padding: 10px; border: 1px solid #DCDCDC; width: 180px; margin: 0 auto; font: 8px verdana; text-transform: uppercase; font-weight: bold; color: #857E83; overflow: hidden; letter-spacing: 1px; position: relative; margin-top: 100px;}#apple1 n {color: #FFA4BB;}#pineapple {background: #fff; width: 180px; padding: 10px; margin: 0 auto; border: 1px solid #DCDCDC; position: relative; top: 0px; font: 9px verdana; color: #857E83; text-align: right; margin-top: 2px;}#pineapple n {float: left; color: #FFA4BB; text-transform: uppercase; font-weight: bold;}#blueberry {background: #fff; width: 160px; padding: 20px; margin: 0 auto; outline: 1px solid #DCDCDC; position: relative; top:10px; font: 9px verdana; color: #857E83; text-align: justify; margin-top: 2px; height: 320px; overflow: auto; border-top: 10px solid #fff; border-bottom: 10px solid #fff;}.yum {padding: 10px; border: 1px solid #DCDCDC; width: 90px; margin: 0 auto; font: 8px verdana; text-transform: uppercase; font-weight: bold; color: #857E83; letter-spacing: 1px; position: relative; display: inline-block; top: 60px; left: 16px; text-align: center;}.yam {padding: 10px; border: 1px solid #DCDCDC; width: 90px; margin: 0 auto; font: 8px verdana; color: #857E83; position: relative; display: inline-block; top: 65px; left: 16px; text-align: justify; height: 100px; overflow: auto;}.yim {padding: 10px; border: 1px solid #DCDCDC; width: 205px; margin: 0 auto; font: 8px verdana; text-transform: uppercase; font-weight: bold; color: #857E83; letter-spacing: 1px; position: relative; top: 70px; left: 5px;text-align: center;}.yom {padding: 10px; border: 1px solid #DCDCDC; width: 205px; font: 8px verdana; color: #857E83; position: relative; display: inline-block; top: 75px; left: 16px; text-align: justify; height: 120px; overflow: auto;}#cupcake {width: 500px; height: 530px; background: #fff; border: 1px solid #FFA4BB; outline: 10px solid #fff; margin: 0 auto; margin-top: 20px;padding: 10px;}.ficha img{ position: absolute; right: 0px; top: 0px; width: 380px; height: 500px;}.cu1 {width: 250px; height: 530px;}.cuci {width: 125px; height: 125px; background: #fff; transform: rotate(45deg); position: relative; top: 330px; margin: 0 auto; border: 1px solid #FFA4BB; outline: 10px solid #fff;}.cakes {position: relative; height: 500px; width: 500px; clear: both; position: relative; top: -500px;}.crdts {text-decoration:none; font-family: verdana; font-size: 9px; text-align: center; margin-top: 10px}.cake label {display: block; width: 40px; padding: 5px; color: #FFA4BB; font-size: 23px;text-transform: uppercase; letter-spacing: 3px; text-align: center; position: absolute; left: 100px; top: 290px; back ground: #949}.cake [type=radio] {display: none;}[type=radio]:checked ~ label ~ .cupie { z-index: 1; opacity: 1; filter: alpha(opacity=100);}.cupie {width: 250px; height: 530px;position: absolute; top: -30px; left: 250px; text-align: justify; opacity: 0; filter: alpha(opacity=0); background: #fff; transition: 0.9s;}[type=radio]:checked ~ label {color: #FFA4BB; border-bottom: 0px; z-index: 2;}[type=radio]:checked ~ label ~ .cupie { z-index: 1;}</style>

<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">