Build a Moon Orbit - Build a Moon Orbit

HTML-CSS
1

Tell us what’s happening:

Whenever I try and “run the tests” it always says everything in my code is wrong even step 1 even though I completed the step and the code works, what should I do and it it because i am doing this on chrome os. I don’t think it is that though because this has never been a problem before.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Moon Orbit</title>
    <link rel="stylesheet" href="styles.css">
    <meta name="viewport" content="width=device-width, intial-scale=1.0">
</head>
<body>
<div class="space">
    <div class="earth"></div>
    <div class="orbit">
        <div class="moon"></div>
    </div>
</div>
</body>

</html>

/* file: styles.css */
body{
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  overflow: scroll;
  background-color: black;
}
.space{
margin: auto;
width: 200px;
height: 200px;
position: relative;
}
.earth{
  position: absolute;
  background: radial-gradient(green, blue);
  width: 100px;
  height: 100px;
top:50px;
left: 50px;
border-radius: 50%;
}
.orbit{
  width:200px;
  height:200px;
  position: absolute;
  transform: translate(-50%, -50%);
  animation: orbit 5s linear infinite;
}
.moon{
  position: absolute;
  width:30px;
  height:30px;
  background-color: grey;
left: -50%;
border-radius: 50%;
}
@keyframes orbit{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36

Challenge Information:

Build a Moon Orbit - Build a Moon Orbit

2

Hi @vijayasrinivas090820

  1. The .earth element should be moved back and up by 50% by setting the transform property to translate(-50%, -50%) .

For test 8 check which selector is using the above property.

Happy coding