Sun and Moon

Developer
Tracie Holton
Size
2,056 Kb
Views
38,456
  1. Sun and Moon Previews
  2. Sun and Moon HTML Codes
  3. Sun and Moon CSS Codes

How do I make an sun and moon?

The Sun, Moon, and Code exercise by Codecademy. http://www.codecademy.com/en/goals/web-beginner-en-ymqg0. What is a sun and moon? How do you make a sun and moon? This script and codes were developed by Tracie Holton on 27 August 2022, Saturday.

Sun and Moon Previews
IQ Test

Sun and Moon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sun and Moon</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html> <head> <link rel="stylesheet" href="style.css" /> </head> <body> <!-- Right below is an image of the sun --> <img id="sun" src="http://goo.gl/PmbqZa"> <div id='earth-orbit'> <img id="earth" src="http://goo.gl/41IWnf"> </div> <!-- Insert the 'earth' on the next line --> </body>
</html>
</body>
</html>

Sun and Moon - Script Codes CSS Codes

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%; border-color: orange; border-width: 2px; border-style: solid; border-radius: 50%; box-shadow: 0 0 64px red; /* 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; border-color: blue; border-width: 1px; border-style: solid; border-radius: 50%; box-shadow: 0 0 30px lightyellow;
}
#earth-orbit { /* For Section #2 */ 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%; -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); }
}
Sun and Moon - Script Codes
Sun and Moon - Script Codes
Home Page Home
Developer Tracie Holton
Username TracieH
Uploaded August 27, 2022
Rating 3
Size 2,056 Kb
Views 38,456
Do you need developer help for Sun and Moon?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tracie Holton (TracieH) Script Codes
Name
Animated Tracie
Poem Typesetting
First Codecademy Exercise
A Pen by Tracie Holton
Unmasking HTML Emails
Newsweek Project for FCC
My First Home Page
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!