QE Group C Team Thx Week5

✨ นายณัฐภัทร วัฒนพิทักษ์พงศ์

<html>
  <body>
    <style>body{
  position: absolute;
/*   overflow: hidden; */
  background-image: url("https://cdn.discordapp.com/attachments/798207225184124928/809072741223104553/1268183.jpg");
    animation: animate-background linear 10s infinite;
  overflow: hidden;
}
}

.night{
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotateZ(30deg);
}

.star-1 {
  position: relative;
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 100%;
  filter: drop-shadow(0 0 6px #699BFF);
  animation: wipwup 1000ms infinite;
}

.star-2 {
  position: relative;
  width: 4px;
  height: 4px;
  background: white;
  border-radius: 100%;
  filter: drop-shadow(0 0 10px white);
  animation: wipwup 700ms infinite;
}

.star-3 {
  position: relative;
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 100%;
  filter: drop-shadow(0 0 6px #699BFF);
  animation: wipwup 1800ms infinite;
}

.bodyslam {
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    background-image: linear-gradient(-45deg, black, transparent);
}

.earth {
    z-index: 1;
    position: relative;
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFcKSwDRnon10C8xcPOtgsGTPAGrY4_D-WkQ&usqp=CAU");
    width: 2em; height: 2em;
    animation: earth-orbit 7s ease-in-out infinite;
    box-shadow: 0 0 10px #2793C6;
}

.uranus {
    z-index: 4;
    position: relative;
    background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/65fc890f-0962-435a-a0ff-72426be7fa01/d3d0ioy-2f32c5be-d0fa-42d3-a360-ca6bcae691cf.png/v1/fill/w_900,h_900,q_80,strp/blue_gas_planet_texture_by_recky112_d3d0ioy-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3siaGVpZ2h0IjoiPD05MDAiLCJwYXRoIjoiXC9mXC82NWZjODkwZi0wOTYyLTQzNWEtYTBmZi03MjQyNmJlN2ZhMDFcL2QzZDBpb3ktMmYzMmM1YmUtZDBmYS00MmQzLWEzNjAtY2E2YmNhZTY5MWNmLnBuZyIsIndpZHRoIjoiPD05MDAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.65hgWocZTkyP9c_qShaBqoC36_Dp5nYAGi6KvPm9d6Y");
    width: 3em; height: 3em;
    animation: uranus-orbit 5s ease-in-out infinite;
    box-shadow: 0 0 10px cyan;
}

.mars {
    z-index: 3;
    position: relative;
    background-image: url("https://media.istockphoto.com/photos/martian-texture-picture-id507280516?k=6&m=507280516&s=612x612&w=0&h=-fPBQOqtuLBgAjGYR37bNQr36IvArdQf8Mtab-bOZ3k=");
    width: 2em; height: 2em;
    animation: mars-orbit 4s ease-in-out infinite;
    box-shadow: 0 0 10px orange;
}

.jupiter {
    z-index: 2;
    position: relative;
    background-color: blue;
    width: 5em; height: 5em;
    background-position: center;
    background-size: 380px;
    background-image: url("https://cdn.discordapp.com/attachments/798207225184124928/809070956466405396/unknown.png");
    animation: jupiter-orbit 12s ease-in-out infinite, spin 5s infinite linear;
    box-shadow: 0 0 10px #F8C471;
}

.sun {
    position: relative;
    z-index: 0;
    background-size: 380px;
    background-image: url("https://i.pinimg.com/originals/bf/d4/45/bfd44571a4c9d6627b4bc9339cc004f9.png");
    width: 15em; height: 15em;
    box-shadow: 0 0 1em yellow, inset 0 0 7em yellow;
    animation: spin 6s infinite linear;
}

.system-sun {
    top: 20em;
    left: 30em;
    margin: 0 auto;
    position: relative;
    width: 10em; height: 10em;
}

.system-earth {
    position: absolute;
    top: 4.5em; left: -10em;
    width: 1em; height: 1em;
}

@keyframes moon-orbit {
      0% { transform: translateX(0); }
     50% { transform: translateX(2.5em); }
    100% { transform: translateX(0); z-index: 1; }
}

@keyframes earth-orbit {
      0% { transform: translateX(0); }
     40% {z-index: -1;}
     50% { transform: translateX(30em);}
    100% { transform: translateX(0); z-index: 5; }
}

@keyframes jupiter-orbit {
      0% { transform: translateX(-10em); }
     40% {z-index: -3;}
     50% { transform: translateX(40em);}
    100% { transform: translateX(-10em); z-index: 5; }
}

@keyframes uranus-orbit {
      0% { transform: translateX(-5em); }
     30% {z-index: -4;}
     50% { transform: translateX(40em);}
    100% { transform: translateX(-5em); z-index: 4; }
}

@keyframes mars-orbit {
      0% { transform: translateX(-20em); }
     25% {z-index: -2;}
     50% { transform: translateX(40em);}
    100% { transform: translateX(-20em); z-index: 2; }
}

@keyframes wipwup {
  0% {transform: scale(1.3); opacity: 60%;}
  100% {transform: scale(1.4)); opacity: 40%;}
}

@keyframes wuapwap {
      0% {background-position: 100% 70px, 0px 0px, 0px 0px;}
      50% {background-position: -10% 70px, -1000px 0px, -500px 0px;}
}

@keyframes spin{
  0% {background-position-x: 0;}
  100% {background-position-x: 380px;}
}
@keyframes animate-background {
      from {
        background-position: 100% 70px, 0px 0px, 0px 0px;
      }

to {
        background-position: -10% 70px, -1000px 0px, -500px 0px;
      }
    }</style>
    <div class="system-sun">
      <div class="system-earth">
        <div class="bodyslam earth"></div>
        <div class="bodyslam mars"></div>
        <div class="bodyslam uranus"></div>
        <div class="bodyslam jupiter"></div>
      </div>
      <div class="bodyslam sun"></div>
    </div>
    <div class="night ">
      <div class="star-1" style="top: 640px; left: 210px;"></div>
      <div class="star-1" style="top: 123px; left: 340px;"></div>
      <div class="star-1" style="top: 40px; left: 450px;"></div>
      <div class="star-1" style="top: 80px; left: 754px;"></div>
      <div class="star-1" style="top: 57px; left: 200px;"></div>
      <div class="star-1" style="top: 450px; left: 500px;"></div>
      <div class="star-1" style="top: 370px; left: 10px;"></div>
      <div class="star-1" style="top: 650px; left: 97px;"></div>
    </div>
    
    <div class="night">
      <div class="star-2" style="top: 200px; left: 940px;"></div>
      <div class="star-2" style="top: 810px; left: 900px;"></div>
      <div class="star-2" style="top: 40px; left: 450px;"></div>
      <div class="star-2" style="top: 360px; left: 980px;"></div>
      <div class="star-2" style="top: 57px; left: 200px;"></div>
      <div class="star-2" style="top: 540px; left: 500px;"></div>
      <div class="star-2" style="top: 120px; left: 40px;"></div>
      <div class="star-2" style="top: 289px; left: 457px;"></div>
    </div>