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

Sun, Earth, and Code Forum

View Course

432 points
B1c70426efb6b1d316f0606c8ba35456?s=140&d=retro
Submitted by
Jaclem12_559d19b076b8fe2a130005f1_de
about 2 years ago

Nothing worked

I finished the whole course and copied everything as it said to be copied and did everything that I see as right....Yet all I see is the sun

There is no earth and no orbit..... Even the last step number 7 where it's supposed to be the code created by the tutorial it doesn't even show up.


0 votes

permalink

Here's some index code:


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

    <!-- Insert the 'earth' on the next line -->


    <div id='earth-orbit'>
<img id='earth' src="http://fc09.deviantart.net/fs71/f/2011/046/0/b/spinning_earth_by_atillathehungarian-d39ldm9.gif">
</body>

And some style.CSS: 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;

}

#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: 500px;
height: 500px;
margin-top: -250px;
margin-left: -250px;

border-width: 2px;
border-style: dotted;
border-color: BLACK;
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;

}
#sun {
position: absolute;
top: 50%;
left: 50%;

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;

}

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

Good luck! :)

488 points
57f842f8dd1edee8ea00025d_642922882
Submitted by
Illuminati
almost 2 years ago