<html> <head> <title>Solar System</title> <style> body { margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: black; overflow: hidden; } .container { position: relative; width: 300px; height: 300px; } .sun { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; background-color: yellow; border-radius: 50%; transform: translate(-50%, -50%); } .earth { position: absolute; width: 150px; height: 150px; border: 1px solid white; border-radius: 50%; animation: orbit 10s linear infinite; } .earth::before { content: ""; position: absolute; top: 50%; left: 0; width: 20px; height: 20px; background-color: aqua; border-radius: 50%; transform: translate(-50%, -50%); } @keyframes orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style> </head> <body> <h1 style="color:white; position:absolute; top:20px;">Solar System</h1> <div class="container"> <div class="sun"></div> <div class="earth"></div> </div> </body> </html>