QE Team P’New (D)

✨ Pimmada Krunsungnoen

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
* {
    margin: 0;
    padding: 0;
}

body{
background:#000 url(https://i.imgur.com/x6YFaW2.png)repeat top center;
}

header {
    background-color:rgba(33, 33, 33, 0.9);
    color:#ffffff;
    display:block;
    height:50px;
    position:relative;
    z-index:5;
}
@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

.stars, .twinkling{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
}

.stars {
  background:url(https://i.imgur.com/6OydWJN.png) ;
  z-index:1;
  animation: animate 100s linear infinite;
  position: absolute;
}

.twinkling{
  background:transparent url(https://i.imgur.com/lEr27X1.png) repeat top center;
  z-index:3;

animation:move-twink-back 200s linear infinite;
}

@keyframes animate
{
  0%{top: 0%}
  100%{top: 100%}
}
      
      .astro{
		background:url(https://i.imgur.com/xxsxHus.png);
      background-repeat:no-repeat;
      background-size:20%;
      position:absolute;
  		top:50%;
  		left:50%;
  		right:0;
  		bottom:0;
/*   		width:100px;
  		height:100px; */
/*   		display:block; */
      z-index:4;
        animation: updown 2s alternate infinite;
      }
      
      @keyframes updown{
        0%{top:50%}
        100%{top:60%}
      }
      
      .powder{
	   background:url(https://i.imgur.com/yrJsmgR.png);
      background-repeat:no-repeat;
      background-size:50%;
      position:absolute;
  		top:50%;
  		left:40%;
  		right:0;
  		bottom:0;
/*   		width:100px;
  		height:100px; */
/*   		display:block; */
      z-index:5;
/*         animation: updown 2s alternate infinite; */
      }
      
      .sat{
		background:url(https://i.imgur.com/MvkBWZ0.png);
      background-repeat:no-repeat;
      background-size:30%;
      position:absolute;
      top:10%;
  		left:80%;
  		right:0%;
  		bottom:0;
      z-index:5;
      }
      
      .rocket{
		background:url(https://i.imgur.com/58pK6Yu.png);
      background-repeat:no-repeat;
      background-size:10%;
      position:absolute;
      top:20%;
  		left:20%;
  		right:0;
  		bottom:0;
      z-index:5;
      animation: mun 10s linear infinite;
      }
      
      @keyframes mun{
        from{transform: rotate(0deg)}
        to{transform: rotate(360deg)}
      }
    </style>
  </head>
  <body>
<div class="stars"></div>
<div class="stardown"></div>
<div class="twinkling"></div>
<div class="astro"></div>
<div class="powder"></div>
<div class="sat"></div>
<div class="rocket"></div>
  </body>
</html>