Solar System Using HTML and CSS

Introduction:

Our solar system, a captivating corner of the vast universe, holds a wealth of wonder and scientific intrigue.

From the scorching surface of Mercury to the icy depths of Neptune, each planet boasts unique characteristics and plays a vital role in our cosmic neighborhood. 

In this blog post, we'll embark on a journey through our solar system, exploring each planet's key features and fascinating facts.

But that's not all! For those with a passion for coding, we'll also dive into a fun and educational project: creating a simplified, animated solar system model using HTML and CSS.

This hands-on tutorial will guide you through the process of building your own miniature solar system right in your web browser!


Planets in Our Solar System

Before we code, let’s briefly understand the planets we’ll be working with:

  1. Sun: The center of our solar system, providing heat and light.
  2. Mercury: The closest planet to the Sun, known for its extreme temperatures.
  3. Earth: Our home, the third planet from the Sun, and the only known planet to support life.
  4. Mars: The Red Planet, famous for its dusty surface and potential for life.
  5. Jupiter: The largest planet in our solar system, known for its Great Red Spot.
  6. Saturn: Recognized by its stunning ring system.


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Solar System</title>
  <style>
    body {
      margin: 0;
      background-color: black;
    }

    #solar-system {
      position: absolute;
      top: 22%;
      left: 50%;
      transform: translate(-50%, -50%)
    }

    #sun {
      position: absolute;
      margin-top: 225px;
    }

    .sun {
      width: 118px;
      height: 118px;
      background-color:
        yellow;
      border-radius: 50%;
      box-shadow: 0 0 3em white;
      top: 9%;
      left: 9%;
      position: relative;
    }

    .mercury {
      width: 20px;
      height: 20px;
      background-color: rgb(171, 158, 163);
      top: 142px;
      left: 11%;
      border-radius: 50%;
      position: relative;
    }

    .mercury-orbit {
      content: "";
      position: absolute;
      border: solid 2px rgb(171, 158, 163);
      width: 170px;
      height: 170px;
      top: 198px;
      left: -16px;
      border-radius: 50%;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
      -webkit-animation-name: orbit;
      -webkit-animation-duration: 11s;
      -moz-animation-duration: 11s;
    }

    .venus {
      width: 44px;
      height: 44px;
      background-color: rgb(254, 152, 0);
      top: 140px;
      left: 192px;
      border-radius: 50%;
      position: relative;
    }

    .venus-orbit {
      content: "";
      position: absolute;
      border: solid 1px rgb(254, 152, 0);
      width: 220px;
      height: 220px;
      top: 172px;
      left: -40px;
      border-radius: 50%;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
      -webkit-animation-name: orbit;
      -webkit-animation-duration: 12s;
      -moz-animation-duration: 12s;
    }

    .earth {
      width: 46px;
      height: 46px;
      background-color: rgb(45, 82, 182);

      top: -22px;
      left: 124px;
      border-radius: 50%;
      position: relative;
    }

    .earth-orbit {
      content: "";
      position: absolute;
      width: 308px;
      height: 308px;
      border: solid 1px rgb(45, 82, 182);
      top: 130px;
      left: -82px;
      border-radius: 50%;

      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
      -webkit-animation-name: orbit;
      -webkit-animation-duration: 13s;
      -moz-animation-duration: 13s;
    }

    .mars {
      width: 26px;
      height: 26px;
      background-color: rgb(201, 4, 0);
      top: 86px;
      left: 12px;
      border-radius: 50%;
      position: relative;
    }

    .mars-orbit {
      content: "";
      position: absolute;
      width: 390px;
      height: 390px;
      border: solid 1px rgb(201, 4, 0);
      top: 88px;
      left: -124px;
      border-radius: 50%;

      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
      -webkit-animation-name: orbit;
      -webkit-animation-duration: 14s;
      -moz-animation-duration: 14s;
    }


    @-webkit-keyframes orbit {
      from {
        transform: rotate(0deg)
      }
      to {
        transform: rotate(360deg)
      }
    }
  </style>
</head>

<body>
  <div id="solar-system">

    <div class="mars-orbit">
      <div class="mars"></div>
    </div>

    <div class="earth-orbit">
      <div class="earth"></div>
    </div>

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

    <div class="mercury-orbit">
      <div class="mercury"></div>
    </div>

    <div class="venus-orbit">
      <div class="venus"></div>
    </div>

  </div>
</body>
</html>


Building a solar system with HTML and CSS is not only a great way to practice coding but also a creative way to learn about our universe. By combining web development and astronomy, you’ll gain a deeper understanding of both fields.

Ready to create your own solar system? Use our Online HTML Code Editor to start coding today!