Skip to content

Instantly share code, notes, and snippets.

@bizworld

bizworld/Solar-System.markdown

Last active November 30, 2016 18:25
Show Gist options
  • Save bizworld/b1991e5109620b33f8aa to your computer and use it in GitHub Desktop.
Save bizworld/b1991e5109620b33f8aa to your computer and use it in GitHub Desktop.
Download ZIP
The Solar System
Raw
index.html
<!-- html here! -->
<!DOCTYPE html>
<html>
<head>
<title>Solar System</title>
<link rel="stylesheet" href="style.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<!-- Start your code here -->
<!-- Right below is an image of the sun -->
<img id="sun" src="http://j.mp/11y3kXK">
<!-- mercury orbit and mercury -->
<div id="mercury-orbit">
<img id="mercury" src="http://j.mp/18kdnmG"/>
</div>
<!-- venus orbit and venus -->
<div id="venus-orbit">
<img id="venus" src="http://j.mp/1Farshu"/>
</div>
<!-- earth and its orbit -->
<div id="earth-orbit">
<img id="earth" src="http://j.mp/1Anvyna" >
<!-- Moon and its orbit -->
<div id="moon-orbit">
<img id="moon" src="http://j.mp/12ntRsa">
</div>
</div>
<!-- mars orbit and mars -->
<div id="mars-orbit">
<img id="mars" src="http://j.mp/1M6qvZR"/>
</div>
<!-- jupiter orbit and jupiter -->
<div id="jupiter-orbit">
<img id="jupiter" src="http://j.mp/18QRix2"/>
</div>
<!-- saturn orbit and saturn -->
<div id="saturn-orbit">
<img id="saturn" src="http://j.mp/1M6XNIb"/>
</div>
<!-- uranus orbit and uranus -->
<div id="uranus-orbit">
<img id="uranus" src="http://j.mp/1M9muDP"/>
</div>
<!-- neptune orbit and neptune -->
<div id="neptune-orbit">
<img id="neptune" src="http://j.mp/1KsvTuL"/>
</div>
<!-- pluto orbit and pluto -->
<div id="pluto-orbit">
<img id="pluto" src="http://j.mp/1B7Y2RG"/>
</div>
<!-- End your code here -->
</body>
</html>
Raw
Solar-System.markdown

Solar System

This is based on the Sun, Earth, and Code course by Andy Kim on Codecademy.

A Pen by biz man on CodePen.

License.

