En la Cima (cronología)

<div class="MM046" style="color: #3a9399;"><div class="MM046-r"><strong><b>En la Cima</b><i>cronología</i></strong>

<a href="URL"><b>I</b><hr>Primer Tema<span>lugar, estatus.</span></a>
<a href="URL"><b>II</b><hr>Segundo<span>lugar, estatus.</span></a>
<a href="URL"><b>III</b><hr>Tercer Tema<span>lugar, estatus.</span></a>
<a href="URL"><b>IV</b><hr>Cuarto<span>lugar, estatus.</span></a>
<a href="URL"><b>IV</b><hr>Quinto Tema<span>lugar, estatus.</span></a>

</div><div class="MM046-img" style="background-image: url(https://i.postimg.cc/k4YKjWdb/05.png);"></div></div><a class="miMM" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a><link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap" rel="stylesheet"><style>.MM046, .MM046 * { box-sizing: border-box; transition: .5s; } .MM046 br { display: none; } .MM046 { width: 500px; margin: auto; text-align: center; font: 14px Calibri; background: #222; border-bottom: 15px solid; display: flex; } .MM046-img { width: 200px; background-position: top center; background-size: cover; } .MM046-r { flex: 1; display: flex; flex-direction: column; } .MM046-r > strong { box-shadow: inset 0 0 0 200px; display: block; padding: 30px; display: flex; flex-direction: column; position: relative; z-index: 10; } .MM046-r > strong > b { color: #111; font: 40px Oswald; } .MM046-r > strong > i { color: #111; letter-spacing: 2px; margin: -8px 0 0 2px; } .MM046-r > strong::before { content: ""; position: absolute; width: 30px; height: 30px; left: calc(50% - 15px); bottom: -14px; transform: rotate(45deg); clip-path: polygon(100% 0, 0% 100%, 100% 100%); box-shadow: inset 0 0 0 20px; border-radius: 6px 0; } .MM046-r a { display: flex; color: inherit !important; align-items: center; font: 20px Oswald; flex-wrap: wrap; padding: 10px; } .MM046-r a:nth-of-type(odd) { background: #111; } .MM046-r hr { flex: 1; margin: 10px; border-top: 2px solid; color: #AAA; } .MM046-r span { font: 12px calibri; width: 100%; -webkit-text-fill-color: #AAA; letter-spacing: 1px; border-top: 1px solid; padding-top: 5px; } .MM046-r a b { width: 30px; text-align: right; } .MM046-r a:hover { filter: brightness(1.5); } .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>