Esperanza (móvil)

<div class="MM053"><div class="MM053-in">

<div class="MM053-da"><b>Esperanza's Phone</b><i>•••</i></div>
<div class="MM053-txt" style="background-image: url(https://i.pinimg.com/564x/8c/da/56/8cda56357a0c31564fd8addebee661f3.jpg);">
<div class="MM053-img" style="background-image: url(https://i.postimg.cc/x1kmCXMf/08.png);"><span class="th th-volume"><b></b><b></b><b></b></span></div>

</div>

<div class="MM053-bo"><div class="MM053-on"><span class="th th-check-mark"></span><b>OnLine</b></div>
<a href="URL" title="Perfil"><span class="th th-user"></span></a>
<a href="URL" title="Mensaje Privado"><span class="th th-envelope"></span></a>
<label class="MM053-hide"><input type="checkbox"><span class="th th-plus-1"></span><div><b>Chatea Conmigo</b>
[code]<div class="MM054 mora">

<a href="URL_DEL_MOVIL"><span class="th th-bubble-heart"></span>Nombre del PJ</a>

<div class="MM054-sr"><div>

<uno class="azul">asdasdasd uno</uno>
<uno class="verde">asdasdasd dos</uno>
<uno class="rojo">asdasdasd tres</uno>
<uno class="nara">asdasdasd cuatro</uno>
<uno class="gris">asdasdasd cinco</uno>
<uno class="mora">asdasdasd seis</uno>

<dos class="azul">asdasdasd seis sdfas dasjdasd kajhsdiosaudasd asjkdalosd askjdhaieqsmnda askdjaiowdnksd askdj asdkjalsdasd</dos>
<dos><img src="https://i.imgur.com/P22hkRk.jpg?1"></dos>
<dos>asdasdasd seis sdfas dasjdasd kajhsdiosaudasd asjkdalosd askjdhaieqsmnda askdjaiowdnksd askdj asdkjalsdasd</dos>

<uno>asdasdasd uno</uno>
<uno>asdasdasd dos</uno>
<uno>asdasdasd tres</uno>
<uno>asdasdasd cuatro</uno>
<uno>asdasdasd cinco</uno>
<uno>asdasdasd seis</uno>

</div></div><div class="MM054-txt"><b></b><span class="th th-microphone"></span></div>
</div><a class="miMM" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a><link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">[/code]
</div></label>
</div>

</div></div><a class="miMM" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a><link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"><style>.MM053, .MM053 * { box-sizing: border-box; transition: .5s; } .MM053 input, .MM053 br { display: none; } .MM053 { width: 300px; border: 1px solid; margin: auto; position: relative; border-radius: 6px; min-height: 400px; background: #fff6; color: #EEE; --mm-01: #008686; } .mora { --mm-01: #B5407C; } .azul { --mm-01: #4047aa; } .verde { --mm-01: #5e8c61; } .rojo { --mm-01: #c13d3d; } .nara { --mm-01: #df6124; } .gris { --mm-01: #5e5e5e; } .MM053::before, .MM053::after { content: ""; position: absolute; left: 100%; width: 6px; border: 1px solid; background: #FFF6; border-radius: 0 5px 5px 0; } .MM053::before { top: 30px; height: 60px; } .MM053::after { height: 100px; top: 100px; } .MM053-in { margin: 10px; border: 1px solid; font: 10px calibri; background: var(--mm-01); border-radius: 3px; } .MM053-da { padding: 2px 5px; display: flex; align-items: center; text-transform: uppercase; letter-spacing: 1px; } .MM053-da > i { font-size: 20px; line-height: 10px; margin: -2px 0 0 auto; } .MM053-txt { background-color: #aaa; display: flex; flex-direction: column; align-items: center; border-top: 1px solid; justify-content: center; background-position: center; background-size: cover; } .MM053-img { width: 120px; height: 120px; border-radius: 50%; border: 3px solid; background-position: center; background-size: cover; position: relative; margin: 80px auto 250px; } .MM053-img > span { position: absolute; top: calc(100% + 2px); left: 50%; transform: translate(-50%, -50%); font-size: 14px; background: #EEE; border-radius: 50%; color: var(--mm-01); display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; } .MM053-img b { position: absolute; width: 32px; height: 32px; border-radius: 50%; border-style: solid; border-width: 1px; border-color: transparent var(--mm-01); animation: sound 3s infinite; pointer-events: none; } .MM053-img b + b { animation-delay: 1s; } .MM053-img b + b + b { animation-delay: 2s; } @keyframes sound { from { transform: scale(0); } to { transform: scale(7); opacity: 0; border-width: 5px; } } .MM053-bo { display: flex; align-items: center; justify-content: center; background: #EEE; position: relative; padding: 20px 0; } .MM053-on { border: 3px solid; border-radius: 20px; background: var(--mm-01); display: flex; align-items: center; transform: translateY(-50%); position: absolute; top: 0; overflow: hidden; z-index: 10; } .MM053-on b { padding: 3px 10px; font-size: 16px; background: #eee; border-radius: 30px 0 0 30px; color: #333; } .MM053-on span { padding: 0 8px; } .MM053-hide, .MM053-bo a { flex: 1; text-align: center; color: #999 !important; font-size: 20px; padding: 10px 0; position: relative; cursor: pointer; } .MM053-hide input:checked ~ span, .MM053-hide:hover > span, .MM053-bo a:hover span { color: var(--mm-01); animation-play-state: paused; } .MM053-hide > span { animation: shake 1.5s cubic-bezier(.36,.07,.19,.97) infinite; } .content a ~ a { border-left: 1px solid; border-right: 1px solid; } .MM053-hide > div { position: absolute; background: #FFF6; color: #FFF !important; width: 276px; height: 0; overflow: hidden; opa-city: 0; font: 12px calibri; pointer-events: none; right: 0; bottom: calc(100% + 20px); } .MM053-hide input:checked ~ div { height: 200px; opac-ity: 1; pointer-events: auto; } .MM053-hide > div > b { background: #EEE; display: block; color: var(--mm-01); padding: 3px; letter-spacing: 2px; } .MM053-hide .codebox { margin: 10px !important; height: 160px !important; } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } .miMM { display: block; font: bold 10px Calibri; letter-spacing: 2px; text-align: center; transition: 0.5s; text-transform: uppercase; padding: 3px; color: #444; } .miMM:hover { letter-spacing: 3px; }</style>