I made this with the help from a tutorial from codecademy :)
Forked from Ophélie Champagne's Pen Solar system.
Last active
June 26, 2016 11:57
-
-
Save anonymous/4e2b83b34bda82c4b3f89383b738ca37 to your computer and use it in GitHub Desktop.
Solar system
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <img id="sun" src="http://goo.gl/PmbqZa"> | |
| <div id="earth-orbit"> | |
| <img id="earth" src=""> | |
| <div id="earth-rotate"> | |
| <img id="earth-day" src= "https://dperkins.org/2015/2015-01-21.Travel/antarctica.png"> | |
| </div> | |
| <div id="moon-orbit"> | |
| <img id="moon" src= "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/Moon_0063_Nevit.svg/1000px-Moon_0063_Nevit.svg.png"> | |
| </div> | |
| </div> | |
| <div id="mars-orbit"> | |
| <img id="mars" src="http://www.pd4pic.com/images/ball-glass-red.png"> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, body { | |
| width: 100%; | |
| height: 100%; | |
| background-color: black; | |
| } | |
| #sun { | |
| position: absolute; | |
| top: 53%; | |
| left: 50%; | |
| height: 200px; | |
| width: 200px; | |
| margin-top: -70px; | |
| margin-left: -100px; | |
| border-color: orange; | |
| border-width: 10px; | |
| border-style: solid; | |
| border-radius: 50%; | |
| box-shadow: 0 0 150px orange; | |
| } | |
| #earth { | |
| position: absolute; | |
| top: 0; | |
| left: 50%; | |
| height: 0px; | |
| width: 50px; | |
| margin-left: -25px; | |
| margin-top: -25px; | |
| } | |
| #earth-orbit { | |
| position: absolute; | |
| top: 60%; | |
| left: 50%; | |
| width: 500px; | |
| height: 500px; | |
| margin-top: -250px; | |
| margin-left: -250px; | |
| border-width: 2px; | |
| border-style: dotted; | |
| border-color: grey; | |
| border-radius: 50%; | |
| -webkit-animation: spin-right 146s linear infinite; | |
| -moz-animation: spin-right 146s linear infinite; | |
| -ms-animation: spin-right 146s linear infinite; | |
| -o-animation: spin-right 146s linear infinite; | |
| animation: spin-right 146s linear infinite; | |
| } | |
| #moon { | |
| position: absolute; | |
| top: 0; | |
| left: 50%; | |
| height: 25px; | |
| width: 25px; | |
| margin-left: 38px; | |
| margin-top: 38px; | |
| } | |
| #moon-orbit { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 100px; | |
| height: 100px; | |
| margin-top: -300px; | |
| margin-left: -50px; | |
| border-width: 1px; | |
| border-style: dashed; | |
| border-color: white; | |
| border-radius: 50%; | |
| -webkit-animation: spin-right 11.2s linear infinite; | |
| -moz-animation: spin-right 11.2s linear infinite; | |
| -ms-animation: spin-right 11.2s linear infinite; | |
| -o-animation: spin-right 11.2s linear infinite; | |
| animation: spin-right 11.2s linear infinite; | |
| } | |
| #earth-day { | |
| position: absolute; | |
| top: 0%; | |
| left: 0%; | |
| height: 60px; | |
| width: 60px; | |
| margin:0px; | |
| } | |
| #earth-rotate { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 60px; | |
| height: 60px; | |
| margin-top: -280px; | |
| margin-left: -30px; | |
| border-width: 0px; | |
| border-style: dashed; | |
| border-color: white; | |
| border-radius: 50%; | |
| -webkit-animation: spin-right .4s linear infinite; | |
| -moz-animation: spin-right .4s linear infinite; | |
| -ms-animation: spin-right .4s linear infinite; | |
| -o-animation: spin-right .4s linear infinite; | |
| animation: spin-right .4s linear infinite; | |
| } | |
| #mars{ | |
| position: absolute; | |
| top: 0; | |
| left: 50%; | |
| height: 40px; | |
| width: 40px; | |
| margin-left: -25px; | |
| margin-top: -25px; | |
| } | |
| #mars-orbit{ | |
| position: absolute; | |
| top: 45%; | |
| left: 45%; | |
| width: 700px; | |
| height: 700px; | |
| margin-top: -250px; | |
| margin-left: -250px; | |
| border-width: 2px; | |
| border-style: dotted; | |
| border-color: grey; | |
| border-radius: 50%; | |
| -webkit-animation: spin-right 274.8s linear infinite; | |
| -moz-animation: spin-right 274.8s linear infinite; | |
| -ms-animation: spin-right 274.8s linear infinite; | |
| -o-animation: spin-right 274.8s linear infinite; | |
| animation: spin-right 274.8s linear infinite; | |
| } | |
| @-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); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment