CLARO:
<div class="MM008"><label style="color: #d98ca2;"><input type="checkbox" /><div class="MM008-tt"><i><i></i></i>Título Aquí <b></b></div>
<div class="MM008-dt"><div>
<div class="MM008-img"><div style="background-image: url(https://i.postimg.cc/25ZCHwcy/01.jpg);"></div></div>
<div class="MM008-flex"><div class="MM008-ti"><b>Palabra</b><i>Subtitulo Aquí</i></div>
<div class="MM008-txt"><div>Gingerbread fruitcake candy jelly beans. Cake pudding lemon drops cookie dragée biscuit cheesecake. Gummi bears dragée wafer powder chocolate cake macaroon chupa chups caramels.

Apple pie cookie icing oat cake. Halvah danish chupa chups carrot cake toffee sweet roll. Bear claw gummi bears tart. Carrot cake chocolate bar bonbon macaroon sweet lollipop halvah.

Toffee sugar plum pastry. Sweet roll pastry jujubes lemon drops lollipop cookie. Jelly beans cake sweet roll gummi bears candy canes chocolate cake lollipop. Muffin cupcake tiramisu brownie brownie caramels pastry.</div></div></div></div></div></label>

<label style="color: #e8a469;"><input type="checkbox" /><div class="MM008-tt"><i><i></i></i>Título Aquí <b></b></div>
<div class="MM008-dt"><div>
<div class="MM008-img"><div style="background-image: url(https://i.postimg.cc/26NrgZMw/02.jpg);"></div></div>
<div class="MM008-flex"><div class="MM008-ti"><b>Palabra</b><i>Subtitulo Aquí</i></div>
<div class="MM008-txt"><div>Gingerbread fruitcake candy jelly beans. Cake pudding lemon drops cookie dragée biscuit cheesecake. Gummi bears dragée wafer powder chocolate cake macaroon chupa chups caramels.

Apple pie cookie icing oat cake. Halvah danish chupa chups carrot cake toffee sweet roll. Bear claw gummi bears tart. Carrot cake chocolate bar bonbon macaroon sweet lollipop halvah.

Toffee sugar plum pastry. Sweet roll pastry jujubes lemon drops lollipop cookie. Jelly beans cake sweet roll gummi bears candy canes chocolate cake lollipop. Muffin cupcake tiramisu brownie brownie caramels pastry.</div></div></div></div></div></label>

<label style="color: #7dc173;"><input type="checkbox" /><div class="MM008-tt"><i><i></i></i>Título Aquí <b></b></div>
<div class="MM008-dt"><div>
<div class="MM008-img"><div style="background-image: url(https://i.postimg.cc/63VtKQNN/03.jpg);"></div></div>
<div class="MM008-flex"><div class="MM008-ti"><b>Palabra</b><i>Subtitulo Aquí</i></div>
<div class="MM008-txt"><div>Gingerbread fruitcake candy jelly beans. Cake pudding lemon drops cookie dragée biscuit cheesecake. Gummi bears dragée wafer powder chocolate cake macaroon chupa chups caramels.

Apple pie cookie icing oat cake. Halvah danish chupa chups carrot cake toffee sweet roll. Bear claw gummi bears tart. Carrot cake chocolate bar bonbon macaroon sweet lollipop halvah.

Toffee sugar plum pastry. Sweet roll pastry jujubes lemon drops lollipop cookie. Jelly beans cake sweet roll gummi bears candy canes chocolate cake lollipop. Muffin cupcake tiramisu brownie brownie caramels pastry.</div></div></div></div></div></label>

