QE Group D P’FaiiFuu

✨ Pruktapong Sukjaroen

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        overflow: hidden;
        z-index: 1;
        width: 100%;
        height: 100%;
        background-image: url("http://s42.radikal.ru/i096/1609/34/e512725da2ce.png");
      }
      @keyframes kraprib {
        from {
          opacity: 3;
        }
        to {
          opacity: 0;
        }
      }
      @keyframes moon {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      @keyframes shooting1 {
        from {
          top: 0;
        }
        to {
          top: 100%;
        }
      }
      @keyframes shooting2 {
        from {
          left: 0;
        }
        to {
          left: 100%;
        }
      }

@keyframes cycle {
        from {
          left: 0;
          transform: rotate(0deg);
        }
        to {
          left: 80%;
          transform: rotate(360deg);
        }
      }
      .astronaut {
        width: 120px;
        height: auto;
        position: fixed;
        top: 45%;
        left: 60%;
        animation: cycle 8s infinite alternate;
        z-index: 10;
      }
      .star {
        position: absolute;
        width: 0.5em;
        height: 0.5em;
        background: white;
        opacity: 1;
        box-shadow: 0px 0px 20px 10px #ff03;
        z-index: 1;
      }
      .star:nth-child(1) {
        top: 5%;
        left: 5%;
        animation: kraprib 2s infinite alternate, moon 0.01s infinite linear,
          shooting1 5s infinite linear, shooting2 1s infinite linear;
      }
      .star:nth-child(2) {
        top: 50%;
        left: 15%;
        animation: kraprib 3s infinite alternate, moon 0.01s infinite linear;
      }
      .star:nth-child(3) {
        top: 80%;
        left: 25%;
        animation: kraprib 4s infinite alternate, moon 0.01s infinite linear;
      }
      .star:nth-child(4) {
        top: 30%;
        left: 35%;
        animation: kraprib 5s infinite alternate, moon 0.01s infinite linear,
          shooting3 5s infinite linear, shooting4 1s infinite linear;
      }
      .star:nth-child(5) {
        top: 90%;
        left: 55%;
        animation: kraprib 3s infinite alternate, moon 0.01s infinite linear,
          shooting5 5s infinite linear, shooting6 1.5s infinite linear;
      }
      .star:nth-child(6) {
        top: 10%;
        left: 65%;
        animation: kraprib 4s infinite alternate, moon 0.01s infinite linear;
      }
      .star:nth-child(7) {
        top: 20%;
        left: 85%;
        animation: kraprib 2s infinite alternate, moon 0.01s infinite linear;
      }
      .star:nth-child(8) {
        top: 50%;
        left: 95%;
        animation: kraprib 3s infinite alternate, moon 0.01s infinite linear;
      }
      .star:nth-child(9) {
        top: 10%;
        left: 40%;
        animation: kraprib 5s infinite alternate, moon 0.01s infinite linear;
      }
      .star:nth-child(10) {
        top: 50%;
        left: 60%;
        animation: kraprib 2s infinite alternate, moon 0.01s infinite linear;
      }
      .star:nth-child(11) {
        top: 80%;
        left: 70%;
        animation: kraprib 3s infinite alternate, moon 0.01s infinite linear;
      }
      .star:nth-child(12) {
        top: 15%;
        left: 10%;
        animation: kraprib 2s infinite alternate, moon 0.01s infinite linear,
          shooting1 5s infinite linear, shooting2 2s infinite linear;
      }
      .star:nth-child(13) {
        top: 100%;
        left: 40%;
        animation: kraprib 1s infinite alternate, moon 0.01s infinite linear,
          shooting3 7s infinite linear, shooting4 2s infinite linear;
      }
      .star:nth-child(14) {
        top: 80%;
        left: 50%;
        animation: kraprib 2s infinite alternate, moon 0.01s infinite linear;
      }
      .star:nth-child(15) {
        top: 90%;
        left: 60%;
        animation: kraprib 2s infinite alternate, moon 0.01s infinite linear,
          shooting5 8s infinite linear, shooting6 1.5s infinite linear;
      }
      .star:nth-child(16) {
        top: 30%;
        left: 70%;
        animation: kraprib 4s infinite alternate, moon 0.01s infinite linear;
      }
      .star:nth-child(17) {
        top: 70%;
        left: 100%;
        animation: kraprib 3s infinite alternate, moon 0.01s infinite linear;
      }
      .star:nth-child(18) {
        top: 20%;
        left: 35%;
        animation: kraprib 4s infinite alternate, moon 0.01s infinite linear;
      }
      .star:nth-child(19) {
        top: 10%;
        left: 45%;
        animation: kraprib 5s infinite alternate, moon 0.01s infinite linear;
      }
      .star:nth-child(20) {
        top: 80%;
        left: 75%;
        animation: kraprib 3s infinite alternate, moon 0.01s infinite linear;
      }
      .block1 {
        transform: rotate(160deg);
        bottom: 30%;
        right: 10%;
        position: fixed;
        width: 50px;
        height: 50px;
      }
      .block2 {
        transform: rotate(20deg);
        top: 15%;
        left: 5%;
        position: fixed;
        width: 10px;
        height: 50px;
      }

.down {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 2px;
        width: 100px;
        background: linear-gradient(-45deg, #ffff, rgba(0, 0, 255, 0));
        filter: drop-shadow(0 0 3px #ffff);
        animation: tails 3s ease-in-out infinite,
          failing 3s ease-in-out infinite;
      }
      
      .down1 {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 2px;
        width: 100px;
        background: linear-gradient(-45deg, #ffff, rgba(0, 0, 255, 0));
        filter: drop-shadow(0 0 3px #ffff);
        animation: tails 3s ease-in-out infinite,
          failing 3s ease-in-out infinite;
        animation-delay: 0.5s;
      }

@keyframes tails {
        0% {
          width: 0px;
        }
        30% {
          width: 200px;
        }
        100% {
          width: 0;
        }
      }

@keyframes failing {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(300px);
        }
      }
      @keyframes zoom {
        from {
          transform: scale(1) translateX(-100%) rotate(0deg);
        }
        to {
          transform: scale(0) translateX(500%) rotate(-80deg);
        }
      }
      .saturn {
        position: absolute;
        z-index: 5;
        width: 500px;
        animation: zoom 10s infinite;
      }
      iframe{
	opacity:0;
      }
    </style>
  </head>
  <body>
    <img
      class="saturn"
      src="https://images-ext-1.discordapp.net/external/62FBsb8Y7aVVSj5PYXw8sQUIalGUqSaGrjTTnQ-TffU/%3Fwidth%3D734%26height%3D443/https/images-ext-2.discordapp.net/external/c7yCsSnP0jNO7lnukGfvM-wlYM09J2CqiwwpLfymk0o/https/cdn.pixabay.com/photo/2012/04/10/17/38/saturn-26618_960_720.png"
    />
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="astronaut">
      <img
        src="https://www.animatedimages.org/data/media/45/animated-astronaut-image-0019.gif"
      />
    </div>
    <div class="block1">
      <div class="down"></div>
      <div class="down"></div>
      <div class="down"></div>
      <div class="down"></div>
      <div class="down"></div>
      <div class="down"></div>
      <div class="down"></div>
      <div class="down"></div>
    </div>
    <div class="block2">
      <div class="down1"></div>
      <div class="down1"></div>
      <div class="down1"></div>
      <div class="down1"></div>
      <div class="down1"></div>
      <div class="down1"></div>
      <div class="down1"></div>
      <div class="down1"></div>
    </div>
    <div>
  <iframe width="0" height="0" src="https://www.youtube.com/embed/IEPv31_E__4?&autoplay=1&mute=0" </iframe>
</div>
  </body>
</html>