Index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Snake Game</title>
  <style>
    body {
      height: 100vh;
      width: 100vw;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
      background-color: black;
    }
	
    #game-board {
      background-color: #E6F3ED;
      width: 100vmin;
      height: 100vmin;
      display: grid;
      grid-template-rows: repeat(21, 1fr);
      grid-template-columns: repeat(21, 1fr);
    }

    .snake {
      background-color: hsl(200, 100%, 50%);
      border: .25vmin solid black;
    }

    .food {
      background-color: hsl(50, 100%, 50%);
      border: .25vmin solid black;
    }
  </style>
  <script src="game.js" defer type="module"></script>
</head>
<body>
    <div id="header">
        <h1>Personal Portfolio Hub</h1>
    
    </div>
    <div id="sideMenu">
        <p>
		<button onclick="location.href='main_page.html'">main_page.html</button>
		<button onclick="location.href='Academic_Projects.html'">Academic_Projects.html</button>
		

        </p> 
        </p>
    </div>
	
<div id = content >

  <div id="game-board"></div>
  </div>
   <div id="footer">
        Name: Hadiyah Khan
        Email Address:Hadiyahkhan03@gmail.com
    </div>
</body>
</html>