<div class="wrapper">
  <div class="creativity">
    <div class="tile purple" aria-label="3">c</div>
    <div class="tile" aria-label="1">r</div>
    <div class="tile" aria-label="1">e</div>
    <div class="tile" aria-label="1">a</div>
    <div class="tile" aria-label="3">t</div>
    <div class="tile" aria-label="1">e</div>
  </div>
  <div class="tile purple" aria-label="1">o</div>
  <div class="dev">
    <div class="tile purple" aria-label="2">d</div>
    <div class="tile" aria-label="1">e</div>
    <div class="tile" aria-label="4">v</div>
  </div>
  <div class="tile purple" aria-label="1">e</div>
  <div class="people">
    <div class="tile" aria-label="3">p</div>
    <div class="tile" aria-label="1">e</div>
    <div class="tile" aria-label="1">o</div>
    <div class="tile purple" aria-label="3">p</div>
    <div class="tile" aria-label="1">l</div>
    <div class="tile" aria-label="1">e</div>
  </div>
  <div class="tile purple" aria-label="1">e</div>
  <div class="design">
    <div class="tile" aria-label="3">d</div>
    <div class="tile" aria-label="1">e</div>
    <div class="tile" aria-label="1">s</div>
    <div class="tile" aria-label="1">i</div>
    <div class="tile" aria-label="2">g</div>
    <div class="tile purple" aria-label="1">n</div>
  </div>
</div>

<a class="author" href="https://itsmenatalie.com" target="_blank">Created by ItsMeNatalie</a>
body {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(45deg, #004445 0%, #2c7873 100% );
  overflow: hidden;
  
  .wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Abril Fatface', cursive;
    
    .tile {
      margin: 10px 5px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      text-transform: uppercase;
      height: 45px;
      width: 45px;
      background-color: #efe6d4;
      border-radius: 5px;
      box-shadow: 2px 2px 1px #ad9a7b;
      cursor: pointer;
      font-size: 20px;
      opacity: 0;
      transition: all .3s ease-in-out;
      color: #efe6d4;
      
      &.purple {
        opacity: 1;
      }
      
      &:after {
        content: attr(aria-label);
        position: absolute;
        bottom: 2px;
        right: 5px;
        font-size: 8px;
      }
     
    }
    
    .creativity {
      margin-top: 275px;
    }
    
    .dev {
      margin-top: 110px;
    }
    
    .people {
      margin-bottom: 55px;
    }
    
    .design {
      margin-bottom: 275px;
    }
  }
  
  a {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    position: absolute;
    left: calc(50% - 96px);
    bottom: 0;
    font-style: italic;
    font-size: 12px;
    color: #212121;
    background-color: white;
    padding: 10px 20px;
    border-radius: 5px 5px 0 0;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25);
  }
}

@keyframes codepen {
  0% {
    transform: rotateY(180deg);
    color: #efe6d4;
  }
  
  40% {
    color: #efe6d4;
  }
  100% {
    transform: rotateY(0deg);
    color: #9156ab;
  }
}

@keyframes rotateTiles {
  0% {
    transform: rotateX(180deg);
    color: #efe6d4;
    opacity: 0;
  }
  
  40% {
    color: #efe6d4;
    opacity: 1;
  }
  100% {
    transform: rotateX(0deg);
    color: #222;
    opacity: 1;
  }
}
View Compiled
$(document).ready(function() {
  const purples = $(".purple");
  let delay = "0ms";
  for (let i = 1; i <= purples.length; i++) {
    delay = 100 + 100 * (i - 1) + "ms";
    purples.eq(i - 1).css({ animation: "codepen 1s " + delay + " forwards" });
  }

  const tiles = $(".tile").not('.purple');
  let tilesDelay = "0ms";
  for (let j = 1; j <= tiles.length; j++) {
    tilesDelay = 3000 + 200 * (j - 1) + "ms";
    tiles
      .eq(j - 1)
      .css({ animation: "rotateTiles 1s " + tilesDelay + " forwards" });
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js