index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- displays site properly based on user's device -->

    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./images/favicon-32x32.png"
    />
    <link rel="stylesheet" href="style.css" />

    <title>Frontend Mentor | Interactive rating component</title>

    <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
    <style>
      .attribution {
        font-size: 11px;
        text-align: center;
      }
      .attribution a {
        color: hsl(228, 45%, 44%);
      }
    </style>
  </head>
  <body>
    <!-- Rating state start -->
    <main>
      <div id="before" style="display: block">
        <img id="star" src="images/icon-star.svg" alt="star image" />

        <h1>How did we do?</h1>

        <p>
          Please let us know how we did with your support request. All feedback
          is appreciated to help us improve our offering!
        </p>

        <form>
          <div class="ratings">
            <input id="1" type="radio" name="rating" value="1" />
            <label for="1">1</label>

            <input id="2" type="radio" name="rating" value="2" />
            <label for="2">2</label>

            <input id="3" type="radio" name="rating" value="3" />
            <label for="3">3</label>

            <input id="4" type="radio" name="rating" value="4" />
            <label for="4">4</label>

            <input id="5" type="radio" name="rating" value="5" checked />
            <label for="5">5</label>
          </div>
          <button type="submit" id="submit">Submit</button>
        </form>
      </div>
      <!-- Rating state end -->

      <!-- Thank you state start -->
      <div id="after" style="display: none">
        <div class="thank-you">
          <img src="images/illustration-thank-you.svg" alt="machine image" />

          <div class="submit-rate">
            <p>
              You selected
              <!-- Add rating here -->
              <span id="rate"></span>
              out of 5
            </p>
          </div>

          <h1>Thank you!</h1>

          <p>We appreciate you taking the time to give a rating. If you ever need
            more support, don’t hesitate to get in touch!</p>
            </div>
           </div>
         </main>
          <!-- Thank you state end -->
      <footer>
    <div class="attribution">
      <p>
        Challenge by
        <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
          >Frontend Mentor</a
        >. Coded by
        <a href="http://www.instagram.com/yurikoller">Yuri Koller</a>.
      </p>
    </div>
     </footer>
    <script src="script.js"></script>
  </body>
</html>