A Pen by Carlo Moscatiello on CodePen.
Last active
October 31, 2016 16:33
-
-
Save cm85/a7defd076fbba5277d8304364b6cb029 to your computer and use it in GitHub Desktop.
Carlo's Universe
A Pen by Carlo Moscatiello on CodePen.
This file contains 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> | |
| <!-- Right below is an image of the sun --> | |
| <img id="sun" src="https://dl.dropboxusercontent.com/u/200015521/Image%20URL%20Links/Carlo.png"> | |
| <img id='moon' src='https://dl.dropboxusercontent.com/u/200015521/Pictures/Greygoose.png'> | |
| <div id='earth-orbit'> | |
| <img id='jupiter' src='https://dl.dropboxusercontent.com/u/200015521/Pictures/Goldschlager.png'> | |
| </div> | |
| <div id='earth-orbit'> | |
| <img id="earth" src="https://dl.dropboxusercontent.com/u/200015521/Pictures/Jager.png"> | |
| </div> | |
| </body> | |
| </html> |
This file contains 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 { | |
| /* The universe takes up all available space */ | |
| width: 100%; | |
| height: 100%; | |
| /* The universe is black */ | |
| background-color: black; | |
| } | |
| #sun { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| height: 200px; | |
| width: 200px; | |
| margin-top: -100px; | |
| margin-left: -100px; | |
| border-color: green; | |
| border-width: 8px; | |
| border-style: solid; | |
| border-radius: 50%; | |
| box-shadow: 0 0 128px red; | |
| } | |
| #earth { | |
| position: absolute; | |
| top: 0%; | |
| left: 50%; | |
| height: 100px; | |
| width: 75px; | |
| margin-top: -25px; | |
| margin-left: -25px; | |
| border-color: purple; | |
| border-width: 8px; | |
| border-style: solid; | |
| border-radius: 50%; | |
| box-shadow: 0 0 128px green; | |
| } | |
| #jupiter{ | |
| position: absolute; | |
| top: 90%; | |
| left: 50%; | |
| height: 120px; | |
| width: 100px; | |
| margin-top: -100px; | |
| margin-left: -100px; | |
| border-color: blue; | |
| border-width: 8px; | |
| border-style: solid; | |
| border-radius: 50%; | |
| box-shadow: 0 0 128px blue; | |
| -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; | |
| @-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); | |
| } | |
| } | |
| } | |
| #moon{ | |
| position: absolute; | |
| top: 90%; | |
| left: 50%; | |
| height: 150px; | |
| width: 90px; | |
| margin-top: -100px; | |
| margin-left: -100px; | |
| border-color: brown; | |
| border-width: 8px; | |
| border-style: solid; | |
| border-radius: 50%; | |
| box-shadow: 0 0 128px yellow; | |
| -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; | |
| @-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); | |
| } | |
| } | |
| } | |
| #earth-orbit { | |
| position: absolute; | |
| top: 90%; | |
| left: 35%; | |
| width: 500px; | |
| height: 500px; | |
| margin-top: -270px; | |
| margin-left: -250px; | |
| border-width: 2px; | |
| border-style: dotted; | |
| border-color: white; | |
| 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; | |
| } | |
| @-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