Raw
style.css
html, body {
/* The universe takes up all available space */
width: 100%;
height: 100%;
/* The universe is black and starry */
background: black url("http://j.mp/1ydMLyG");
}
#sun {
position: absolute;
/* Positions the top-left corner of the image to be */
/* in the middle of the box */
top: 50%;
left: 50%;
/* Play with these numbers to see what it does */
height: 100px;
width: 100px;
margin-top: -50px;
margin-left: -50px;
border-color: orange;
border-width: 1px;
border-style: solid;
border-radius: 50%;
box-shadow: 0 0 64px yellow;
}
#mercury {
position: absolute;
top: 0;
left: 50%;
height: 10px;
width: 10px;
margin-top: -5px;
margin-left: -5px;
border-radius: 50%;
}
#mercury-orbit {
position: absolute;
top: 50%;
left: 50%;
height: 125px;
width: 125px;
margin-top: -62.5px;
margin-left: -62.5px;
border-width: 1px;
border-style: dotted;
border-color: #696969;
border-radius: 50%;
-webkit-animation: spin-right 20s linear infinite;
-moz-animation: spin-right 20s linear infinite;
-ms-animation: spin-right 20s linear infinite;
-o-animation: spin-right 20s linear infinite;
animation: spin-right 20s linear infinite;
}
#venus {
position: absolute;
top: 0;
left: 50%;
height: 20px;
width: 20px;
margin-top: -10px;
margin-left: -10px;
border-color: white;
border-width: 0;
border-style: solid;
border-radius: 50%;
}
#venus-orbit {
position: absolute;
top: 50%;
left: 50%;
height: 175px;
width: 175px;
margin-top: -87.5px;
margin-left: -87.5px;
border-width: 1px;
border-style: dotted;
border-color: #696969;
border-radius: 50%;
-webkit-animation: spin-right 30s linear infinite;
-moz-animation: spin-right 30s linear infinite;
-ms-animation: spin-right 30s linear infinite;
-o-animation: spin-right 30s linear infinite;
animation: spin-right 30s linear infinite;
}
#earth {
/* Style your earth */
position: absolute;
top: 0;
left: 50%;
border-color: white;
border-width: 0;
border-style: solid;
border-radius: 50%;
height: 25px;
width: 25px;
margin-left: -12.5px;
margin-top: -12.5px;
}
#earth-orbit {
/* For Section #2 */
position: absolute;
top:50%;
left: 50%;
width: 250px;
height: 250px;
margin-top: -125px;
margin-left: -125px;
border-width: 1px;
border-style: dotted;
border-color: #696969;
border-radius: 50%;
-webkit-animation: spin-left 40s linear infinite;
-moz-animation: spin-left 40s linear infinite;
-ms-animation: spin-left 40s linear infinite;
-o-animation: spin-left 40s linear infinite;
animation: spin-left 40s linear infinite;
}
#moon {
position: absolute;
top: 0;
left: 50%;
height: 10px;
width: 10px;
margin-left: 19px;
margin-top: 19px;
border-radius: 50%;
box-shadow: 0 0 64px white;
}
#moon-orbit {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin-top: -150px;
margin-left: -27px;
border-width: 1px;
border-style: dotted;
border-color: #696969;
border-radius: 50%;
-webkit-animation: spin-right 10s linear infinite;
-moz-animation: spin-right 10s linear infinite;
-ms-animation: spin-right 10s linear infinite;
-o-animation: spin-right 10s linear infinite;
animation: spin-right 10s linear infinite;
}
#mars {
position: absolute;
top: 0;
left: 50%;
height: 15px;
width: 15px;
margin-top: -7.5px;
margin-left: -7.5px;
border-color: white;
border-width: 0;
border-style: solid;
border-radius: 50%;
}
#mars-orbit {
position: absolute;
top: 50%;
left: 50%;
height: 325px;
width: 325px;
margin-top: -162.5px;
margin-left: -162.5px;
border-width: 1px;
border-style: dotted;
border-color: #696969;
border-radius: 50%;
-webkit-animation: spin-right 50s linear infinite;
-moz-animation: spin-right 50s linear infinite;
-ms-animation: spin-right 50s linear infinite;
-o-animation: spin-right 50s linear infinite;
animation: spin-right 50s linear infinite;
}
#jupiter {
position: absolute;
top: 0;
left: 50%;
height: 45px;
width: 45px;
margin-top: -22.5px;
margin-left: -22.5px;
border-color: white;
border-width: 0;
border-style: solid;
border-radius: 50%;
}
#jupiter-orbit {
position: absolute;
top: 50%;
left: 50%;
height: 400px;
width: 400px;
margin-top: -200px;
margin-left: -200px;
border-width: 1px;
border-style: dotted;
border-color: #696969;
border-radius: 50%;
-webkit-animation: spin-right 60s linear infinite;
-moz-animation: spin-right 60s linear infinite;
-ms-animation: spin-right 60s linear infinite;
-o-animation: spin-right 60s linear infinite;
animation: spin-right 60s linear infinite;
}
#saturn {
position: absolute;
top: 0;
left: 50%;
height: 40px;
width: 40px;
margin-top: -20px;
margin-left: -20px;
border-color: white;
border-width: 0;
border-style: solid;
border-radius: 50%;
}
#saturn-orbit {
position: absolute;
top: 50%;
left: 50%;
height: 500px;
width: 500px;
margin-top: -250px;
margin-left: -250px;
border-width: 1px;
border-style: dotted;
border-color: #696969;
border-radius: 50%;
-webkit-animation: spin-right 70s linear infinite;
-moz-animation: spin-right 70s linear infinite;
-ms-animation: spin-right 70s linear infinite;
-o-animation: spin-right 70s linear infinite;
animation: spin-right 70s linear infinite;
}
#uranus {
position: absolute;
top: 0;
left: 50%;
height: 35px;
width: 35px;
margin-top: -17.5px;
margin-left: -17.5px;
border-color: white;
border-width: 0;
border-style: solid;
border-radius: 50%;
}
#uranus-orbit {
position: absolute;
top: 50%;
left: 50%;
height: 575px;
width: 575px;
margin-top: -287.5px;
margin-left: -287.5px;
border-width: 1px;
border-style: dotted;
border-color: #696969;
border-radius: 50%;
-webkit-animation: spin-right 80s linear infinite;
-moz-animation: spin-right 80s linear infinite;
-ms-animation: spin-right 80s linear infinite;
-o-animation: spin-right 80s linear infinite;
animation: spin-right 80s linear infinite;
}
#neptune {
position: absolute;
top: 0;
left: 50%;
height: 30px;
width: 30px;
margin-top: -15px;
margin-left: -15px;
border-color: white;
border-width: 0;
border-style: solid;
border-radius: 50%;
}
#neptune-orbit {
position: absolute;
top: 50%;
left: 50%;
height: 650px;
width: 650px;
margin-top: -325px;
margin-left: -325px;
border-width: 1px;
border-style: dotted;
border-color: #696969;
border-radius: 50%;
-webkit-animation: spin-right 90s linear infinite;
-moz-animation: spin-right 90s linear infinite;
-ms-animation: spin-right 90s linear infinite;
-o-animation: spin-right 90s linear infinite;
animation: spin-right 90s linear infinite;
}
#pluto {
position: absolute;
top: 0;
left: 50%;
height: 5px;
width: 5px;
margin-top: -2.5px;
margin-left: -2.5px;
border-color: white;
border-width: 0;
border-style: solid;
border-radius: 50%;
}
#pluto-orbit {
position: absolute;
top: 50%;
left: 50%;
height: 700px;
width: 700px;
margin-top: -350px;
margin-left: -350px;
border-width: 1px;
border-style: dotted;
border-color: #696969;
border-radius: 50%;
-webkit-animation: spin-right 100s linear infinite;
-moz-animation: spin-right 100s linear infinite;
-ms-animation: spin-right 100s linear infinite;
-o-animation: spin-right 100s linear infinite;
animation: spin-right 100s linear infinite;
}
/* Code for right spin */
@-webkit-keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* Code for left spin */
@-webkit-keyframes spin-left {
100% {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@keyframes spin-left {
100% {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
Raw
The-Solar-System.markdown

The Solar System

This is based on the Sun, Earth, and Code course by Andy Kim on Codecademy.

A Pen by biz man on CodePen.

License.

@bizworld
Copy link
Author

bizworld commented Mar 7, 2015

Do not use this code in any way shape or form without express permission.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment