index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF - 8">
        <meta name ="viewport" content="width = device-width , initial-scale=1.0"> 
        <title>Dice game</title>
        <link href="./styles.css" rel="stylesheet" >
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="icon" href="./images/favicon.png" type="image/png">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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=EB+Garamond:ital@0;1&family=Edu+SA+Beginner&family=Monoton&family=Nunito:ital@1&family=REM:wght@100&family=Shadows+Into+Light&display=swap" rel="stylesheet">
    
</head>
    <body> 
<div class="page">
    <img src="./images/pexels.jpeg" alt="Fallback Image" id="bg">

    <div class="container">
        <div class="name"> <h2></h2> 
            <h1>Player 1 WINS !</h1>
            <button id="refreshButton">Roll</button>
        </div>

        <div class="firstPlayer">
            <h3>First Player</h3>
            <img src="./images/dice6.png" rel="dice_image" id="rel">
        </div>
        
        <div class="secondPlayer">
            <h3>Second Player</h3>
            <img src="./images/dice4.png" rel="dice_image" id="rel">
        </div>


    </div>
    
</div>
    <script src="./index.js" type="text/javascript"></script>
    <footer>Jikkesh/developer</footer>
    </body>
   
</html>