<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Web Project</title>
  <link rel="stylesheet" href="css/styles.css">
  <script src="js/main.js" defer></script>
</head>
<body>
  <header>
    <nav>
      <div class="logo">Test Project</div>
      <ul class="menu">
        <li><a href="#home">Home</a></li>
        <li><a href="#features">Features</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <section id="home" class="hero">
      <h1>Welcome to the Test Project</h1>
      <p>This is a template project for testing Anthropic's markdown generation.</p>
      <button id="cta-btn">Learn More</button>
    </section>

    <section id="features" class="features">
      <h2>Features</h2>
      <div class="feature-grid">
        <div class="feature">
          <h3>Responsive Design</h3>
          <p>Fully responsive layout that works on all devices.</p>
        </div>
        <div class="feature">
          <h3>Modern JavaScript</h3>
          <p>Using ES6+ features for better code organization.</p>
        </div>
        <div class="feature">
          <h3>CSS Grid & Flexbox</h3>
          <p>Modern layout techniques for clean designs.</p>
        </div>
      </div>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 Test Project for Anthropic Verification</p>
  </footer>
</body>
</html>
