Solar System using HTML & CSS Only

Here we are going to create Solar System using HTML & CSS Only. You can also checkout other web development projects to practice and enhance your development skills.

Preview:

For this project I will suggest you to use VS Code as it is free, built on open source and a powerful source code editor that runs on Windows, Linus and macOs. There are hundreds of extensions that makes vs code a all-in-one editor. There are also lots of features which will help you while writing a code. If you do not have VS Code Installed on your system, then you may find this article helpful -

➡️ VS Code Installation [Step by Step Guide]

Create two new files for html css seperately and link css in html file. HTML is the skeleton of our website and css adds design to the contents of HTML file .

Now lets code Solar System using HTML & CSS Only.

Solar System using HTML & CSS Only

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Solar System</title>
</head>

<body>
    <div class="container">
        <div class="sun"></div>
        <div class="earth">
            <div class="moon"></div>
        </div>
    </div>
</body>
</html>

CSS Code

body {
            margin: 0;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: black;
            overflow: hidden;
        }

        .container {
            font-size: 10px;
            width: 640px;
            height: 640px;
            position: relative;
        }

        .sun {
            position: absolute;
            top: 240px;
            left: 240px;
            width: 160px;
            height: 160px;
            background-color: rgb(255, 225, 0);
            border-radius: 50%;
            box-shadow: 0 0 48px white;
        }

        .earth,
        .moon {
            position: absolute;
            border-style: solid;
            border-color: white transparent transparent transparent;
            border-width: 2px 2px 0 0;
            border-radius: 50%;
        }

        .earth {
            top: 80px;
            left: 80px;
            width: 480px;
            height: 480px;
            animation: orbit 36.5s linear infinite;
        }

        .moon {
            top: 0;
            right: 0;
            width: 130px;
            height: 130px;
            animation: orbit 2.7s linear infinite;
        }

        .earth::before,
        .moon::before {
            content: '';
            position: absolute;
            border-radius: 50%;
        }

        .earth::before {
            top: 45px;
            right: 45px;
            width: 50px;
            height: 50px;
            background-color: rgb(0, 119, 255);
        }

        .moon::before {
            top: 13px;
            right: 4px;
            width: 20px;
            height: 20px;
            background-color: rgb(190, 181, 181);
        }

        @keyframes orbit {
            to {
                transform: rotate(360deg);
            }
        }

More like this -

• Build Calculator using html css javascript

• Build Stop watch using html css javascript

• Login Registration Page using html css javascript