The World Revolving Around The Sun.
A Pen by Carlo Moscatiello on CodePen.
The World Revolving Around The Sun.
A Pen by Carlo Moscatiello on CodePen.
<html> | |
<head> | |
<style> | |
body { | |
/* The universe is black */ | |
background-color: black; | |
width: 100%; | |
height: 100%; | |
} | |
#sun { | |
/* Style your sun */ | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
height: 100px; | |
width: 100px; | |
margin-top: -50px; | |
margin-left: -50px; | |
border-color: #dddd00; | |
border-width: 8px; | |
border-style: solid; | |
border-radius: 50%; | |
box-shadow: 0 0 128px orangered; | |
} | |
#earth { | |
position: absolute; | |
top: 0; | |
left: 50%; | |
height: 50px; | |
width: 50px; | |
margin-left: -25px; | |
margin-top: -25px; | |
} | |
#earth-orbit { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
width: 300px; | |
height: 300px; | |
margin-top: -150px; | |
margin-left: -150px; | |
-webkit-animation: spin-right 10s linear infinite; | |
-moz-animation: spin-right 10s linear infinite; | |
animation: spin-right 10s linear infinite; | |
} | |
@-webkit-keyframes spin-right { | |
100% { | |
-webkit-transform: rotate(360deg); | |
} | |
} | |
@-moz-keyframes spin-right { | |
100% { | |
-webkit-transform: rotate(360deg); | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<!-- Right below is an image of the sun --> | |
<img id='sun' src="https://dl.dropboxusercontent.com/u/200015521/Image%20URL%20Links/Marijuana-Leaf.png"> | |
<!-- Insert the 'earth' on the next line --> | |
<div id='earth-orbit'> | |
<img id='earth' src="https://dl.dropboxusercontent.com/u/200015521/Pictures/Carlo.png"> | |
</div> | |
</body> | |
</html> |