MJ2.- Cute Particles (indice)

<div class="MJ2" style="color: #e2967c;"><div class="imgMJ2"><div style="background-image: url(https://i.postimg.cc/sf9tc1Lm/01.jpg);"></div></div><div class="dataMJ2"><strong><b>Título Aquí</b></strong><div>
<a href="URL" title="¿Dónde Llevo?"><b>A</b><i>Ficha</i></a>
<a href="URL" title="¿Dónde Llevo?"><b>B</b><i>Crono</i></a>
<a href="URL" title="¿Dónde Llevo?"><b>L</b><i>Relas</i></a>
<a href="URL" title="¿Dónde Llevo?"><b>U</b><i>Móvil</i></a>
<a href="URL" title="¿Dónde Llevo?"><b>J</b><i>Fotos</i></a>
<a href="URL" title="¿Dónde Llevo?"><b>r</b><i>Random</i></a>
</div></div></div><a class="miMJ2" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a>

<link href="https://fonts.googleapis.com/css?family=Lato|Montserrat:300,400,800&display=swap" rel="stylesheet"><style>.MJ2, .MJ2 * {box-sizing: border-box; scrollbar-color: #0006 #0003; scrollbar-width: thin;} @font-face {font-family: HW Icons; src: url(https://cdn.statically.io/gh/EmmesCodes/Tipografias/0ae07c71/HW-Icons.otf);} .MJ2 {width: 450px; margin: auto; font: 12px Lato; text-align: center; position: relative; padding-left: 180px;} .MJ2 br {display: none;} .imgMJ2, .dataMJ2 > strong, .dataMJ2 > div > a {background-color: #222; background-image: url(http://www.pngall.com/wp-content/uploads/2017/11/Particles-PNG.png); background-size: cover; position: relative; padding: 20px;} .imgMJ2 > div:before, .imgMJ2 > div:after {content: ""; position: absolute; box-shadow: inset 0 0 0 200px; z-index: 5; top: -10px; bottom: -10px; left: -10px; right: -10px; -webkit-mask-image: url(https://i.postimg.cc/k4GF2dqw/500.png);} .imgMJ2 > div:before {-webkit-mask-position: bottom right;} .imgMJ2 > div:after {-webkit-mask-position: top left;} .imgMJ2 {position: absolute; left: 0; top: 0; bottom: 0; width: 170px;} .imgMJ2 > div {background-color: #111; background-position: center; background-size: cover; height: 100%; position: relative;} .dataMJ2 > strong {display: block;} .dataMJ2 > strong > b {font: 16px Montserrat; color: #CCC; text-transform: uppercase; letter-spacing: 2px; padding: 10px 0 7px; display: inline-block;} .dataMJ2 > strong:before, .dataMJ2 > strong:after {font: 30px/10px HW Icons; content: "M"; display: inline-block; vertical-align: middle; margin: -5px 5px 0 2px; text-shadow: 2px 2px 2px #000;} .dataMJ2 > strong:before {transform: rotateY(180deg);} .dataMJ2 > div {display: flex; flex-wrap: wrap; margin: 0 -10px 0 0;} .dataMJ2 > div > a {color: inherit; margin: 10px 10px 0 0; flex: 1; text-shadow: 2px 2px 2px #000;} .dataMJ2 > div > a:active {transform: scale(.9);} .dataMJ2 i {display: block; font: 10px Lato; text-transform: uppercase; letter-spacing: 2px; color: #CCC;} .imgMJ2:before, .imgMJ2:after {z-index: 10; position: absolute; text-shadow: 2px 2px 2px #000; font: 50px HW Icons;} .imgMJ2::before {content: "e"; top: 20px; left: 7px;} .imgMJ2::after {content: "d"; bottom: 0; right: 6px;} .dataMJ2 > div > a b {display: inline-block; font: 40px HW Icons;} .dataMJ2 > div > a:hover b {animation: late .5s infinite alternate;} @keyframes late {from {transform: scale(1);} to {transform: scale(.7);}} .miMJ2 {display: block; font: 10px arial; letter-spacing: 2px; text-align: center; transition: .5s;} .miMJ2:hover {letter-spacing: 10px;}</style>