index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles/styles.css">
</head>
<body>
<!--this is introduction page-->
    <div id="game-introduction">
        <header>
        <img src="./images/logo1.png" alt="logo" height="200" width="200">
        <h3>welcome to racing bike game</h3>
        <p>This is the biggest motorbike riding game ever in the world</p></aside>
        </header>
       <button id="start-button">Ride The bike</button></div>
    
   
    <!--this is game page currently hidden via css-->
    <div id="game-container">
        <div id="scores-lives">
            <p>Score: <span id="score"></span></p>
            <p>Lives: <span id="lives"></span></p>
        </div>
        <div id="game-screen"></div>
    </div>


<!--this is end gamescreen-->
<div id="game-end">
    <h4>You Lost Yours All Lives. Want to try again? Please Click restart </42>
    <br>
    <button id="restart-button">Re-start</button>
</div>

    <script src="js/common.js"></script>
    <script src="js/obstacle.js"></script>
    <script src="js/player.js"></script>
    <script src="js/game.js"></script>
    <script src="js/script.js"></script>
</body>
</html>