Build a Moon Orbit - Build a Moon Orbit

HTML-CSS
1

Tell us what’s happening:

I have done what was asked, I think. I am stuck on steps 19 and 21 in the Build a Moon Orbit Project. Please help?

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" />
</head>

<body>
  <div class="space">
    <div class="earth"></div>
    <div class="orbit">
      <div class="moon"></div>
    </div>
  </div>
</body>

</html>

/* file: styles.css */
body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.space {
  align-items: center;
  width: 200px;
  height: 200px;
  position: relative;
}

.earth {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: aqua;
}

.moon {
  background-color: yellow;
  border-radius: 50%;
  position: absolute;
  width: 30px;
  height: 30px;
  left: 50%;
  top: 0%;
  transform: translate(-50%);
  align-items: center;
}

.orbit {
  width: 200px;
  height: 200px;
  position: absolute;
  transform: translate(-50%, -50%);
  animation: orbit 5s linear infinite;
  transform-origin: 
}

@keyframes orbit {
  0% {
    transform: rotate(0deg) translate(-50%, -50%);
  }
  100% {
    transform: rotate(360deg) translate(-50%, -50%);
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36 Edg/136.0.0.0

Challenge Information:

Build a Moon Orbit - Build a Moon Orbit

2

What are those two tests? What have you tried to figure out why those tests are failing?

3

  1. Remove the % unit from the top property on .moon. It shouldn’t matter, but the test fails with it.

  2. Use translateX not translate on .moon. It doesn’t really change its position, but again the test will fail if you do not use translateX.