Desacuerdo (notificaciones)

<div class="MM023" style="color: #4f9f60;"><b>Palabra</b><span class="th th-target-o"></span><div><b>Título Aquí</b><span>Texto cortito de preferencia. Marshmallow jujubes macaroon marshmallow oat cake. Cookie topping cupcake caramels halvah donut ice cream cupcake.</span></div>

<i class="MM023-links">
<a href="URL" class="th th-diamond"><b>Enlace 01</b></a>
<a href="URL" class="th th-gemstone"><b>Enlace 02</b></a>
<a href="URL" class="th th-toy-mouse"><b>Enlace 03</b></a>
</i>

</div><a class="miMM" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a><link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap" rel="stylesheet"><link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet"><style>.MM023, .MM023 * { box-sizing: border-box; transition: .2s; } .MM023 { width: 450px; margin: auto; box-shadow: inset 0 0 0 100px, 5px 5px 8px -5px #0006; border-radius: 100px; min-height: 100px; padding: 8px; display: flex; align-items: center; position: relative; font: 12px Jost; } .MM023::before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; box-shadow: inset 10px 10px 40px -10px; border-radius: 100px; mix-blend-mode: multiply; } .MM023 > b { position: absolute; bottom: 5px; right: 5px; left: 5px; top: 5px; mix-blend-mode: multiply; font-size: 70px; text-transform: uppercase; display: flex; justify-content: flex-end; align-items: flex-end; line-height: 34px; overflow: hidden; border-radius: 100px; opacity: .3; } .MM023 > span::after { content: ""; position: absolute; border: 10px dashed #FFF9; top: -16px; left: -16px; right: -16px; bottom: -16px; border-radius: 50%; animation: mm-gira 10s linear infinite; } @keyframes mm-gira { from {transform: rotate(0);} to {transform: rotate(360deg);} } .MM023 > div { color: #FFF; margin: 0 10px 0 25px; flex: 1; position: relative; z-index: 10; } .MM023 > div > b { display: block; font-size: 16px; letter-spacing: 3px; } .MM023 > div > b::after { content: ""; width: 50px; display: block; border-top: 2px solid; margin: 5px 0; } .MM023 > div > span { display: block; line-height: 10px; margin: 7px 10px 0 0; letter-spacing: 1px; } .MM023-links { position: absolute; right: 0; top: 0; bottom: 0; width: 116px; } .MM023 > span { width: 100px; height: 100px; position: relative; font-size: 30px; } .MM023-links a, .MM023 > span { border-radius: 50px; background: #E1E1E1; display: flex; align-items: center; justify-content: center; border: 2px solid #FFF; text-shadow: 1px 1px #FFF, -1px 1px #FFF, 1px -1px #FFF, -1px -1px #FFF, 3px 4px 8px #0006; box-shadow: inset 5px 5px 20px #0002, inset -5px -5px 20px #FFF, 3px 3px 5px #0003; } .MM023-links a { width: 25px; height: 25px; position: absolute; top: calc(50% - 12.5px); right: -12.5px; transform-origin: -58px center; color: inherit; font-size: 10px; } .MM023-links a b { position: absolute; left: calc(100% + 5px); text-transform: uppercase; font-style: normal; letter-spacing: -6px; pointer-events: none; opacity: 0; } .MM023-links a:nth-of-type(1) { transform: rotate(-28deg); } .MM023-links a:nth-of-type(3) { transform: rotate(28deg); } .MM023-links a:hover { width: 33px; height: 33px; font-size: 12px; margin: -4px; } .MM023-links a:hover b { letter-spacing: 1px; opacity: 1; } .MM023 br { display: none; } .MM023 > div > span br { display: block; margin: 5px; } .miMM { display: block; font: bold 10px Calibri; letter-spacing: 2px; text-align: center; transition: 0.5s; text-transform: uppercase; padding: 3px; } .miMM:hover { letter-spacing: 3px; }</style>