<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Game Collection</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <h1>Game Collection</h1>
    </header>

    <main>
      <div class="grid-container">
        <a href="" target="_blank" class="item">
          <img
            src="../secret/../secret/images/snake.png"
            alt="Image can't be displayed"
          />
          <h2>Snake</h2>
          <div class="description">
            <p>
              Guide the snake to eat food and grow longer while avoiding
              collisions with the walls and itself.
            </p>
          </div>
        </a>
        <a href="" target="_blank" class="item">
          <img
            src="../secret/images/solitaire.png"
            alt="Image can't be displayed"
          />
          <h2>Solitaire</h2>
          <div class="description">
            <p>
              A classic card game where the objective is to move all cards to
              foundation piles in ascending order.
            </p>
          </div>
        </a>
        <a href="../secret/mineSweeper/index.html" target="_blank" class="item">
          <img
            src="../secret/images/minesweeper.png"
            alt="Image can't be displayed"
          />
          <h2>Minesweeper</h2>
          <div class="description">
            <p>
              Uncover squares on a grid while avoiding hidden mines, using
              numbers to deduce safe spots.
            </p>
          </div>
        </a>
        <a
          href="../secret/guessMyNumber/index.html"
          target="_blank"
          class="item"
        >
          <img
            src="../secret/images/number.jpeg"
            alt="Image can't be displayed"
          />
          <h2>Guess My Number</h2>
          <div class="description">
            <p>
              A simple game where you try to guess a randomly chosen number
              within a certain range.
            </p>
          </div>
        </a>
        <a href="" target="_blank" class="item">
          <img
            src="../secret/images/endless_runner.png"
            alt="Image can't be displayed"
          />
          <h2>Endless Runner</h2>
          <div class="description">
            <p>
              Run through an endless landscape, avoiding obstacles and
              collecting items to score points.
            </p>
          </div>
        </a>
      </div>
    </main>

    <footer>
      <p>&copy; 2025 Game Collection</p>
    </footer>
  </body>
</html>