So, I’m trying to make a moving solar system. I had made something like it using Standard Draw on Java adout 9 months ago, but I want to animated, add some paths, and overall make it pop a little more, so I moved to html/css. But, as you can see in the picture below, I am having some trouble actually executing my idea. I don’t really know what I’m doing wrong, so a couple of helping hands would be awesome.
Failed Attempt
This is my code:
<!DOCTYPE html>
<html>
<head>
<title>OUR SOLAR SYSTEM!</title>
<link rel="stylesheet" type="text/css" href="solarsystem.css">
</head>
<style>
body{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
background-color: black;
.Solar-System {
height: 30em;
width: 30em;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.Sun {
height: 6em;
width: 6em;
border-radius: 50%;
background: yellow;
}
.Mercury-Path {
position:absolute;
height: 8em;
width: 8em;
animation: rotation 8.8s linear infinite;
border-radius: 50%;
border: 1px solid white;
display: flex;
justify-content: center;
animation: rotation 22.5s linear infinite;
}
.Mercury{
height: 1.5em;
width:1.5em;
border-radius: 50%;
background: grey;
transform: translateY(-50);
}
.Venus-Path{
position: absolute;
height: 12em;
width: 12em;
border: 1px solid white;
border-radius: 50%;
display: flex;
align-items: center;
animation: rotation 22.5s linear infinite;
}
.Venus{
height: 3.5em;
width: 3.5em;
border-radius: 50%;
background: orange;
transform: translateX(-50%);
}
.Earth-Path{
position: absolute;
height: 16em;
width: 16em;
border: 1px solid white;
border-radius: 50%;
display: flex;
justify-content: end;
align-items: center;
animation: rotation 36.5s linear infinite;
}
.Earth{
height: 3.5em;
width: 3.5em;
border-radius: 50%;
background: blue;
transform: translateX(50%);
}
.Mars-Path{
position: absolute;
height: 31em;
width: 31em;
border: 1px solid white;
border-radius: 50%;
display: flex;
align-items:end;
justify-content: center;
animation: rotatation 68.7s linear infinite;
}
.Mars{
height: 2.7em;
width: 2.7em;
border-radius: 50%;
background: coral;
transform: translateY(50%);
}
.Jupiter-Path {
position: absolute;
height: 35em;
width: 35em;
border: 1px solid white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
animation: rotate 50.5s linear infinite;
}
.Jupiter {
height: 7em;
width: 7em;
border-radius: 50%;
background: brown;
transform: translateY(-50%);
}
.Saturn-Path {
position: absolute;
height: 40em;
width: 40em;
border: 1px solid white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
animation: rotate 60.2s linear infinite;
}
.Saturn {
height: 6em;
width: 6em;
border-radius: 50%;
background: goldenrod;
transform: translateY(-50%);
}
.Uranus-Path {
position: absolute;
height: 45em;
width: 45em;
border: 1px solid white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
animation: rotate 35.4s linear infinite;
}
.Uranus {
height: 5em;
width: 5em;
border-radius: 50%;
background: lightblue;
transform: translateY(-50%);
}
.Neptune-Path {
position: absolute;
height: 50em;
width: 50em;
border: 1px solid white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
animation: rotate 32.3s linear infinite;
}
.Neptune {
height: 4.5em;
width: 4.5em;
border-radius: 50%;
background: darkblue;
transform: translateY(-50%);
}
}
</style>
<body>
<h1 style="color: WHITE; font-size: 40px"><center>OUR SOLAR SYSTEM!</h1></center>
<h1 style="color: white; background-color: SlateBlue; font-size: 30px"><center>Source</h1></center>
<p style ="color: white; font-size: 20px">I made use of this <a href="https://www.universetoday.com/104486/how-big-is-our-solar-system/">website</a> to better understand how the solar system looks like, and exactly how big each celestial body is.</p>
<div class="Solar-System">
<div class="Sun"></div>
<div class="Mercury-Path">
<div class="Mercury"></div>
</div>
<div class="Venus-Path">
<div class="Venus"></div>
<div class="Earth-Path">
<div class="Earth"></div>
</div>
<div class="Mars-Path">
<div class = "Mars"></div>
</div>
<div class="Jupiter-Path">
<div class = "Jupiter"></div>
</div>
<div class="Saturn-Path">
<div class="Saturn"></div>
</div>
<div class="Uranus-Path">
<div class="Uranus"></div>
</div>
<div class="Neptune-Path">
<div class ="Neptune"></div>
</div>
</div>
</body>
</html>
New contributor
Oluwanifemi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.