Build a Moon Orbit - Build a Moon Orbit

HTML-CSS
1

Tell us what’s happening:

on number 15 I keep failing. It tells me to set the translate( -50%, -50% ). My code does reflect this but it still fails me. Can i get a hint at what i am doing wrong? Or is it a bug in the test itself?

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 */
* {
  box-sizing: border-box;
}
body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  background-color: black;
  padding: 0;
}
.space {
  width: 200px;
  height: 200px;
  position: relative;
}
.earth {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.orbit {
  position: absolute;
  bottom: 50%;
  right: 50%;
  width: 200px;
  height: 200px;
  transform: rotate(90deg) translate(-50%, -50%);
  border: 1px dashed white;
  animation: orbit 5s linear infinite;
dashed white;
}
.orbit-track {
  width: 100%;
  height: 100%;
  border: 1px dashed white;
  animation: orbit 5s linear infinite;
}

.moon {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: grey;
  border-radius: 50%;
}

@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/140.0.0.0 Safari/537.36 Edg/140.0.0.0

Challenge Information:

Build a Moon Orbit - Build a Moon Orbit
https://www.freecodecamp.org/learn/full-stack-developer/lab-moon-orbit/build-a-moon-orbit

2

Ignore the orbit track. It is code I put in to try and adjust the wonky path the moon takes around the earth and has since been deleted.

3

What line do you think meets the test? Does that line do exactly and only what the test requires?

4

Got it! Thanks, for the hint.

1 Like