Chocolate Memories Cronología

---------CHOCOLATE MEMORIES PARA FORO MODERNBB----------

<center><div class="cl"><div class="cltit">Chocolate Memories</div>
<div class="cllink"><a href="/">Mensaje Privado</a><a href="/">Registro del Personaje</a></div>
<div class="clca"><div class="ca1"><div class="clnum">I</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div><div class="ca2" style="background-image: url('https://i.imgur.com/6eWHQrX.jpg')";><div class="catit"><a href=/">La historia comienza</a></div></div></div><div class="clca"><div class="ca4" style="background-image: url('https://i.imgur.com/Sqdvhov.jpg')";><div class="catit2"><a href=/">Por las segundas partes...</a></div></div><div class="ca3"><div class="clnum2">II</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div></div><div class="clca"><div class="ca5"><div class="clnum">III</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div><div class="ca6" style="background-image: url('https://i.imgur.com/y0mw3Y5.jpg')";><div class="catit4"><a href=/">Hay cosas que pueden mejorar...</a></div></div></div><div class="clca"><div class="ca7" style="background-image: url('https://i.imgur.com/kFmWGUm.jpg')";><div class="catit3"><a href=/">En otras palabras...</a></div></div><div class="ca8"><div class="clnum2">IV</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div></div><div class="clca"><div class="ca1"><div class="clnum">V</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div><div class="ca2" style="background-image: url('https://i.imgur.com/KZ84tE2.jpg')";><div class="catit"><a href=/">Continuará...</a></div></div></div>
</div><a href="https://athenea-owl.tumblr.com/" style="font-family: calibri;font-size: 10px;letter-spacing: 2px; color: chocolate;">Athenea</a></center>

