<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Modern Single-Page Website</title>

  <!-- ALL CSS EMBEDDED HERE -->

  <style>

    /* Reset & Base Styles */

    * {

      box-sizing: border-box;

      margin: 0;

      padding: 0;

    }

    body {

      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

      line-height: 1.6;

      color: #1f2937;

      background-color: #f9fafb;

    }

    /* Layout & Utilities */

    .container {

      max-width: 1100px;

      margin: 0 auto;

      padding: 0 1.5rem;

    }

    /* Header & Navigation */

    header {

      background-color: #ffffff;

      border-bottom: 1px solid #e5e7eb;

      position: sticky;

      top: 0;

      z-index: 100;

    }

    nav {

      display: flex;

      justify-content: space-between;

      align-items: center;

      height: 70px;

    }

    .logo {

      font-size: 1.25rem;

      font-weight: 700;

      color: #2563eb;

      text-decoration: none;

    }

    .nav-links {

      display: flex;

      list-style: none;

      gap: 1.5rem;

    }

    .nav-links a {

      text-decoration: none;

      color: #4b5563;

      font-weight: 500;

      transition: color 0.2s ease;

    }

    .nav-links a:hover {

      color: #2563eb;

    }

    /* Hero Section */

    .hero {

      padding: 5rem 0;

      text-align: center;

      background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);

    }

    .hero h1 {

      font-size: 2.75rem;

      font-weight: 800;

      margin-bottom: 1rem;

      color: #111827;

    }

    .hero p {

      font-size: 1.25rem;

      color: #6b7280;

      max-width: 600px;

      margin: 0 auto 2rem;

    }

    .btn {

      display: inline-block;

      background-color: #2563eb;

      color: #ffffff;

      padding: 0.75rem 1.5rem;

      border-radius: 6px;

      text-decoration: none;

      font-weight: 600;

      border: none;

      cursor: pointer;

      transition: background-color 0.2s ease;

    }

    .btn:hover {

      background-color: #1d4ed8;

    }

    /* Features Section */

    .features {

      padding: 4rem 0;

    }

    .section-title {

      text-align: center;

      font-size: 2rem;

      margin-bottom: 3rem;

    }

    .grid {

      display: grid;

      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

      gap: 2rem;

    }

    .card {

      background-color: #ffffff;

      padding: 2rem;

      border-radius: 8px;

      border: 1px solid #e5e7eb;

      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

    }

    .card h3 {

      margin-bottom: 0.5rem;

      color: #111827;

    }

    .card p {

      color: #6b7280;

    }

    /* Interactive Counter Section */

    .interactive {

      background-color: #ffffff;

      padding: 4rem 0;

      border-top: 1px solid #e5e7eb;

      border-bottom: 1px solid #e5e7eb;

      text-align: center;

    }

    .counter-display {

      font-size: 3rem;

      font-weight: 800;

      color: #2563eb;

      margin: 1rem 0;

    }

    /* Footer */

    footer {

      padding: 2rem 0;

      text-align: center;

      color: #9ca3af;

      font-size: 0.875rem;

    }

    /* Mobile Responsive */

    @media (max-width: 640px) {

      .hero h1 {

        font-size: 2rem;

      }

      .nav-links {

        gap: 0.75rem;

      }

    }

  </style>

</head>

<body>

  <!-- NAVIGATION -->

  <header>

    <div class="container">

      <nav>

        <a href="#" class="logo">MyBrand</a>

        <ul class="nav-links">

          <li><a href="#features">Features</a></li>

          <li><a href="#interactive">Interactive</a></li>

        </ul>

      </nav>

    </div>

  </header>

  <!-- HERO SECTION -->

  <section class="hero">

    <div class="container">

      <h1>Built with Single-Page HTML</h1>

      <p>All HTML, CSS, and JavaScript are combined in one self-contained file ready to deploy instantly.</p>

      <button class="btn" id="ctaButton">Click Me</button>

    </div>

  </section>

  <!-- FEATURES SECTION -->

  <section id="features" class="features">

    <div class="container">

      <h2 class="section-title">Core Features</h2>

      <div class="grid">

        <div class="card">

          <h3>Self-Contained</h3>

          <p>Zero external CSS or JS dependencies. Everything loads fast in a single network request.</p>

        </div>

        <div class="card">

          <h3>Fully Responsive</h3>

          <p>Adapts fluidly across mobile phones, tablets, and desktop displays with modern CSS Grid.</p>

        </div>

        <div class="card">

          <h3>Host Ready</h3>

          <p>Ready to drop into Netlify, Cloudflare Pages, or GitHub Pages with custom domain support.</p>

        </div>

      </div>

    </div>

  </section>

  <!-- INTERACTIVE JS DEMO SECTION -->

  <section id="interactive" class="interactive">

    <div class="container">

      <h2>Interactive Counter</h2>

      <p>Powered by embedded JavaScript below</p>

      <div class="counter-display" id="counter">0</div>

      <button class="btn" id="incrementBtn">Add 1</button>

      <button class="btn" id="resetBtn" style="background-color: #6b7280;">Reset</button>

    </div>

  </section>

  <!-- FOOTER -->

  <footer>

    <div class="container">

      <p>&copy; 2026 MyBrand. All rights reserved.</p>

    </div>

  </footer>

  <!-- ALL JAVASCRIPT EMBEDDED HERE -->

  <script>

    document.addEventListener('DOMContentLoaded', () => {

      // Counter Logic

      let count = 0;

      const counterEl = document.getElementById('counter');

      const incrementBtn = document.getElementById('incrementBtn');

      const resetBtn = document.getElementById('resetBtn');

      const ctaButton = document.getElementById('ctaButton');

      incrementBtn.addEventListener('click', () => {

        count++;

        counterEl.textContent = count;

      });

      resetBtn.addEventListener('click', () => {

        count = 0;

        counterEl.textContent = count;

      });

      // Call to Action Alert

      ctaButton.addEventListener('click', () => {

        alert('Your combined HTML file is fully functional!');

      });

    });

  </script>

</body>

</html>