This forum is now read-only. Please use our new forums! Go to forums
Finished Course, but earth won't orbit sun?
I completed the course, and I thought I followed all the instructions, but after finishing everything, the earth is just static. Probably a simple mistake. Here is my code:
HTML
**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 { /* Style your earth */ position:absolute; top:0; left:50%; height:50px; width:50px; margin-left:-25px; margin-top:-25px; }
#earth-orbit { position:absolute; top: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; }
@-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); } }
Can someone tell me what I did wrong?
Answer 5539706876b8fe68250000ea
I think just check your semicolons and I recognise that in your
@keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
And your
@-webkit-keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
you put a extra }
at the end. Try it!
Answer 55397a88e39efe98f800003c
What is with the }
before the
#earth {
/* Style your earth */
position:absolute;
top:0;
left:50%;
height:50px;
width:50px;
margin-left:-25px;
margin-top:-25px;
}
1 comments
it closes the { after #sun
Answer 553aba9bd3292f7744000405
Popular free courses
- Free Course
Learn SQL
In this SQL course, you'll learn how to manage large datasets and analyze real data using the standard data management language.Beginner friendly,4 LessonsLanguage Fluency - Free Course
Learn JavaScript
Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.Beginner friendly,11 LessonsLanguage Fluency - Free Course
Learn HTML
Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.Beginner friendly,6 LessonsLanguage Fluency
2 comments
I just deleted those and the whole paragraph was full of errors. Each has two sets of { {, and should have } } to close
how about the semi colons?