ME8.- Cthulhu (tablón)

HTML:
<div class="ME8" style="background-image: url(https://i.pinimg.com/originals/ca/c9/91/cac991fef1dc9f53535b4e5cd47ff725.jpg);">

 <div class="inME8">
 <a href="/" class="ttME8">Nombre Aquí</a>
 <div class="linksME8">
   <a href="URL">Enlace 01</a>  <a href="URL">Enlace 02</a>  <a href="URL">Enlace 03</a>  <a href="URL">Enlace 04</a>  <a href="URL">Enlace 05</a>  <a href="URL">Enlace 06</a>  <a href="URL">Enlace 07</a>  <a href="URL">Enlace 08</a>
 </div>

 <div class="moME8 mmst">

 <div>

 <div style="background-image: url(https://via.placeholder.com/60x110);">

 <div>
   <a href="URL" title="Perfil" class="th th-heart-1"></a>  <a href="URL" title="Mensaje" class="th th-chat-bubble"></a>
 </div>

 </div>

 <div style="background-image: url(https://via.placeholder.com/60x110);">

 <div>
 <a href="URL" title="Perfil" class="th th-heart-1"> </a>  <a href="URL" title="Mensaje" class="th th-chat-bubble"></a>
 </div>

 </div>

 <div style="background-image: url(https://via.placeholder.com/60x110);">

 <div>
 <a href="URL" title="Perfil" class="th th-heart-1"> </a>  <a href="URL" title="Mensaje" class="th th-chat-bubble"></a>
 </div>

 </div>

 </div>

 </div>

 <div class="moME8 mmam">
   <a href="URL" class="th th-twitter-o" title="¿Dónde Llevo?"></a>  <a href="URL" class="th th-tumblr-o" title="¿Dónde Llevo?"></a>  <a href="URL" class="th th-discord" title="¿Dónde Llevo?"></a>  <a href="https://emmescodes.tumblr.com/" class="th th-code" title="Code by Emme"></a>
 </div>

 <div class="moME8 mmbo">

 <div>
 Dessert oat cake pudding icing cookie lollipop chocolate cake. <br /><br />Apple pie cheesecake bear claw chocolate bar. Apple pie oat cake croissant chocolate bar toffee topping pastry danish. Donut pudding powder jelly beans.<br /><br /> Jelly sweet candy marzipan brownie candy pie sweet halvah. Candy canes cheesecake bonbon. Chocolate cake chocolate cake danish lemon drops marshmallow. Cupcake dragée croissant cotton candy bonbon icing.<br /><br /> Cookie jelly beans ice cream chocolate bar chupa chups liquorice gummies lollipop cake. Chocolate bar bonbon dessert jelly lollipop halvah chupa chups cotton candy. Ice cream ice cream candy jelly beans.
 </div>

 </div>

 <div class="moME8 mmwh">

 <div>
 <span><strong>04</strong>Dessert oat cake pudding icing cookie lollipop chocolate cake. </span>   <span><strong>03</strong>Apple pie cheesecake bear claw chocolate bar. Apple pie oat cake croissant chocolate bar toffee topping pastry danish. </span>   <span><strong>02</strong>Donut pudding powder jelly beans.</span> <span><strong>01</strong>Jelly sweet candy marzipan brownie candy pie sweet halvah. Candy canes cheesecake bonbon.</span>
 </div>

 </div>

 </div>
</div><link href="https://solrainha.github.io/honeybee/honeybee.css" rel="stylesheet" />

CSS:
.ME8,
.ME8 * {
  box-sizing: border-box;
  scrollbar-color: #0006 #0003;
  scrollbar-width: thin;
}
:root {
  --fondo-uno: #111;
  --fondo-dos: #181818;
  --borde: #262626;
  --texto: #777;
  --hover: #ac471d;
}
.ME8 {
  min-width: 900px;
  margin: auto;
  padding-top: 250px;
  background-position: center;
  background-size: cover;
  border: 1px solid var(--borde);
  font: 12px Lato;
  color: var(--texto);
}
.inME8 {
  background: var(--fondo-uno);
  border-top: 1px solid var(--borde);
  position: relative;
  min-height: 200px;
  font-size: 0px;
  letter-spacing: -5px;
}
.ttME8 {
  font: bold 50px/30px Prompt;
  letter-spacing: 20px;
  position: absolute;
  bottom: calc(100% - 1px);
  width: 100%;
  text-align: center;
  color: var(--fondo-uno) !important;
  text-transform: uppercase;
  padding: 20px 0 0 20px;
  -webkit-text-stroke: 1px var(--borde);
  overflow: hidden;
}
.linksME8 {
  padding: 5px;
  border-bottom: 1px solid var(--borde);
  display: flex;
}
.linksME8 a {
  margin: 5px;
  flex: 1;
  text-align: center;
  background: var(--fondo-dos);
  padding: 5px 3px 5px 5px;
  transition: 0.5s;
  color: var(--texto);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  border: 1px solid var(--borde);
}
.linksME8 a:hover {
  flex: 1.5;
  color: var(--hover);
}
.moME8 {
  display: inline-block;
  vertical-align: middle;
  letter-spacing: normal;
}
.moME8.mmst {
  background: var(--fondo-dos);
  padding: 20px;
  border-right: 1px solid var(--borde);
  width: 270px;
}
.moME8.mmst > div {
  display: flex;
}
.moME8.mmst > div > div {
  margin: 5px;
  flex: 1;
  height: 120px;
  border: 5px solid;
  box-shadow: inset 0 0 0 1px var(--borde);
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transition: 0.5s;
}
.moME8.mmst > div > div:hover {
  border: 5px solid var(--hover);
}
.moME8.mmst > div > div > div {
  position: absolute;
  background: var(--fondo-uno);
  width: 100%;
  height: 100%;
  display: flex;
  font-size: 20px;
  align-items: center;
  justify-content: center;
  transition: 0.5s;
  flex-wrap: wrap;
  top: 100%;
  padding: 20px 0;
}
.moME8.mmst > div > div:hover > div {
  top: 0%;
}
.moME8.mmst a {
  padding: 0 10px;
  color: var(--texto);
  transition: 0.3s;
  transform: scale(0.8);
}
.moME8.mmst a:hover {
  transform: scale(1);
  color: var(--hover);
}

.moME8.mmam {
  width: 60px;
  padding: 0 5px;
  text-align: center;
}
.moME8.mmam a {
  display: block;
  font-size: 20px;
  margin: 15px 0;
  transform: scale(0.8);
  transition: 0.3s;
  color: var(--texto);
}
.moME8.mmam a:hover {
  transform: scale(1);
  color: var(--hover);
}
.moME8.mmbo {
  height: 170px;
  background: var(--fondo-dos);
  border-left: 1px solid var(--borde);
  border-right: 1px solid var(--borde);
  width: calc(100% - 580px);
}
.moME8.mmbo > div {
  margin: 30px;
  font: 12px Lato;
  height: calc(100% - 60px);
  overflow: auto;
  text-align: justify;
  hyphens: auto;
  padding-right: 5px;
}
.moME8.mmwh {
  padding: 20px;
  width: 250px;
}
.moME8.mmwh > div {
  font: 12px Lato;
  height: 125px;
  overflow: auto;
  text-align: justify;
  hyphens: auto;
}
.moME8.mmwh > div span {
  display: block;
  margin-bottom: 10px;
  clear: both;
}
.moME8.mmwh > div strong {
  font: 30px/30px Prompt;
  float: left;
  margin-right: 5px;
  color: var(--hover);
  width: 40px;
  text-align: center;
}
.moME8.mmwh > div a {
  color: var(--hover);
}

.miME8 {
  display: block;
  font: 10px arial;
  letter-spacing: 2px;
  text-align: center;
  transition: 0.5s;
}
.miME8:hover {
  letter-spacing: 10px;
}
.ME8 div::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
  background: #0006 !important;
}
.ME8 div::-webkit-scrollbar-thumb {
  background: #0003 !important;
}