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

Sun, Earth, and Code Forum

View Course » View Exercise

283 points
5600a04a86f552da290001b5_206782269
Submitted by
FairyHorse
about 2 years ago

Why does it say Add the animation code from the instructions to the "style.css" tab. when i did?

my 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://goo.gl/41IWnf">
    </div>


</body>
<style>

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

}
#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);
}
}#earth-orbit {
/* ... your other orbit 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;
}


0 votes

permalink

I dont know bt i have the same problem

382 points
3384f0a7d9e702bf9f95046c574c7ef4?s=140&d=retro
Submitted by
Mantis9797_55e7183295e378c7570003f6_
about 2 years ago


0 votes

permalink

there are two tabs at the top of the browser display area(just a tad above your code but below your bookmarks bar). this is where your styles should be going. not inside your HTML code.

426 points
9a74e1277d8e32358137a88e715f067c?s=140&d=retro
Submitted by
Bret Wagner
about 2 years ago