index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tic Tac Toe</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <!-- Start - Splash Animation -->
    <div class="splash-screen" id="splashScreen">
      <div class="splash-content">
        <script
          src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs"
          type="module"
        ></script>
        <dotlottie-player
          src="https://lottie.host/1ddf984b-7523-4baf-9015-a04b667a4030/pCYVGqAZRv.json"
          background="transparent"
          speed="1.5"
          style="width: 400px; height: 400px"
          loop
          autoplay
        ></dotlottie-player>
        <p style="font-family: cursive; font-size: 1rem">The Creator : Aryan</p>
      </div>
    </div>
    <!-- End - Splash Animation -->

    <div class="main-content" id="mainContent">
      <!-- Start - Form -->

      <div class="login-box">
        <h2>Enter</h2>
        <form>
          <div class="user-box">
            <input type="text" id="player1_name" value="Player 1" name="player1_name" required />
            <label>Player 1 Name</label>
          </div>
          <div class="user-box">
            <input type="text" id="player2_name" value="Player 2" name="player2_name" required />
            <label>Player 2 Name</label>
          </div>
          <a href="script.js" id="playButton">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            Play
          </a>
        </form>
      </div>

      <!-- End - Form -->
    </div>

    <script src="script.js"></script>
  </body>
</html>