index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Overpass:wght@100;200;300;400;500;600;700;800;900&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
        integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
    <title>Challenge</title>
</head>

<body>
    <div class="container rates" id="rates">
        <i class="fa-solid fa-star"></i>

        <h1>How did we do?</h1>
        <p>please let us know how we did with your support<br> request. All feedback is appreciated to help us<br>
            improve our offering! </p>

        <div id="choices">
            <Button class="ratings numbers">1</Button>
            <Button class="ratings numbers">2</Button>
            <Button class="ratings numbers">3</Button>
            <Button class="ratings numbers">4</Button>
            <Button class="ratings numbers">5</Button>
        </div>

        <button type="button" class="submit">SUBMIT</button>
    </div>


    <!-- APPRECIATION -->
    <div class="container-1 thank-you" id="appreciation">
        <img src="/images/illustration-thank-you.svg" alt="illustration-thank-you">

        <div class="your-choice"></div>

        <h2>Thank you!</h2>
        <p>We appreciate you taking the time to give a rating.<br> if you ever need more support. dont hesitate<br> to
            get in touch!</p>
    </div>


    <script src="main.js"></script>
</body>

</html>