Commit 172bc5ac authored by Pranay vardhan reddy's avatar Pranay vardhan reddy

Add new file

parent 364b61d2
Pipeline #9470 passed with stage
in 14 seconds
<html>
<head>
<title>Solar system</title>
</head>
<body>
<div id="system">
<img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.NgoIkbwSBv6MIj5AjPlLBAHaHa%26pid%3D15.1&f=1" id="sun" />
<div id="earth-orbit">
<img src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2F2.bp.blogspot.com%2F_xjcwwA-nj8k%2FS9D9ixh0QqI%2FAAAAAAAAANw%2FOr6ldDwxI0k%2Fs1600%2Fearth.jpg&f=1" id="earth" />
<div id="moon-orbit">
<div id="moon"></div>
</div>
</div>
</div>
</body>
<style>
body{
background: white;
width:100%;
}
#system{
width:1500px;
margin:auto;
background:black;
height:600px;
}
#sun{
margin-top:270px;
margin-left:630px;
position:absolute;
height:50px;
width:50px;
}
#earth{
position:absolute;
margin-left:100px;
height:50px;
width:70px;
}
#earth-orbit{
position:absolute;
margin-top:100px;
margin-left:450px;
width:400px;
height:400px;
border:1px dotted white;
border-radius:100%;
-webkit-animation:spin 10s linear infinite;
animation:spin 10s linear infinite;
}
#moon{
width:10px;
height:10px;
border-radius:100%;
background:white;
position:absolute;
margin-left:70px;
}
#moon-orbit{
width:100px;
height:100px;
border-radius:100%;
border:1px dotted white;
margin-left:75px;
margin-top:-25px;
-webkit-animation:spin 5s linear infinite;
animation:spin 5s linear infinite;
}
@-webkit-keyframes spin{
100%{
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
@keyframes spin{
100%{
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
</style>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment