Space (Branch 1865)

✨ นายจักริน เย็นสุข

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body {
			background-image: url('https://images-ext-1.discordapp.net/external/MYjsryams1sD1SrztHUZfXsHl460Hzc3kVse4V8kpnM/%3Fip%3Dx480/https/ak.picdn.net/shutterstock/videos/6537068/thumb/1.jpg');
         overflow: hidden;
      }
      .sun{
		  background-image: url('')
      }
      .ufo {
        position: absolute;
        top: 10%;
        left: 50%;
        background-image: url('https://media.discordapp.net/attachments/808957804986761226/809003790267187240/597-5975752_buzz-lightyear-flying-png-toy-story-transparent-png-removebg-preview.png');
        transform: translate(-50%,-50%);
        height:100px;
        width: 200px;
        background-size: cover;
        animation:move 2s alternate infinite;
        z-index: 1;
      }
      @keyframes move {
        0%   {top:180px;}
        50%  {top:240px}
        100% {top:180px}
      }
      .mercury, .venus, .earth, .mars, .jupiter, .saturn, .neptune, .uranus, .text{
		  background-repeat: no-repeat;
        position: absolute;
      }
      .mercury, .venus, .earth, .mars, .neptune, .uranus{
        animation: spin 30s linear;
      }
      .jupiter, .saturn ,.text{
		  animation: no-spin 30s linear;
      }
      @keyframes spin {
        0% {
		   transform: rotateZ(0deg);
         left: 1500px;
        }
        100%{
		   transform: rotateZ(-360deg);
      	left: -400px;
        }
      }
      @keyframes no-spin {
        0% {
         left: 1500px;
        }
        100%{
      	left: -1000px;
        }
      }
      .mercury {
		  background-image: url('https://media.discordapp.net/attachments/808957804986761226/808994993888297010/3D_Mercury.png?width=398&height=397');
        height: 150px;
        width: 150px;
        background-size: 150px;
        top: 50px;
        filter: blur(0px);
        animation-delay: 10s;
        left: 1400px;
      }
      .venus {
        background-image: url('https://cdn.discordapp.com/attachments/808957804986761226/809024114827853854/Venus-Planet-777x591-removebg-preview.png');
        height: 190px;
        width: 190px;
        background-size: 190px;
        bottom: 50px;
        filter: blur(0px);
        animation-delay: 20s;
        left: 1400px;

}
      .meteor {
		  background-image: url('https://media.discordapp.net/attachments/808957804986761226/808990767300608010/unnamed.png?width=403&height=397');
        height: 400px;
        width: 400px;
        background-size: 400px;
        bottom: -160px;
        filter: blur(5px);
        background-repeat: no-repeat;
        animation: spin 30s linear;
        position: absolute;
        animation-delay: 50s;
        left: 1400px;
        z-index:99;
      }
      .earth {
        background-image: url('https://media.discordapp.net/attachments/808957804986761226/808995341998227496/2cd43b_d047504ce82046c2b58009c106d26862_mv2_d_1350_1350_s_2.png');
        height: 210px;
        width: 210px;
        background-size: 210px;
        top: -50px;
        filter: blur(0px);
        animation-delay: 30s;
        left: 1400px;

}
      .mars {
        background-image: url('https://media.discordapp.net/attachments/808957804986761226/808998151318798356/Mars-removebg-preview.png?width=397&height=397');
        height: 170px;
        width: 170px;
        background-size: 170px;
        bottom: 40px;
        filter: blur(0px);
        animation-delay: 40s;
        left: 1400px;

}
      .jupiter {
        background-image: url('https://media.discordapp.net/attachments/808957804986761226/808997497870483456/png-clipart-jupiter-web-browser-computer-icons-jupiter-sphere-bitcoin-removebg-preview.png?width=462&height=397');
        height: 400px;
        width: 400px;
        background-size: 400px;
        top: -200px;
        filter: blur(5px);
        animation-delay: 60s;
        left: 1400px;

}
      .saturn {
        background-image: url('https://media.discordapp.net/attachments/808957804986761226/808996673313177600/580b585b2edbce24c47b270d.png?width=717&height=346');
        height: 700px;
        width: 700px;
        background-size: 650px;
        bottom: -500px;
        filter: blur(5px);
        animation-delay: 70s;
        left: 1400px;

}
      .neptune {
        background-image: url('https://media.discordapp.net/attachments/808957804986761226/808996821611053066/Neptune-removebg-preview.png');
        height: 310px;
        width: 310px;
        background-size: 310px;
        top: 20px;
        filter: blur(0px);
        animation-delay: 80s;
        left: 1400px;

}
      .uranus {
        background-image: url('https://media.discordapp.net/attachments/808957804986761226/808996300473368586/5533f778686708715314515719cd7ef0-removebg-preview.png');
        height: 330px;
        width: 330px;
        background-size: 330px;
        bottom: -110px;
        filter: blur(0px);
        animation-delay: 90s;
        left: 1400px;

}
      
      @import url('https://fonts.googleapis.com/css2?family=Hanalei&display=swap');
      .text{
        top:330px;
        display: inline-flex;
		color:white;
      animation-delay: 1s;
      left: 1400px;
      font-family:'Hanalei', cursive;
      font-size: 50px;

}
    </style>
  </head>
  <body>
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Hanalei&display=swap" rel="stylesheet">
    <iframe width="0" height="0" src="https://www.youtube.com/embed/O-MQC_G9jTU?autoplay=1"></iframe>
    <div class="ufo">
      
    </div>
    <div class="text">
      <p>To&nbsp;</p>
      <p>beyond&nbsp;</p>
      <p>and&nbsp;</p>
      <p>infinite</p>
    </div>
    <div class="mercury">
      
    </div>
    <div class="venus">
      
    </div>
    <div class="meteor">
      
    </div>
    <div class="earth">
      
    </div>
    <div class="mars">
      
    </div>
    <div class="jupiter">
      
    </div>
    <div class="saturn">
      
    </div>
    <div class="neptune">
      
    </div>
    <div class="uranus">
      
    </div>
    <script>
      
    </script>
  </body>
</html>