SUBSCRIBER TEXT USING PENCODE (HTML+JAVA)

 

CODEPEN LINK = 

Right's Under 

Tanishq sahu 

Founder 

(High tech 7)

HTML (Pug)

.container

  .text Subscriber

  each i in Array(9)

    .text +1.5K

CSS (SCSS)

@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');

$base-font-color: darkblue;

body {

  background-color: #2e3b4d;

  height: 100vh;

  font-family: 'Bangers', cursive;

}

.container {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

.text {

  position: absolute;

  font-size: 20rem;

  font-weight: 900;

  letter-spacing: 1rem;

  color: #fff;

  transform: translate(-50%, -50%);

  animation: flyAnimation 3s ease-in-out infinite;

  will-change: transform;

  --move: 0px;

}

@for $i from 1 through 10 {

  .text:nth-child(#{$i}) {

    color: lighten(desaturate(adjust-hue($base-font-color, $i * 20%), $i * 5%), $i * 10%);

    animation-delay:  $i * 100ms + 100ms;

    z-index: 20 + $i;

    filter: drop-shadow(0px 20px 20px #00000020) !important;

    --move: 25px;

  }

}

.text:nth-child(1) {

  color:yellow;

  --move: 100px;

  font-size: 10rem;

  filter: drop-shadow(0px 20px 20px #000000) !important;

}

@keyframes flyAnimation {

  0%, 100% {

    transform: translate(-50%, calc(-50% + var(--move)));

  }

  50% {

    transform: translate(-50%, calc(-50% - var(--move)));

  }

}