This forum is now read-only. Please use our new forums at discuss.codecademy.com.

Sun, Earth, and Code Forum

View Course » View Exercise

448 points
D8a78259850ff82d7c2ff71ed56cffef?s=140&d=retro
Submitted by
Alex Tokin
about 3 years ago

How can i get moon go round my earth img?

Hello everyone.
After completing this course was trying to make moon go round earth all along it's sun orbit but got stuck.
Help me if u can please.
Should i make 2 orbits for my Moon or what?


0 votes

permalink

My code :

<body>
    <!-- Right below is an image of the sun -->
    <img class='celestial_body' id="sun" src="http://goo.gl/dEEssP">

    <!-- Insert the 'earth' on the next line -->
    <div class='celestial_body' id='earth-orbit'>
    <img class='celestial_body' id="earth" src="http://lasttechage.files.wordpress.com/2011/07/earth-100x100.jpg"
  </div>
  <div class='celestial_body' id='moon-orbit'>
  <img class='celestial_body' id="moon" src="http://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg"
    </div>
</body>

448 points
D8a78259850ff82d7c2ff71ed56cffef?s=140&d=retro
Submitted by
Alex Tokin
about 3 years ago


0 votes

permalink

html, body {
/* The universe takes up all available space */
width: 100%;
height: 100%;

/* The universe is black */
background-color: black;

}
.celestial_body {
position:absolute;
}
#sun {
/*
position: absolute;
/
border-color: orange;
border-width: 2px;
border-style: solid;
border-radius: 100%;
box-shadow: 0 0 64px red;
/
Positions the top-left corner of the image to be *
/* in the middle of the box */
top: 50%;
left: 50%;

/* Play with these numbers to see what it does */
height: 75px;
width: 75px;
margin-top: -37.5px; 
margin-left: -37.5px;

}

#earth {

top: 0%;
left: 50%;

height: 37.5px;
width: 37.5px;
margin-left: -18.75px;
margin-top: -18.75px;
/*
border-width: 2px;
border-color: black;
border-style: solid;
border-radius: 50%;
*/
box-shadow:0 0 100px blue;

}

#earth-orbit {

position: absolute;
top: 50%;
left: 50%;

width: 500px;
height: 500px;
margin-top: -250px;
margin-left: -250px;
/*
border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%;
/* For Section #2 */
/* now i go styles */
-webkit-animation: spin-right 10s linear infinite;
-moz-animation: spin-right 10s linear infinite;
animation: spin-right 10s linear infinite;

}
#moon {
/*position:absolute;
top: 0;
left: 50%;
*/

height: 10px;
width: 10px;
margin-left: -5px;
margin-top: -5px;
/*
border-width: 2px;
border-color: black;
border-style: solid;
border-radius: 50%;
*/
box-shadow:0 0 100px white;

}
#moon-orbit {

top: 0;
left: 50%;

width: 20px;
height: 20px;
margin-top: -20px;
margin-left: -20px;

/*
border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%;
/* For Section #2 */
/* now i go styles */
-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-keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
}
}

448 points
D8a78259850ff82d7c2ff71ed56cffef?s=140&d=retro
Submitted by
Alex Tokin
about 3 years ago

3 Comments

F0be4517679492f5454b749bb14a7b45?s=140&d=retro wendyat163 about 3 years ago

i wrote the same code. but the moon just won't rotate.

533f58168c1ccc3e4e000ccd_394375953 DevilsReaper about 3 years ago

same For me

Picture Jonathan Mercure about 3 years ago

I'm thinking of putting the Code for the Moon's orbit, inside the code for the Earth orbit,,,, but its not working loll ,,, Is there something else I can write in position:absolute ?? other that absolute?