Embed

<div style="position: relative; width: 100%; height: 100vh; overflow: hidden; background: radial-gradient(circle, #020202, #0b0d2a, #001840);">
  
  <div style="position: absolute; width: 100%; height: 100%; background: url('https://images.unsplash.com/photo-1589571894960-20bbe2828a7e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=1080') no-repeat center center; background-size: cover; opacity: 0.6; animation: starShift 60s linear infinite;"></div>

  
  <div style="position: absolute; top: 10%; text-align: center; width: 100%; font-size: 2rem; z-index: 10; animation: fadeIn 3s ease-in-out forwards; opacity: 0; color: #00ffff; text-shadow: 0 0 20px #00ffff, 0 0 40px #00ccff;">
    Welcome, Dear Visitor, to the Sci-Fi Space
  </div>

  
  <div style="position: relative; width: 600px; height: 600px; margin: 0 auto; animation: systemRotate 40s linear infinite;">
    
    <div style="width: 120px; height: 120px; background: radial-gradient(circle, #ffd700, #ff4500, #990000); border-radius: 50%; box-shadow: 0 0 50px rgba(255, 165, 0, 0.8), 0 0 100px rgba(255, 69, 0, 0.6); animation: sunPulse 5s infinite alternate;"></div>

    
    <div style="position: absolute; width: 200px; height: 200px; border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 50%; animation: orbitRotate 20s linear infinite;">
      <div style="position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle, #00ffff, #0055ff); box-shadow: 0 0 15px rgba(0, 255, 255, 0.6); transform: translate(-100%, -50%);"></div>
    </div>
  </div>

  
  <style>
    @keyframes starShift {
      from {
        transform: translate(0, 0);
      }
      to {
        transform: translate(-200px, -200px);
      }
    }

    @keyframes systemRotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes sunPulse {
      from {
        transform: scale(1);
      }
      to {
        transform: scale(1.1);
      }
    }

    @keyframes orbitRotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: scale(0.8);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }
  </style>
</div>

Keshav Chopra