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 rel="stylesheet" href="styles.css">
    <script src="app.js" defer></script>
    <title>Spin-Wheel</title>
</head>
<body>
    <div class="backdrop"></div>
    <div class="modal">
        <h2 class="modal__title">Your Prize</h2>
        <p class="modal__content">Congratulations you just won:</p>
       <p><span id="prize"></span></p>
       <br>
        <p> Tap to Spin Again😎😉</p>
        <p>©Moyo.O</p>
      </div>
    <div class="outer_circle">
        <div class="inner_circle">
            <div class="spinbtn"><button class="spin">SPIN</button></div>
            <div class="box-a">
               <span class="triangle1"><p id="red-text">Ouch,Nothing</p></span>
               <span class="triangle2"><p id="pink-text">$10m</p></span>
               <span class="triangle3"><p id="gold-text"> Job</p></span>
               <span class="triangle4"><p id="blue-text">something Hooge</p></span>
            </div>
            <div class="box-b">
                <span id="brown" class="triangle1"><p id="brown-text">A slap</p></span>
                <span id="teal" class="triangle2"><p id="teal-text"> lost</p></span>
                <span id="grey" class="triangle3"><p id="grey-text">iPhone-12</p></span>
                <span id="torquise" class="triangle4"><p id="torquise-text">Trip to Dubia</p></span>
            </div>
         
        </div>
    
    </div>
    <div class="pointer"> <img src="images/pointer.png" alt=""></div>
    
</body>
</html>