we.type | YS_scale-rotation

<!--.:◂◀▸v▶¤◀v∫∫v▶¤◀v∫∫‡####‡‡‡‡###‡‡‡###‡‡####‡∫∫v▶¤◀v∫∫v▶¤◀v◂▶▸:.
|                                                                 |
|                Filename : YS_scale-rotation.html                 |
|                  Author : Yevheniia Shyrchenko                  |
|                                                                 |
::◂◀▸v▶¤◀v∫∫v▶¤‡‡##‡‡‡‡‡‡‡‡###‡‡###‡‡‡‡##‡‡‡‡##‡‡¤◀v∫∫v▶¤◀v◂▶▸::-->


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    @font-face {
      font-family: Konsole;
      src: url(../_fonts/Konsolev1.1-VF.ttf);
    }

    body {
      font-family: Konsole;
      font-size: 4vh;
      overflow: hidden;
      height: 100vh;
    }

    @keyframes rotate-columns {
      /* defines how the text is rotated and enlarged at a certain point in the animation */
      0% {
        transform: rotateY(0deg) scale(1);
      }
      50% {
        transform: rotateY(180deg) scale(3);
      }
      100% {
        transform: rotateY(360deg) scale(1);
      }
    }

    .column-container {
      display: flex;
      justify-content:space-evenly;
      align-items: center;
      height: 100vh;
      font-family: 'Konsole';
    }

    .column {
      /* defines how the animation will progress over one cycle of its duration */
      display: flex;
      flex-direction: column;
      align-items: center;
      animation: rotate-columns 6s linear infinite;
    }

    .box {
      /* defines how the boxes look */
      background-color: black;
      padding: 10px;
      border-radius: 0px; 
    }

    .column p {
      /* defines how the glyphs are shown */
      font-size: 3em; 
      margin: 0; 
      letter-spacing: 0; 
      color: white; 
    }

    .column:nth-child(2) {
      /* defines when the animation will start */
      animation-delay: 1s;
    }

    .column:nth-child(3) {
      animation-delay: 2s;
    }

    .column:nth-child(4) {
      animation-delay: 3s;
    }

    .column:nth-child(5) {
      animation-delay: 4s;
    }
  </style>
  <title>Your Page Title</title>
</head>
<body>

<div class="column-container">
  <div class="column">
    <div class="box"><p>H</p></div>
  </div>
  <div class="column">
    <div class="box"><p>E</p></div>
  </div>
  <div class="column">
    <div class="box"><p>L</p></div>
  </div>
  <div class="column">
    <div class="box"><p>L</p></div>
  </div>
  <div class="column">
    <div class="box"><p>O</p></div>
  </div>
</div>

</body>
</html>