MJ8.- En el espacio (indice)

<div class="MJ8" style="color: #4B7EAC;"><div class="imgMJ8" style="background-image: url(https://i.pinimg.com/564x/5c/ef/ec/5cefec5bce49aaee446076393ea4063e.jpg);"></div><div class="inMJ8">

<a href="URL"><span class="th th-moon"></span><span>Vida y Obra<b>Expediente</b></span></a>

<a href="URL"><span class="th th-planet-1"></span><span>El Tiempo no se Detiene<b>Cronología</b></span></a>

<a href="URL"><span class="th th-constellation"></span><span>Familia y Amigos<b>Relaciones</b></span></a>

<a href="URL"><span class="th th-stars"></span><span>Buenos y Malos Recuerdos<b>Galería</b></span></a>

</div></div><a class="miMJ8" 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=Raleway:400,700&display=swap" rel="stylesheet"><style>.MJ8, .MJ8 * {box-sizing: border-box; scrollbar-color: #0006 #0003; scrollbar-width: thin;} .MJ8 br {display: none;} .MJ8 {padding: 0 0 0 170px; width: 450px; margin: auto; position: relative; font: 10px Raleway;} .inMJ8 {position: relative; border-left: 3px solid #FFF; padding: 5px 0 5px 20px;} .inMJ8 > a {background-color: #FFF; padding: 1px 1px 1px 5px; margin: 30px 0; position: relative; min-height: 50px; border-left: 2px solid #FFF; background-clip: content-box; display: block; color: inherit; border-radius: 0 30px 30px 0; box-shadow: 7px 7px 5px -5px #0006;} .inMJ8 > a:before, .inMJ8 > a:after {content:""; position: absolute; top: 50%; transform: translateY(-50%);} .inMJ8 > a::before {right: 100%; border-top: 2px solid #FFF; width: 23px;} .inMJ8 > a::after {width: 20px; height: 20px; box-shadow: inset 0 0 0 15px, 0 0 0 1px, 2px 2px 5px #006; border-radius: 50%; border: 5px solid #FFF; box-sizing: border-box; right: calc(100% + 14px); transition: .3s;} .inMJ8 > a:hover:after {width: 30px; height: 30px; right: calc(100% + 9px);} .inMJ8 > a > span {display: inline-block; vertical-align: middle;} .inMJ8 > a > span.th {font-size: 25px; padding: 17px; border-radius: 50%; margin: 0 20px; box-shadow: 5px 5px 5px #0006, 0 0 0 5px, 0 0 0 6px #FFF, 0 0 0 11px, 5px 5px 5px 5px #0006; height: 60px; width: 60px; text-align: center;} .inMJ8 > a:active > span.th {transform: scale(.9);} .inMJ8 > a > span > b {display: block; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; transition: .3s;} .inMJ8 > a:hover > span > b {letter-spacing: 3px;} .imgMJ8 {position: absolute; left: 0; top: 0; bottom: 0; width: 165px; border: 10px solid #FFF; box-shadow: inset 0 0 0 2px, inset 0 0 0 7px #FFF, 8px 8px 5px -5px #0006, inset 3px 3px 10px 5px #0006; background-position: center; background-size: cover;} .miMJ8 {display: block; font: 10px arial; letter-spacing: 2px; text-align: center; transition: .5s;} .miMJ8:hover {letter-spacing: 10px;}</style>