<style> .cl{font-family: roboto; width: 450px; height: auto; background: #222; padding: 25px; text-align: center; font-size: 10px; color: #d1d1d1; border: 10px solid #111} .cltit{font-family: times; font-size: 30px; background: #111; padding: 18px; letter-spacing: 4px; outline: 4px double #111; outline-offset: 4px; margin-bottom: 15px; color: chocolate; margin-top: 10px;} .cllink{display: inline-block; margin-bottom: 25px;} .cllink a{color: #111; font-family: 'Roboto'; font-size: 8px; font-weight: bold; text-decoration: none; text-transform: uppercase; background: chocolate; padding: 5px; letter-spacing: 2px; outline: 3px double chocolate; margin: 0px 15px 0px 15px;} .clca{display: flex;} .ca1{background: transparent; width: 250px; height: 150px; padding: 15px; text-align: justify; border-top: 4px double chocolate; border-right: 15px double chocolate;} .ca2{width: 150px; height: 150px; font-family: roboto; text-align: center; padding: 15px; background-position: center; background-size: cover; border-bottom: 4px double chocolate;} .ca3{background: transparent; width: 250px; height: 150px; padding: 15px; text-align: justify; border-right: 15px double chocolate;} .ca4{width: 150px; height: 150px; font-family: roboto; text-align: center; padding: 15px; background-position: center; background-size: cover;} .clnum{position: absolute; width: 30px; height: 30px; float: right; z-index: 2; background: #000; border-radius: 15px; color: #d1d1d1; text-align: center; padding: 4px; font-family: times; font-weight: bold; border: 2px solid; margin: -30px 0px 0px 200px; font-size: 16px;} .clnum2{position: absolute; width: 30px; height: 30px; float: right; z-index: 2; background: #000; border-radius: 15px; color: #d1d1d1; text-align: center; padding: 5px; font-family: times; font-weight: bold; border: 2px solid; margin: -30px 0px 0px 58px; font-size: 16px;} .ca5{background: transparent; width: 250px; height: 150px; padding: 15px; text-align: justify; border-right: 15px double chocolate; border-bottom: 4px double chocolate;} .ca6{width: 150px; height: 150px; font-family: roboto; text-align: center; padding: 15px; background-position: center; background-size: cover; border-top: 4px double chocolate;} .ca8{background: transparent; width: 250px; height: 150px; padding: 15px; text-align: justify;} .ca7{width: 150px; height: 150px; font-family: roboto; text-align: center; padding: 15px; background-position: center; background-size: cover; border-left: 15px double chocolate;} .catit{background: #f5f5f580; width: 143px; position: absolute; margin-top: -15px; margin-left: -15px; height: 146px; padding: 60px 0px 0px 0px; border-right: 4px double chocolate; border-top: 4px double chocolate; opacity: 0;} .catit a, .catit2 a, .catit3 a, .catit4 a{font-family: Gidugu; color: #222; font-size: 14px;} .catit2{background: #f5f5f580; width: 143px; position: absolute; margin-top: -15px; margin-left: -15px; height: 150px; padding: 60px 0px 0px 0px; opacity: 0; border: 4px double chocolate;} .catit3{background: #f5f5f580; width: 128px; position: absolute; margin-top: -15px; margin-left: -15px; height: 150px; padding: 60px 0px 0px 0px; opacity: 0;} .catit3{background: #f5f5f580; width: 128px; position: absolute; margin-top: -15px; margin-left: -15px; height: 150px; padding: 60px 0px 0px 0px; opacity: 0; border-right: 4px double chocolate;} .catit4{background: #f5f5f580; width: 143px; position: absolute; margin-top: -15px; margin-left: -15px; height: 150px; padding: 60px 0px 0px 0px; opacity: 0; border-right: 4px double chocolate; border-bottom: 4px double chocolate;} .ca2:hover .catit{transform: scale(1,1); transition:0.2s linear; opacity: 1;} .ca4:hover .catit2{transform: scale(1,1); transition:0.2s linear; opacity: 1;} .ca6:hover .catit4{transform: scale(1,1); transition:0.2s linear; opacity: 1;} .ca7:hover .catit3{transform: scale(1,1); transition:0.2s linear; opacity: 1;}</style><link href="https://fonts.googleapis.com/css2?family=Gidugu&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">


---------CHOCOLATE MEMORIES PARA FORO PHPBB----------

<center><div class="cl"><div class="cltit">Chocolate Memories</div>
<div class="cllink"><a href="/">Mensaje Privado</a><a href="/">Registro del Personaje</a></div>
<div class="clca"><div class="ca1"><div class="clnum">I</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div><div class="ca2" style="background-image: url('https://i.imgur.com/6eWHQrX.jpg')";><div class="catit"><a href=/">La historia comienza</a></div></div></div><div class="clca"><div class="ca4" style="background-image: url('https://i.imgur.com/Sqdvhov.jpg')";><div class="catit2"><a href=/">Por las segundas partes...</a></div></div><div class="ca3"><div class="clnum2">II</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div></div><div class="clca"><div class="ca5"><div class="clnum">III</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div><div class="ca6" style="background-image: url('https://i.imgur.com/y0mw3Y5.jpg')";><div class="catit4"><a href=/">Hay cosas que pueden mejorar...</a></div></div></div><div class="clca"><div class="ca7" style="background-image: url('https://i.imgur.com/kFmWGUm.jpg')";><div class="catit3"><a href=/">En otras palabras...</a></div></div><div class="ca8"><div class="clnum3">IV</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div></div><div class="clca"><div class="ca1"><div class="clnum">V</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div><div class="ca2" style="background-image: url('https://i.imgur.com/KZ84tE2.jpg')";><div class="catit"><a href=/">Continuará...</a></div></div></div>
</div><a href="https://athenea-owl.tumblr.com/" style="font-family: calibri;font-size: 10px;letter-spacing: 2px; color: chocolate;">Athenea</a></center>

<style> .cl{font-family: roboto; width: 400px; height: auto; background: #222; padding: 25px; text-align: center; font-size: 10px; color: #d1d1d1; border: 10px solid #111} .cltit{font-family: times; font-size: 30px; background: #111; padding: 18px; letter-spacing: 4px; outline: 4px double #111; outline-offset: 4px; margin-bottom: 15px; color: chocolate; margin-top: 10px;} .cllink{display: inline-block; margin-bottom: 25px;} .cllink a{color: #111; font-family: 'Roboto'; font-size: 8px; font-weight: bold; text-decoration: none; text-transform: uppercase; background: chocolate; padding: 5px; letter-spacing: 2px; outline: 3px double chocolate; margin: 0px 15px 0px 15px;} .clca{display: flex;} .ca1{background: transparent; width: 200px; height: 120px; padding: 15px; text-align: justify; border-top: 4px double chocolate; border-right: 15px double chocolate;} .ca2{width: 120px; height: 120px; font-family: roboto; text-align: center; padding: 15px; background-position: center; background-size: cover; border-bottom: 4px double chocolate;} .ca3{background: transparent; width: 200px; height: 120px; padding: 15px; text-align: justify; border-right: 15px double chocolate;} .ca4{width: 120px; height: 120px; font-family: roboto; text-align: center; padding: 15px; background-position: center; background-size: cover;} .clnum{position: absolute; width: 20px; height: 20px; float: right; z-index: 2; background: #000; border-radius: 30px; color: #d1d1d1; text-align: center; padding: 4px; font-family: times; font-weight: bold; border: 2px solid; margin: -30px 0px 0px 200px; font-size: 16px;} .clnum2{position: absolute; width: 20px; height: 20px; float: right; z-index: 2; background: #000; border-radius: 30px; color: #d1d1d1; text-align: center; padding: 5px; font-family: times; font-weight: bold; border: 2px solid; margin: -30px 0px 0px 50px; font-size: 16px;} .clnum3{position: absolute; width: 20px; height: 20px; float: right; z-index: 2; background: #000; border-radius: 30px; color: #d1d1d1; text-align: center; padding: 5px; font-family: times; font-weight: bold; border: 2px solid; margin: -30px 0px 0px 40px; font-size: 16px;} .ca5{background: transparent; width: 200px; height: 120px; padding: 15px; text-align: justify; border-right: 15px double chocolate; border-bottom: 4px double chocolate;} .ca6{width: 120px; height: 120px; font-family: roboto; text-align: center; padding: 15px; background-position: center; background-size: cover; border-top: 4px double chocolate;} .ca8{background: transparent; width: 200px; height: 120px; padding: 15px; text-align: justify;} .ca7{width: 120px; height: 120px; font-family: roboto; text-align: center; padding: 15px; background-position: center; background-size: cover; border-left: 15px double chocolate;} .catit{background: #f5f5f580; width: 146px; position: absolute; margin-top: -15px; margin-left: -15px; height: 86px; padding: 60px 0px 0px 0px; border-right: 4px double chocolate; border-top: 4px double chocolate; opacity: 0;} .catit a, .catit2 a, .catit3 a, .catit4 a{font-family: Gidugu; color: #222; font-size: 14px;} .catit2{background: #f5f5f580; width: 143px; position: absolute; margin-top: -15px; margin-left: -15px; height: 82px; padding: 60px 0px 0px 0px; opacity: 0; border: 4px double chocolate;} .catit3{background: #f5f5f580; width: 128px; position: absolute; margin-top: -15px; margin-left: -15px; height: 82px; padding: 60px 0px 0px 0px; opacity: 0;} .catit3{background: #f5f5f580; width: 146px; position: absolute; margin-top: -15px; margin-left: -15px; height: 90px; padding: 60px 0px 0px 0px; opacity: 0; border-right: 4px double chocolate;} .catit4{background: #f5f5f580; width: 146px; position: absolute; margin-top: -15px; margin-left: -15px; height: 86px; padding: 60px 0px 0px 0px; opacity: 0; border-right: 4px double chocolate; border-bottom: 4px double chocolate;} .ca2:hover .catit{transform: scale(1,1); transition:0.2s linear; opacity: 1;} .ca4:hover .catit2{transform: scale(1,1); transition:0.2s linear; opacity: 1;} .ca6:hover .catit4{transform: scale(1,1); transition:0.2s linear; opacity: 1;} .ca7:hover .catit3{transform: scale(1,1); transition:0.2s linear; opacity: 1;}</style><link href="https://fonts.googleapis.com/css2?family=Gidugu&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">