API tools faq
paste
Advertisement
Crenox

Codeacademy Sun, Earth, and Code

Crenox
Dec 2nd, 2015
132
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.51 KB | None | 0 0
raw download clone embed print report
  1. index.html --------------------------------------------------------------------------------------------------------------------
  2. <html>
  3. <head>
  4. <link rel="stylesheet" href="style.css" />
  5. </head>
  6.  
  7. <body>
  8. <!-- Right below is an image of the sun -->
  9. <img id="sun" src="http://goo.gl/PmbqZa">
  10.  
  11. <!-- Insert the 'earth' on the next line -->
  12. <div id="earth-orbit">
  13. <img id="earth" src="http://goo.gl/41IWnf">
  14. </div>
  15.  
  16. </body>
  17. </html>
  18.  
  19. styles.css --------------------------------------------------------------------------------------------------------------------
  20. html, body
  21. {
  22. /* The universe takes up all available space */
  23. width: 100%;
  24. height: 100%;
  25.  
  26. /* The universe is black */
  27. background-color: black;
  28. }
  29.  
  30. #sun
  31. {
  32. position: absolute;
  33. /* Positions the top-left corner of the image to be *
  34. /* in the middle of the box */
  35. top: 50%;
  36. left: 50%;
  37.  
  38. /* Play with these numbers to see what it does */
  39. height: 200px;
  40. width: 200px;
  41. margin-top: -100px;
  42. margin-left: -100px;
  43. border-color: orange;
  44. border-width: 4px;
  45. border-style: solid;
  46. border-radius: 50%;
  47.  
  48. box-shadow: 0 0 128px yellow;
  49. }
  50.  
  51. #earth
  52. {
  53. /* Style your earth */
  54. position: absolute;
  55. top: 0%;
  56. left: 50%;
  57.  
  58. height: 50px;
  59. width: 50px;
  60. margin-left: -25px;
  61. margin-top: -25px;
  62.  
  63. }
  64.  
  65. #earth-orbit
  66. {
  67. /* For Section #2 */
  68. position: absolute;
  69. top: 50%;
  70. left: 50%;
  71.  
  72. width: 500px;
  73. height: 500px;
  74. margin-top: -250px;
  75. margin-left: -250px;
  76.  
  77. border-width: 2px;
  78. border-style: dotted;
  79. border-color: white;
  80. border-radius: 50%;
  81.  
  82. -webkit-animation: spin-right 10s linear infinite;
  83. -moz-animation: spin-right 10s linear infinite;
  84. -ms-animation: spin-right 10s linear infinite;
  85. -o-animation: spin-right 10s linear infinite;
  86. animation: spin-right 10s linear infinite;
  87. }
  88.  
  89. @-webkit-keyframes spin-right
  90. {
  91. 100%
  92. {
  93. -webkit-transform: rotate(360deg);
  94. -moz-transform: rotate(360deg);
  95. -ms-transform: rotate(360deg);
  96. -o-transform: rotate(360deg);
  97. transform: rotate(360deg);
  98. }
  99. }
  100.  
  101. @keyframes spin-right
  102. {
  103. 100%
  104. {
  105. -webkit-transform: rotate(360deg);
  106. -moz-transform: rotate(360deg);
  107. -ms-transform: rotate(360deg);
  108. -o-transform: rotate(360deg);
  109. transform: rotate(360deg);
  110. }
  111. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!