Solar System | Learning Axis

HTML

CSS

body {
            margin: 0;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: black;
            overflow: hidden;
        }
        .container {
            font-size: 10px;
            width: 40em;
            height: 40em;
            position: relative;
        }
        .sun {
            position: absolute;
            top: 15em;
            left: 15em;
            width: 10em;
            height: 10em;
            background-color: yellow;
            border-radius: 50%;
            box-shadow: 0 0 3em white;
        }
        .earth, .moon {
            position: absolute;
            border-style: solid;
            border-color: white transparent transparent transparent;
            border-width: 0.1em 0.1em 0 0;
            border-radius: 50%;
        }
        .earth {
            top: 5em;
            left: 5em;
            width: 30em;
            height: 30em;
            animation: orbit 36.5s linear infinite;
        }
        .moon {
            top: 0;
            right: 0;
            width: 8em;
            height: 8em;
            animation: orbit 2.7s linear infinite;
        }
        .earth::before,
        .moon::before {
            content: '';
            position: absolute;
            border-radius: 50%;
        }
        .earth::before {
            top: 2.8em;
            right: 2.8em;
            width: 3em;
            height: 3em;
            background-color: aqua;
        }
        .moon::before {
            top: 0.8em;
            right: 0.2em;
            width: 1.2em;
            height: 1.2em;
            background-color: silver;
        }
        @keyframes orbit {
            to {
                transform: rotate(360deg);
            }
        }