index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Head&Tail-EG V2</title>
    <link rel="stylesheet" href="./styles.css">
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">   
    <link rel="shortcut icon" href="./SVG/coin1.svg">
</head>
<body>
    <nav>
        <div class="title">
            <h3>.Head 'n Tails <strong>V2</strong></h3>
            <h5>EGYPT</h6>
        </div>
    </nav>

    <div class="main">
        <div class="main_text">
            <h2>Hit Flip!</h2>
            <button id="flip">Flip!</button>
        </div>
        <div class="main_img">
            <!-- <img id="coin" src="./SVG/coin1.svg" alt="coin"> -->
            <div id="bm" class="coin">
                <div class="Tail-Tail"></div>
                <div class="Tail-Head"></div>
                <div class="Head-Tail"></div>
                <div class="Head-Head"></div>
            </div>
            <div class="main_image-result">
                <h3 id="result">hit flip!</h3>
            </div>
        </div>
    </div>

    <footer>
        <h4>Coded, designed & animated by <a target="_blank" href="https://github.com/Kareem-AEz">Kareem-Aez</a></h4>
        <h5>Was a challenge by <strong>ahmed anas</strong> for an oreo shake🥤</h5>
        <h5>Coin animation was a challenge by <a target="_blank" href="https://github.com/MaryEhb">Mary.E</a></h5>
    </footer>

    <script src="./Dependencies/lottie.js"></script>
    <script src="./index.js"></script>
</body>
</html>