MM063.- Hello (baúl)

<div class="MM063"><div><b>Hello</b>
<span>La vida continua</span>

<div class="MM063-bo">
<a href="URL"><span class="th th-agenda-1"></span><b>Expediente</b></a>
<a href="URL"><span class="th th-calendar-1"></span><b>Crono</b></a>
<a href="URL"><span class="th th-diamond"></span><b>Inventario</b></a>
<a href="URL"><span class="th th-smartphone"></span><b>Móvil</b></a>
<a href="URL"><span class="th th-camera"></span><b>Galeria</b></a>
</div>

</div></div><a href="https://emmescodes.tumblr.com/" class="miMM">emme</a><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Open+Sans:wght@400;700&display=swap" rel="stylesheet"><link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"><style>.MM063, .MM063 * { box-sizing: border-box; transition: .3s; } .MM063 br { display: none; } .MM063 { width: 400px; margin: auto; border-radius: 40px; padding: 30px; box-shadow: 0 40px 40px -30px #0009; font: 10px Open Sans; color: #555; } .MM063-bo > a, .MM063 { background: linear-gradient(-45deg, #FFF, #e1e2e7); border-style: solid; border-width: 1px; border-color: #dddee2 #FFF #FFF #dddee2; } .MM063 > div { border-style: solid; border-width: 1px; border-color: #dddee2 #FFF #FFF #dddee2; border-radius: 20px; background: linear-gradient(-45deg, #e1e2e7, #FFF9); text-align: center; padding: 30px; display: flex; flex-direction: column; } .MM063 > div > b { font: 700 60px Josefin Sans; text-transform: uppercase; } .MM063 > div > b, .MM063-bo > a > span { background: linear-gradient(45deg, #9ca2b9, #5e667b); background-clip: text; color: transparent; } .MM063 > div > span { text-transform: uppercase; letter-spacing: 3px; padding-left: 3px; color: #f58b2e; font-weight: bold; } .MM063-bo { margin-top: 20px; display: flex; justify-content: space-between; } .MM063-bo > a { padding: 15px; border-radius: 10px; position: relative; background: #FFF; font-size: 16px; } .MM063-bo > a > b { position: absolute; opacity: 0; pointer-events: none; font-size: 10px; white-space: nowrap; background: #dddee2; top: 10px; left: 50%; padding: 10px; border-radius: 10px; transform: translate(-50%); z-index: 10; } .MM063-bo > a > b::before { content: ""; position: absolute; width: 16px; height: 8px; top: -8px; left: calc(50% - 8px); background: #dddee2; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } .MM063-bo > a:hover > b { top: calc(100% + 5px); box-shadow: 0 10px 20px -10px #0009; opacity: 1; } .MM063-bo > a:hover { transform: scale(1.1); box-shadow: 0 10px 20px -10px #0009; } .MM063-bo > a:active { transform: scale(.9); } .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>