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>Tetris Challenge</title>
    <!--Import font -->
  <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<title id>Tetris Challenge</title>

<body>
  <h2> ANKIT BLOCKS </h2>
  <h4 id="status">Just Beat the Highscore</h2>
    <button id="instructions">Instructions</button>
    <!--Button for instructions -->
    <div id="myModal" class="modal">
      <div class="modal-content">
        <span class="close">&times;</span>
        <p> Left Arrow: moves the block left<br><br>  Right Arrow: moves the
          block right<br><br>
          Down Arrow: Accelerates the block's fall<br><br>
          A & D Keys: Rotate the block <br><br> Score as many points as possible
          by clearing horizontal lines of Blocks. <br><br> You must rotate,
          move, and drop the falling Tetriminos inside the playing field. <br><br>
          Lines are cleared when they are filled with Blocks and have no empty
          spaces.
        </p>
      </div>
    </div>
    <div id="button-container">
      <button id="start">Start</button>
      <h3>Score:<span id="score">0</span></h3>
      <button id="reset">Reset</button>
    </div>
    <canvas id="tetris" width="240" height="400">
      <script src="script.js"></script>
</body>

</html>