QE P’Arin Group-D (Branch 2029)

✨ Naiohm Pwpp

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
overflow:hidden; background:url(https://blenderartists.org/uploads/default/original/4X/7/e/2/7e2d7bea4ac21388c4a96e1371f375c4ce00094b.jpg);
}

@keyframes spin{
  100% {
    transform: translateX(-50%);
  }
}

@keyframes orbit {
    0% {transform: rotate3d(0, 1, 0, 0deg) translateX(300%) rotate3d(0, 1, 0, 0deg);z-index:1}
  43%{
    z-index:-1;
  }
  65%{
    z-index:1;
  }
  100% {transform: rotate3d(0, 1, 0, 360deg) translateX(300%) rotate3d(0, 1, 0, -360deg);z-index:1;
  }
}
@keyframes orbit2 {
    0% {transform: rotate3d(0, 1, 0, 0deg) translateX(350%) rotate3d(0, 1, 0, 0deg);}
  70%{
    z-index:1;
  }
  100% {transform: rotate3d(0, 1, 0, 360deg) translateX(350%) rotate3d(0, 1, 0, -360deg);
    }
}
@keyframes orbit3 {
    0% {transform: rotate3d(0, 1, 0, 0deg) translateX(400%) rotate3d(0, 1, 0, 0deg); z-index:-1;}
  75%{
    z-index:1;
  }
  100% {transform: rotate3d(0, 1, 0, 360deg) translateX(400%) rotate3d(0, 1, 0, -360deg);
    }
}
@keyframes richmove {
  from {transform: translate(0, 0);}
  to {transform: translate(-200%, 200%);}
}
@keyframes voteoff {
  from {transform: translateX(0) rotateZ(0deg);width:100%}
  to {transform: translateX(500%) rotateZ(360deg);width:0%;}
}

.sun {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 20px 20px #d14009 inset, 0 0 30px 5px #d14009;
  z-index:1;
}

.sun:after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: -20px -20px 50px 2px #d14009 inset;
  border-radius: 50%;
}

.sun > div {
  width: 200%;
  height: 100%;
  animation: spin 30s linear alternate infinite;
  background: url(https://imgur.com/wZ1tpuo.jpg);
  background-size: cover;
}
.jupiter {
  width: 210px;
  height: 210px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 20px 20px #B69D85 inset, 0 0 30px 5px #B69D85;
  transform-style: preserve-3d;
  animation: orbit2 25s linear infinite;
}

.jupiter:after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: -20px -20px 50px 2px #B69D85 inset;
  border-radius: 50%;
}

.jupiter > div {
  width: 200%;
  height: 100%;
  animation: spin 5s linear alternate infinite;
  background: url(https://imgur.com/UJaICVY.jpg);
  background-size: cover;
}

.mercury {
  width: 70px;
  height: 70px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 20px 20px #94908D inset, 0 0 30px 5px #94908D;
  animation: orbit 5s linear infinite;
}

.mercury:after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: -20px -20px 50px 2px #94908D inset;
  border-radius: 50%;
}

.mercury > div {
  width: 200%;
  height: 100%;
  animation: spin 3s linear alternate infinite;
  background: url(https://imgur.com/74BuFMB.jpg);
  background-size: cover;
}

.neptune {
  width: 170px;
  height: 170px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 20px 20px #2E3586 inset, 0 0 30px 5px #2E3586;
  animation: orbit3 30s linear infinite;
}

.neptune:after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: -20px -20px 50px 2px #2E3586 inset;
  border-radius: 50%;
}

.neptune > div {
  width: 200%;
  height: 100%;
  animation: spin 10s linear alternate infinite;
  background: url(https://imgur.com/WUikCnv.jpg);
  background-size: cover;
}

.earth {
  width: 120px;
  height: 120px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 20px 20px hsl(213, 26%, 22%) inset, 0 0 30px 5px hsl(213, 26%, 22%);
  animation: orbit 10s linear infinite;
}

.earth:after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: -20px -20px 50px 2px hsl(213, 26%, 22%) inset;
  border-radius: 50%;
}

.earth > div {
  width: 200%;
  height: 100%;
  animation: spin 10s linear alternate infinite;
  background: url(https://imgur.com/SkbcvkJ.jpg);
  background-size: cover;
}
      
.submarine{
  	position: absolute;
  	top:-300;
  right:-300;
  animation: richmove 30s linear infinite;
}
      
.astro{
  position: absolute;
  bottom:0;
  left:-300;
  animation: voteoff 5s linear infinite;
}
    </style>
  </head>
  <body>
<div class="astro"><img src="https://imgur.com/2V0ZIDA.png"></div>
<div class="submarine"><img src="https://imgur.com/TfWwSHN.png"></div>
<div class="sun"><div></div></div>
<div class="mercury"><div></div></div>
<div class="earth"><div></div></div>
<div class="jupiter"><div></div></div>
<div class="neptune"><div></div></div>
  </body>
</html>