Landing page (static)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Launchpad — Ship your product faster</title>
    <meta name="description" content="A conversion-focused landing page with no build step." />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header class="nav">
      <a class="brand" href="#top">Launchpad</a>
      <button class="nav-toggle" type="button" aria-expanded="false" aria-controls="nav-links">Menu</button>
      <nav id="nav-links" class="nav-links" aria-label="Primary">
        <a href="#features">Features</a>
        <a href="#pricing">Pricing</a>
        <a href="#faq">FAQ</a>
        <a class="button" href="#signup">Get started</a>
      </nav>
    </header>

    <main id="top">
      <section class="hero">
        <h1>Ship your product faster</h1>
        <p>Replace this with a one-sentence value proposition. Keep it specific and measurable.</p>
        <div class="actions">
          <a class="button" href="#signup">Start free</a>
          <a class="button secondary" href="#features">See how it works</a>
        </div>
      </section>

      <section id="features" class="features" aria-labelledby="features-title">
        <h2 id="features-title">Everything you need</h2>
        <div class="grid">
          <article><h3>Fast setup</h3><p>Describe the first benefit in one or two sentences.</p></article>
          <article><h3>Secure by default</h3><p>Describe the second benefit in one or two sentences.</p></article>
          <article><h3>Scales with you</h3><p>Describe the third benefit in one or two sentences.</p></article>
        </div>
      </section>

      <section id="pricing" class="pricing" aria-labelledby="pricing-title">
        <h2 id="pricing-title">Pricing</h2>
        <div class="grid">
          <article><h3>Free</h3><p class="price">$0</p><ul><li>1 project</li><li>Community support</li></ul><a class="button secondary" href="#signup">Choose Free</a></article>
          <article class="highlight"><h3>Pro</h3><p class="price">$12<span>/mo</span></p><ul><li>Unlimited projects</li><li>Email support</li></ul><a class="button" href="#signup">Choose Pro</a></article>
          <article><h3>Team</h3><p class="price">$39<span>/mo</span></p><ul><li>Everything in Pro</li><li>5 seats</li></ul><a class="button secondary" href="#signup">Choose Team</a></article>
        </div>
      </section>

      <section id="faq" class="faq" aria-labelledby="faq-title">
        <h2 id="faq-title">Questions</h2>
        <details><summary>Is there a free plan?</summary><p>Yes. Edit this answer to describe your free tier.</p></details>
        <details><summary>Can I cancel any time?</summary><p>Describe your cancellation policy here.</p></details>
        <details><summary>Do you offer support?</summary><p>Describe your support channels and hours here.</p></details>
      </section>

      <section id="signup" class="signup" aria-labelledby="signup-title">
        <h2 id="signup-title">Get early access</h2>
        <form id="signup-form" novalidate>
          <label for="email">Email address</label>
          <div class="row">
            <input id="email" name="email" type="email" placeholder="you@example.com" required />
            <button class="button" type="submit">Notify me</button>
          </div>
          <p id="form-status" class="status" role="status"></p>
          <p class="hint">This form does not send data anywhere yet. Point it at your API in <code>app.js</code>.</p>
        </form>
      </section>
    </main>

    <footer class="footer">
      <p>© <span id="year"></span> Launchpad. Replace with your company name.</p>
    </footer>
    <script src="app.js"></script>
  </body>
</html>