Creating a Solar System using HTML and CSS is very easy. we know our solar system has nine planets, Pluto been added recently.
let try create six planets solar system, other three are homework for you. you use our online HTML Code Editor to make changes and check output
We will add planets representing the Sun, Mercury, Earth, Mars, and Jupiter, arranging them utilizing absolute positioning and centering techniques with translate from CSS
we will add, CSS animations to illustrate the planets' orbits around the Sun.
This article will make sure you get familiarity of fundamental HTML elements such as <div> and <span>, as well as CSS properties like color and margin.
click Run button below to try out
<!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>