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

Sun, Earth, and Code Forum

View Course » View Exercise

44 points
531e4ef952f863389f000f89_725373783
Submitted by
PunkVintageDollhouse
almost 4 years ago

Earth won't spin, very confused

Code at bottom

I've been trying to get my Earth to spin, and I'm confused on a couple of things.

  1. What is RBRACE?
  2. Do I delete any code, and if not, how should I start another #earth-orbit

Thanks for your help.
(By the way, it says work in style.css and I am)
[code below]

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

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

}

#sun {
position: absolute;
/* 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: 200px;
width: 200px;
margin-top: -100px; 
margin-left: -100px;

border-color: orange;
border-width: 8px;
border-style: solid;
border-radius: 50%;

box-shadow: 0 0 128px red;

}

#earth {
/* Style your earth */
position: absolute;
top: 0;
left: 25%;

height: 50px;
width: 50px;
margin-left: -25px;
margin-top: -25px;

}

#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%
}

#earth-orbit {
-webkit-animation: spin-right 10s linear
-moz-animation: spin-right 10s linear
-ms-animation: spin-right 10s linear
-o-animation: spin-right 10s linear
animation: Spin-right 10s linear

@-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);
}
}


0 votes

permalink

I had same problem....check code in post regarding "why is there a small square...". You must add to #earth-orbit the following. Now my earth is spinning
-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;

172 points
5329ee5080ff33d078002fa5_517373008
Submitted by
Joanna
almost 4 years ago


0 votes

permalink

R Brace is } As soon as I inserted it on the line that it told me to the earth started rotating.

6 points
3d75dd5641b4734839d4781b031e54cf?s=140&d=retro
Submitted by
bigtedlocks
over 3 years ago


0 votes

permalink

Copy and paste the code from section 1 beyond your last brace in the style.css tab. Then copy and paste the code from section 2 atop the /* For Section #2 */ text. You will need to remove the second instance of '#earth-orbit' (that you just copied and pasted) as well as the braces directly after '#earth-orbit' and the bracket after 'animation: spin-right 10s linear infinite;'

Seems confusing, as always though, the Q&A forum helped me figure it out!

305 points
52811792abf821f4f400e71b_4910988
Submitted by
Matt
over 3 years ago

1 Comment

8bdfc5b1aef1247bafc3af72ba7b9e3e?s=140&d=retro David Samuels over 3 years ago

Thanks for posting a resolution!