Mint Lemonade (indice)

<div class="MM041">

<div class="MM041-img" style="background-image: url(https://i.pinimg.com/564x/1c/95/94/1c95941950ac5cfa42f6575f8987d196.jpg);"></div>
<div class="MM041-x"><strong><b>Mint</b> Lemonade</strong>
<span>Gummi bears bear claw candy canes. Candy cake pudding lemon drops apple pie chocolate bar croissant powder.

Cake tart pastry gummies dragée.</span>

<div>
<a href="URL" class="th th-lemon"><b>Expediente</b></a>
<a href="URL" class="th th-apple"><b>Crono</b></a>
<a href="URL" class="th th-strawberry"><b>Relas</b></a>
<a href="URL" class="th th-coconut"><b>Móvil</b></a>
<a href="URL" class="th th-pineapple"><b>Random</b></a>
</div></div>
</div><a class="miMM" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a><link href="https://fonts.googleapis.com/css2?family=Alata&family=Montserrat:wght@400;700&display=swap" rel="stylesheet"><link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"><style>.MM041, .MM041 * { box-sizing: border-box; transition: .5s; } .MM041 br { display: none; } .MM041 { --mm-01: #8bc966; --mm-02: #1d353f; --mm-03: #133038; --mm-04: #5b6f67; --mm-05: #c7ccce; width: 500px; margin: auto; border: 1px solid var(--mm-03); font: 10px Montserrat; text-align: center; padding: 20px; background: linear-gradient(-10deg, var(--mm-02) 50%, var(--mm-03) 50% ); min-height: 300px; display: flex; } .MM041-img { flex: 1; border: 1px solid var(--mm-04); box-shadow: 0 10px 20px -10px #0009; background-position: center; background-size: cover; } .MM041-x { width: 50%; border: 1px solid var(--mm-04); color: var(--mm-05); border-left: none; margin: 10px 10px 10px 0; padding: 30px; text-shadow: 1px 1px var(--mm-03), -1px 1px var(--mm-03). 1px -1px var(--mm-03), -1px -1px var(--mm-03); display: flex; flex-direction: column; justify-content: center; } .MM041-x > strong { font: 16px Alata; } .MM041-x b { color: var(--mm-01); } .MM041-x > span { margin: 20px 0; text-transform: uppercase; font-size: 8px; letter-spacing: 1px; } .MM041-x > div { display: flex; justify-content: center; } .MM041-x > div > a { color: var(--mm-01); font-size: 16px; position: relative; margin: 0 8px; } .MM041-x > div > a:hover::before { transform: scale(1.4); } .MM041-x > div > a b { position: absolute; font-size: 9px; text-transform: uppercase; color: var(--mm-05); background: var(--mm-03); top: 0; left: 50%; transform: translate(-50%); letter-spacing: 1px; padding: 5px 8px; border: 1px solid var(--mm-04); opacity: 0; pointer-events: none; } .MM041-x > div > a:hover b { top: calc(100% + 10px); opacity: 1; } .MM041-x > span::after, .MM041-x > strong::after { content: ""; width: 50px; display: block; border-top: 2px solid var(--mm-01); margin: 20px auto 0; } .MM041-x > span br { display: block; } .MM041-x > span br + br { margin: 5px; } .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>