<html>
<head>
<title>Solar system</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="system">
  <div id="sun"></div>
	<div id="earth-orbit">
    <div id="earth"></div>
		<div id="moon-orbit">
			<div id="moon"></div>
		</div>
	</div>
</div>
</body>
</html>
body{
	background: white;
	width:100%;
	
}
#system{
	width:500px;
	margin:auto;
	background:black;
	height:600px;
}
#sun{
  width:200px;
  height:200px;
	margin-top:200px;
	margin-left:150px;
	position:absolute;
  background:yellow;
  border-radius:100%;
}
#earth{
	position:absolute;
	margin-left:100px;
	height:50px;
	width:50px;
  background:lightblue;
  border-radius:100%;
}
#earth-orbit{
	position:absolute;
	margin-top:100px;
	margin-left:50px;
	width:400px;
	height:400px;
	border:1px dotted white;
	border-radius:100%;
	-webkit-animation:spin 10s linear infinite;
	animation:spin 10s linear infinite;
	
}
#moon{
	width:10px;
	height:10px;
	border-radius:100%;
	background:white;
	position:absolute;
	margin-left:70px;
	
}
#moon-orbit{
	width:100px;
	height:100px;
	border-radius:100%;
	border:1px dotted white;
	margin-left:75px;
	margin-top:-25px;
	-webkit-animation:spin 5s linear infinite;
	animation:spin 5s linear infinite;
}
@-webkit-keyframes spin{
100%{
		-webkit-transform:rotate(360deg);
		transform:rotate(360deg);
}
}
@keyframes spin{
100%{
		-webkit-transform:rotate(360deg);
		transform:rotate(360deg);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.