I made this with the help from a tutorial from codecademy :)
Forked from Ophélie Champagne's Pen Solar system.
-
-
Save martic/28aa92fb7d69604132c734b9eae736c4 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