<h1 class="header">
  Splitting code by
  <div class="header__option header__option--languages">how it looks. 👀</div>
  <div class="header__option header__option--components">what it does. 🎉</div>
</h1>

<div class="grid grid--tiles">
  <div class="gridItem">button.html</div>
  <div class="gridItem">button.css</div>
  <div class="gridItem">button.js</div>
  <div class="gridItem">nav.html</div>
  <div class="gridItem">nav.css</div>
  <div class="gridItem">nav.js</div>
  <div class="gridItem">modal.html</div>
  <div class="gridItem">modal.css</div>
  <div class="gridItem">modal.js</div>
</div>

<div class="grid grid--languages">
  <div class="gridSection gridSection--html"></div>
  <div class="gridSection gridSection--css"></div>
  <div class="gridSection gridSection--js"></div>
</div>

<div class="grid grid--components">
  <div class="gridSection gridSection--button"></div>
  <div class="gridSection gridSection--nav"></div>
  <div class="gridSection gridSection--modal"></div>
</div>

body {
  font-family: sans-serif;
  font-weight: bold;
}

.grid {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 100px);
  grid-gap: 10px;
  
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(40px) translate(-50%, -50%);
}

.grid--languages {
  grid-column-gap: 30px;
  animation: languagesFade 10s linear infinite;
}
.grid--components {
  grid-row-gap: 30px;
  animation: componentsFade 10s linear infinite;
}
.grid--tiles {
  animation: tilesMovement 10s linear infinite;
  z-index: 5;
}

.gridItem {
  --bg: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 5px;
  background: var(--bg);
  color: #fff;
}

.gridItem:nth-of-type(3n - 2)::after,
.gridItem:nth-of-type(3n - 1)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  width: 30px;
  height: 4px;
  transform: translateY(-50%);
  background: var(--bg);
  box-shadow: 0 8px 0 var(--bg), 0 -8px 0 var(--bg);
  animation: stringWidth 10s linear infinite;
}

.gridSection {
  border-radius: 5px;
  box-shadow: 0 0 0 10px currentColor;
  position: relative;
}
.grid--languages .gridSection {
  grid-row: span 3;
}
.grid--components .gridSection {
  grid-column: span 3;
}
.gridSection--html {
  background: #f48042;
  color: #f48042;
}
.gridSection--css {
  background: #4192f4;
  color: #4192f4;
}
.gridSection--js {
  background: #ead33c;
  color: #ead33c;
}
.gridSection--button {
  background: #1a9937;
  color: #1a9937;
}
.gridSection--nav {
  background: #611999;
  color: #611999;
}
.gridSection--modal {
  background: #bc1297;
  color: #bc1297;
}

.grid--languages .gridSection::before {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
}
.gridSection--html::before {
  content: 'HTML';
}
.gridSection--css::before {
  content: 'CSS';
}
.gridSection--js::before {
  content: 'JS';
}

.grid--components .gridSection::before {
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  font-size: 24px;
}
.gridSection--button::before {
  content: 'Button';
}
.gridSection--nav::before {
  content: 'Nav';
}
.gridSection--modal::before {
  content: 'Modal';
}


@keyframes languagesFade {
  0%, 35%, 100% {
    opacity: 1;
  }
  40%, 95% {
    opacity: 0;
  }
}

@keyframes componentsFade {
  0%, 45%, 90%, 100% {
    opacity: 0;
  }
  50%, 85% {
    opacity: 1;
  }
}

@keyframes tilesMovement {
  0%, 40%, 95%, 100% {
    grid-column-gap: 30px;
    grid-row-gap: 10px;
  }
  45%, 90% {
    grid-row-gap: 30px;
    grid-column-gap: 10px;
  }
}

@keyframes stringWidth {
  0%, 40%, 95%, 100% {
    width: 30px;
  }
  45%, 90% {
    width: 10px;
  }
}


.header {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-200px) translate(-50%, -100%);
  text-align: center;
  font-size: 32px;
  white-space: nowrap;
}
.header__option {
  display: inline;
}
.header__option--languages {
  margin-top: 24px;
  animation: languagesFade 10s linear infinite;
  margin-right: -256px;
}
.header__option--components {
  animation: componentsFade 10s linear infinite;
}