</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"><link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet"><style>.MM008, .MM008 * { box-sizing: border-box; scrollbar-color: #0006 #0003; scrollbar-width: thin; transition: .5s; }.MM008-flex > br,  .MM008 > br, .MM008-dt > div > br, .MM008 input, .MM008 > label > br { display: none; } .MM008 label ~ label { margin-top: 5px; } .MM008 div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #0006 !important; } .MM008 div::-webkit-scrollbar-thumb { background: #0003 !important; } .MM008 { --mm-uno: #FFF; width: 400px; margin: auto; } .MM008.dark { --mm-uno: #111; } .MM008 > label { background: var(--mm-uno); display: block; margin: 0; border-radius: 10px; border: 3px solid var(--mm-uno); box-shadow: 0 20px 20px -20px #0006; overflow: hidden; } .MM008-tt { box-shadow: inset 0 0 0 50px; padding: 5px 7px; -webkit-text-fill-color: var(--mm-uno); font: bold 10px calibri; text-transform: uppercase; letter-spacing: 2px; border-bottom: 3px solid var(--mm-uno); cursor: crosshair; } .MM008 input:checked ~ .MM008-tt { border-bottom: 0px solid var(--mm-uno); } .MM008-tt b { float: right; font-size: 8px; margin: -5px -7px; padding: 7px; border-left: 3px solid var(--mm-uno); } .MM008-tt b:before { content: "\eabd"; font-family: honeybee; } .MM008 input:checked ~ .MM008-tt b:before { content: "\eb20"; } .MM008-dt { height: 300px; overflow: hidden; position: relative; box-shadow: inset 0 0 500px -100px; } .MM008 input:checked ~ .MM008-dt { height: 0px; } .MM008-dt > div { height: 300px; position: relative; padding: 20px; cursor: auto; } .MM008-img { width: 180px; height: 180px; border: 10px solid var(--mm-uno); border-radius: 30px; transform: rotate(45deg); box-shadow: 5px 5px 10px -5px, inset 5px 5px 10px -5px #0005; background: #FFF; overflow: hidden; position: absolute; top: -20px; left: -20px; display: flex; align-items: center; justify-content: center; } .MM008-img > div { transform: rotate(-45deg); height: 130%; min-width: 130%; mix-blend-mode: multiply; background-position: center; background-size: cover; } .MM008-dt::before { content: ""; position: absolute; top: 0; right: 0; background-image: repeating-radial-gradient(var(--mm-uno), var(--mm-uno) 3px, #0000 3px, #0000 20px); width: 150px; bottom: 0; background-size: 30px 30px; background-position: center; } .MM008-flex { height: 100%; position: relative; margin-left: 120px; display: flex; flex-direction: column; } .MM008-ti { position: relative; background: var(--mm-uno); text-align: center; padding: 12px 8px 10px 10px; border-radius: 5px; box-shadow: 0 5px 20px -10px; border: 3px solid; } .MM008-ti::before { content: ""; position: absolute; top: calc(100% - 10px); width: 20px; height: 20px; left: calc(50% - 10px); border: 3px solid; border-radius: 0 5px; background: var(--mm-uno); transform: rotate(-45deg); clip-path: polygon(0 0, 0 100%, 100% 100%); } .MM008-ti b { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; font: 70px/25px Debby; letter-spacing: 5px; padding-left: 5px; text-transform: lowercase; opacity: .3; } .MM008-ti i { position: relative; font: bold 10px Montserrat; letter-spacing: 2px; text-shadow: 1px 1px var(--mm-uno), -1px 1px var(--mm-uno), 1px -1px var(--mm-uno), -1px -1px var(--mm-uno); } .MM008-txt { margin-top: 15px; background: var(--mm-uno); border: 3px solid; border-radius: 5px; flex: 1; box-shadow: 0 5px 15px -5px; } .MM008-txt > div { height: 200px; overflow: auto; border: 10px solid transparent; font: 10px montserrat; color: #777; text-align: justify; hyphens: auto; padding-right: 3px; } .MM008-txt > div::first-letter { font-size: 50px; float: left; padding: 13px 10px 8px; } .MM008-tt > i { margin: 0 5px 0 0; } .MM008-tt > i::after, .MM008-tt > i::before, .MM008-tt > i > i { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--mm-uno); border-radius: 50%; margin-right: 5px; animation: brillo 2s linear infinite; } @keyframes brillo { 0% { opacity: .5; } 20% { opacity: 1; } 40% { opacity: .5; } 100% { opacity: .5; } } .MM008-tt > i::after { animation-delay: .4s; } .MM008-tt > i > i { animation-delay: .2s; } @font-face { font-family: Debby; src: url(https://dl.dropbox.com/s/qn32ntnqf2m25sw/Debby.ttf); } .miMM { display: block; font: bold 10px Calibri; letter-spacing: 2px; text-align: center; transition: .5s; text-transform: uppercase; padding: 3px; } .miMM:hover { letter-spacing: 3px; }</style>



OSCURO:
<div class="MM008 dark"><label style="color: #953f4b;"><input type="checkbox" /><div class="MM008-tt"><i><i></i></i>Título Aquí <b></b></div>
<div class="MM008-dt"><div>
<div class="MM008-img"><div style="background-image: url(https://i.postimg.cc/25ZCHwcy/01.jpg);"></div></div>
<div class="MM008-flex"><div class="MM008-ti"><b>Palabra</b><i>Subtitulo Aquí</i></div>
<div class="MM008-txt"><div>Gingerbread fruitcake candy jelly beans. Cake pudding lemon drops cookie dragée biscuit cheesecake. Gummi bears dragée wafer powder chocolate cake macaroon chupa chups caramels.

Apple pie cookie icing oat cake. Halvah danish chupa chups carrot cake toffee sweet roll. Bear claw gummi bears tart. Carrot cake chocolate bar bonbon macaroon sweet lollipop halvah.

Toffee sugar plum pastry. Sweet roll pastry jujubes lemon drops lollipop cookie. Jelly beans cake sweet roll gummi bears candy canes chocolate cake lollipop. Muffin cupcake tiramisu brownie brownie caramels pastry.</div></div></div></div></div></label>

<label style="color: #c14d30;"><input type="checkbox" /><div class="MM008-tt"><i><i></i></i>Título Aquí <b></b></div>
<div class="MM008-dt"><div>
<div class="MM008-img"><div style="background-image: url(https://i.postimg.cc/26NrgZMw/02.jpg);"></div></div>
<div class="MM008-flex"><div class="MM008-ti"><b>Palabra</b><i>Subtitulo Aquí</i></div>
<div class="MM008-txt"><div>Gingerbread fruitcake candy jelly beans. Cake pudding lemon drops cookie dragée biscuit cheesecake. Gummi bears dragée wafer powder chocolate cake macaroon chupa chups caramels.

Apple pie cookie icing oat cake. Halvah danish chupa chups carrot cake toffee sweet roll. Bear claw gummi bears tart. Carrot cake chocolate bar bonbon macaroon sweet lollipop halvah.

Toffee sugar plum pastry. Sweet roll pastry jujubes lemon drops lollipop cookie. Jelly beans cake sweet roll gummi bears candy canes chocolate cake lollipop. Muffin cupcake tiramisu brownie brownie caramels pastry.</div></div></div></div></div></label>

<label style="color: #137b86;"><input type="checkbox" /><div class="MM008-tt"><i><i></i></i>Título Aquí <b></b></div>
<div class="MM008-dt"><div>
<div class="MM008-img"><div style="background-image: url(https://i.postimg.cc/63VtKQNN/03.jpg);"></div></div>
<div class="MM008-flex"><div class="MM008-ti"><b>Palabra</b><i>Subtitulo Aquí</i></div>
<div class="MM008-txt"><div>Gingerbread fruitcake candy jelly beans. Cake pudding lemon drops cookie dragée biscuit cheesecake. Gummi bears dragée wafer powder chocolate cake macaroon chupa chups caramels.

Apple pie cookie icing oat cake. Halvah danish chupa chups carrot cake toffee sweet roll. Bear claw gummi bears tart. Carrot cake chocolate bar bonbon macaroon sweet lollipop halvah.

Toffee sugar plum pastry. Sweet roll pastry jujubes lemon drops lollipop cookie. Jelly beans cake sweet roll gummi bears candy canes chocolate cake lollipop. Muffin cupcake tiramisu brownie brownie caramels pastry.</div></div></div></div></div></label>

</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"><link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet"><style>.MM008, .MM008 * { box-sizing: border-box; scrollbar-color: #0006 #0003; scrollbar-width: thin; transition: .5s; }.MM008-flex > br,  .MM008 > br, .MM008-dt > div > br, .MM008 input, .MM008 > label > br { display: none; } .MM008 label ~ label { margin-top: 5px; } .MM008 div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #0006 !important; } .MM008 div::-webkit-scrollbar-thumb { background: #0003 !important; } .MM008 { --mm-uno: #FFF; width: 400px; margin: auto; } .MM008.dark { --mm-uno: #111; } .MM008 > label { background: var(--mm-uno); display: block; margin: 0; border-radius: 10px; border: 3px solid var(--mm-uno); box-shadow: 0 20px 20px -20px #0006; overflow: hidden; } .MM008-tt { box-shadow: inset 0 0 0 50px; padding: 5px 7px; -webkit-text-fill-color: var(--mm-uno); font: bold 10px calibri; text-transform: uppercase; letter-spacing: 2px; border-bottom: 3px solid var(--mm-uno); cursor: crosshair; } .MM008 input:checked ~ .MM008-tt { border-bottom: 0px solid var(--mm-uno); } .MM008-tt b { float: right; font-size: 8px; margin: -5px -7px; padding: 7px; border-left: 3px solid var(--mm-uno); } .MM008-tt b:before { content: "\eabd"; font-family: honeybee; } .MM008 input:checked ~ .MM008-tt b:before { content: "\eb20"; } .MM008-dt { height: 300px; overflow: hidden; position: relative; box-shadow: inset 0 0 500px -100px; } .MM008 input:checked ~ .MM008-dt { height: 0px; } .MM008-dt > div { height: 300px; position: relative; padding: 20px; cursor: auto; } .MM008-img { width: 180px; height: 180px; border: 10px solid var(--mm-uno); border-radius: 30px; transform: rotate(45deg); box-shadow: 5px 5px 10px -5px, inset 5px 5px 10px -5px #0005; background: #FFF; overflow: hidden; position: absolute; top: -20px; left: -20px; display: flex; align-items: center; justify-content: center; } .MM008-img > div { transform: rotate(-45deg); height: 130%; min-width: 130%; mix-blend-mode: multiply; background-position: center; background-size: cover; } .MM008-dt::before { content: ""; position: absolute; top: 0; right: 0; background-image: repeating-radial-gradient(var(--mm-uno), var(--mm-uno) 3px, #0000 3px, #0000 20px); width: 150px; bottom: 0; background-size: 30px 30px; background-position: center; } .MM008-flex { height: 100%; position: relative; margin-left: 120px; display: flex; flex-direction: column; } .MM008-ti { position: relative; background: var(--mm-uno); text-align: center; padding: 12px 8px 10px 10px; border-radius: 5px; box-shadow: 0 5px 20px -10px; border: 3px solid; } .MM008-ti::before { content: ""; position: absolute; top: calc(100% - 10px); width: 20px; height: 20px; left: calc(50% - 10px); border: 3px solid; border-radius: 0 5px; background: var(--mm-uno); transform: rotate(-45deg); clip-path: polygon(0 0, 0 100%, 100% 100%); } .MM008-ti b { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; font: 70px/25px Debby; letter-spacing: 5px; padding-left: 5px; text-transform: lowercase; opacity: .3; } .MM008-ti i { position: relative; font: bold 10px Montserrat; letter-spacing: 2px; text-shadow: 1px 1px var(--mm-uno), -1px 1px var(--mm-uno), 1px -1px var(--mm-uno), -1px -1px var(--mm-uno); } .MM008-txt { margin-top: 15px; background: var(--mm-uno); border: 3px solid; border-radius: 5px; flex: 1; box-shadow: 0 5px 15px -5px; } .MM008-txt > div { height: 200px; overflow: auto; border: 10px solid transparent; font: 10px montserrat; color: #777; text-align: justify; hyphens: auto; padding-right: 3px; } .MM008-txt > div::first-letter { font-size: 50px; float: left; padding: 13px 10px 8px; } .MM008-tt > i { margin: 0 5px 0 0; } .MM008-tt > i::after, .MM008-tt > i::before, .MM008-tt > i > i { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--mm-uno); border-radius: 50%; margin-right: 5px; animation: brillo 2s linear infinite; } @keyframes brillo { 0% { opacity: .5; } 20% { opacity: 1; } 40% { opacity: .5; } 100% { opacity: .5; } } .MM008-tt > i::after { animation-delay: .4s; } .MM008-tt > i > i { animation-delay: .2s; } @font-face { font-family: Debby; src: url(https://dl.dropbox.com/s/qn32ntnqf2m25sw/Debby.ttf); } .miMM { display: block; font: bold 10px Calibri; letter-spacing: 2px; text-align: center; transition: .5s; text-transform: uppercase; padding: 3px; } .miMM:hover { letter-spacing: 3px; }</style>