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">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">

        <div class="heading">
            <h1 class="title">2048</h1>
        </div>

        <div class="above-game" id="above-game">
            <div class="game-intro">
                Join the tiles, get to <strong>2048!</strong>
                <br>
                <a href="#how-to-play" class="how-to-play-link"><strong> How to play → </strong></a>
            </div>
            <a class="restart-button" id="newGameButton">New Game</a>
        </div>

        <div class="game-container" id="game-container-outer">
            <div id="game-board"></div>
        </div>

        <p class="how-to-play" id="how-to-play">
            <strong>HOW TO PLAY:</strong> Use your <strong>arrow keys</strong> to move the tiles. Tiles with the same number <strong>merge into one</strong> when they touch. Add them up to reach <strong>2048!</strong>
            <br>
            <a href="#above-game"><strong>Start playing →</strong></a>
        </p>

        <hr>

        <footer>
            <div class="thank-you">Thank You for Playing</div>
            <div class="salutation">made by <strong>Garvit Jain</strong></div>
        </footer>

    </div>
    <script src="./js/script.js" type="module"></script>
</body>
</html>