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="style.css">
    <script src="https://kit.fontawesome.com/7bfc8cee80.js"></script>
    <script src="script.js" defer></script>
    <title>Snake Game</title>
    <link rel="shortcut icon" type="image" href="logo.png">

    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-VB5ND4R4BT"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'G-VB5ND4R4BT');
    </script>
</head>

<body>
    <h1 style="color: green;">Snake Game <i class="fa-solid fa-staff-snake"></i></h1>
    <span><i class="fa-solid theme fa-moon"></i></span>
    <div class="wrapper">
        <div class="game-details">
            <span class="score">Score:0</span>
            <span class="high-score">High Score:15</span>
        </div>
        <div class="play-board"></div>
        <div class="controls">
            <i data-key="ArrowLeft" class="fa-solid fa-arrow-left-long"></i>
            <i data-key="ArrowUp" class="fa-solid fa-arrow-up-long"></i>
            <i data-key="ArrowRight" class="fa-solid fa-arrow-right-long"></i>
            <i data-key="ArrowDown" class="fa-solid fa-arrow-down-long"></i>
        </div>
    </div>
</body>

</html>