I used html css and javaScript to complete the challenge

Your solution is pretty well 😊. I learned some new things from that.

But I found there something that can be improved.

First you can use CSS variables. It will make easier to control your code. as example:

:root {
  --text-color: hsl(217, 12%, 63%);
  --gradient-background: linear-gradient(hsl(213, 19%, 18%), hsl(216, 12%, 8%));
}

/* then you can use like this */
.rating-card {
  color: var(--text-color)
}

Secondly, there is code duplication. you used many common property in both .rating-card & .thank-you-car.

.rating-card {
  /* These are common properties */
  background: linear-gradient(hsl(213, 19%, 18%), hsl(216, 12%, 8%));
  color: hsl(217, 12%, 63%);
  height: 360px;
  width: 400px;
  padding: 20px;
  border-radius: 15px;
}

.thank-you-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* These are common properties */
  background: linear-gradient(hsl(213, 19%, 18%), hsl(216, 12%, 8%));
  color: hsl(217, 12%, 63%);
  height: 360px;
  width: 400px;
  padding: 20px;
  border-radius: 15px;
}

You could create a class like .card with those common properties:

.card {
  background: linear-gradient(hsl(213, 19%, 18%), hsl(216, 12%, 8%));
  color: hsl(217, 12%, 63%);
  height: 360px;
  width: 400px;
  padding: 20px;
  border-radius: 15px;
}

Now you can use the .card class & avoid code duplication. as example:

<div class="container">
<div class="card rating-card">
    ...
  </div>
<div class="card thank-you-card hidden">
    ...
  </div>
</div>