Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sci-Fi Solar System</title>
  <style>
    /* General Body Style */
    body {
      margin: 0;
      height: 100vh;
      overflow: hidden;
      background: radial-gradient(circle, #020024, #090979, #000);
      font-family: 'Orbitron', sans-serif;
      color: white;
    }

    /* Central Sun */
    .sun {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100px;
      height: 100px;
      background: radial-gradient(circle, #ffcc00, #ff8800);
      box-shadow: 0 0 50px #ffcc00, 0 0 100px #ff8800;
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }

    /* Planet Orbit Paths */
    .orbit {
      position: absolute;
      top: 50%;
      left: 50%;
      border: 1px dashed rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      animation: rotateOrbit 20s linear infinite;
    }

    @keyframes rotateOrbit {
      from {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      to {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    /* Planets */
    .planet {
      position: absolute;
      top: 0;
      left: 50%;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }

    .planet.mercury {
      background: #b3b3b3;
    }

    .planet.venus {
      background: #ffcc66;
    }

    .planet.earth {
      background: linear-gradient(45deg, #00ccff, #0066ff);
      box-shadow: 0 0 10px #00ccff;
    }

    .planet.mars {
      background: #ff3300;
    }

    .planet.jupiter {
      background: radial-gradient(circle, #ffcc99, #cc6600);
    }

    .planet.saturn {
      background: linear-gradient(45deg, #e6b800, #996600);
      box-shadow: 0 0 10px #e6b800;
    }

    .planet.uranus {
      background: #66ffff;
    }

    .planet.neptune {
      background: #0066cc;
    }

    .planet.pluto {
      background: #999999;
    }

    /* Orbit Sizes */
    .orbit.mercury {
      width: 150px;
      height: 150px;
    }

    .orbit.venus {
      width: 200px;
      height: 200px;
    }

    .orbit.earth {
      width: 250px;
      height: 250px;
    }

    .orbit.mars {
      width: 300px;
      height: 300px;
    }

    .orbit.jupiter {
      width: 350px;
      height: 350px;
    }

    .orbit.saturn {
      width: 400px;
      height: 400px;
    }

    .orbit.uranus {
      width: 450px;
      height: 450px;
    }

    .orbit.neptune {
      width: 500px;
      height: 500px;
    }

    .orbit.pluto {
      width: 550px;
      height: 550px;
    }

    /* Welcome Message */
    .welcome {
      position: absolute;
      top: 10%;
      width: 100%;
      text-align: center;
      font-size: 2rem;
      color: #00ffcc;
      text-shadow: 0 0 10px #00ffcc, 0 0 20px #00ccff;
    }
  </style>
</head>
<body>
  
  <div class="welcome">Welcome to the Sci-Fi Solar System</div>

  
  <div class="sun"></div>

  
  <div class="orbit mercury"><div class="planet mercury"></div></div>
  <div class="orbit venus"><div class="planet venus"></div></div>
  <div class="orbit earth"><div class="planet earth"></div></div>
  <div class="orbit mars"><div class="planet mars"></div></div>
  <div class="orbit jupiter"><div class="planet jupiter"></div></div>
  <div class="orbit saturn"><div class="planet saturn"></div></div>
  <div class="orbit uranus"><div class="planet uranus"></div></div>
  <div class="orbit neptune"><div class="planet neptune"></div></div>
  <div class="orbit pluto"><div class="planet pluto"></div></div>
</body>
</html>

Keshav Chopra