Ajax-loader-large-white
Sun, Earth, and Code
Orbit with style!

In the last exercise, we added an element for to represent earth's orbit. Let's add some visual changes by editing style.css.

Instructions

01.
Click on style.css tab in your editor.

02.
Change the CSS stylesheet to include the following:

Edit #earth

#earth {
    position: absolute;
    top: 0;
    left: 50%;

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

Edit #earth-orbit

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

03.
Play with the top, left, width, and height values and see what changes.

index.html
style.css
project
View Preview