Tasky — Product Launch Template (Example)

The whole page as one file

Everything above — the sticky topbar, mobile drawer menu, hero, feature row, CTA, and footer — combined into one complete HTML file. Save it as index.html, open it in a browser, and it just works. Here's the live result, then the full code.
Live preview
Complete HTML — copy this whole file
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tasky — Get more done, calmly</title>
  <style>
    *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Helvetica Neue', Arial, sans-serif; background: #fff; color: #0f172a; line-height: 1.6; }
    img { max-width: 100%; display: block; }

    /* ===== Sticky topbar ===== */
    .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; position: sticky; top: 0; background: rgba(255,255,255,.95); backdrop-filter: blur(8px); z-index: 40; box-shadow: 0 1px 0 #e5e7eb; }
    .logo { font-weight: 800; font-size: 1.2rem; }
    .nav-links { display: flex; gap: 22px; align-items: center; }
    .nav-links a { color: #475569; text-decoration: none; font-size: .9rem; }
    .nav-links a:hover { color: #111; }
    .nav-links .pill { background: #111; color: #fff; padding: 8px 18px; border-radius: 999px; font-weight: 700; }
    .nav-links .pill:hover { color: #fff; background: #6366f1; }
    .burger { display: none; background: none; border: none; color: #111; font-size: 1.7rem; cursor: pointer; }

    /* ===== Mobile drawer ===== */
    .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 50; }
    .scrim.open { opacity: 1; pointer-events: auto; }
    .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(280px,80vw); background: #0f172a; color: #fff; transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1); z-index: 60; padding: 20px; box-shadow: -10px 0 30px rgba(0,0,0,.4); }
    .drawer.open { transform: translateX(0); }
    .drawer .dhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
    .drawer .close { background: none; border: none; color: #fff; font-size: 1.6rem; cursor: pointer; }
    .drawer a { display: block; color: #cbd5e1; text-decoration: none; padding: 13px 8px; border-radius: 8px; }
    .drawer a.active, .drawer a:hover { background: rgba(99,102,241,.25); color: #fff; }

    /* ===== Hero ===== */
    .hero { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; max-width: 1000px; margin: 0 auto; padding: 64px 24px; }
    .hero h1 { font-size: clamp(1.9rem, 5vw, 3.1rem); font-weight: 800; line-height: 1.1; }
    .hero p { color: #64748b; margin: 14px 0 22px; font-size: 1.05rem; }
    .btn { display: inline-block; background: #6366f1; color: #fff; padding: 14px 32px; border-radius: 999px; font-weight: 700; text-decoration: none; }
    .btn:hover { background: #4f46e5; }
    .hero img { width: 100%; height: 280px; object-fit: cover; border-radius: 16px; box-shadow: 0 18px 40px rgba(15,23,42,.18); }

    /* ===== Features ===== */
    .features { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; background: #f8fafc; padding: 40px 24px; }
    .feature { text-align: center; max-width: 200px; }
    .feature .ico { font-size: 2rem; }
    .feature h3 { font-size: 1rem; margin-top: 6px; }
    .feature p { color: #64748b; font-size: .86rem; }

    /* ===== CTA ===== */
    .cta { text-align: center; padding: 56px 24px; }
    .cta h2 { font-size: 1.8rem; font-weight: 800; }
    .cta p { color: #64748b; margin: 8px 0 20px; }

    /* ===== Footer ===== */
    .footer { background: #0f172a; color: #94a3b8; padding: 44px 24px 0; font-size: .88rem; }
    .foot-inner { max-width: 900px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; }
    .foot-col { min-width: 150px; }
    .foot-col h4 { font-size: .95rem; color: #fff; margin-bottom: 8px; }
    .foot-col a { display: block; color: #94a3b8; text-decoration: none; padding: 3px 0; }
    .foot-col a:hover { color: #fff; }
    .foot-brand { max-width: 280px; }
    .foot-bottom { text-align: center; padding: 18px; margin-top: 30px; border-top: 1px solid rgba(148,163,184,.2); font-size: .8rem; }

    @media (max-width: 760px) {
      .nav-links { display: none; }
      .burger { display: block; }
      .hero { grid-template-columns: 1fr; text-align: center; }
      .hero .btn { margin: 0 auto; }
    }
  </style>
</head>
<body>

  <header class="topbar">
    <span class="logo">Tasky</span>
    <nav class="nav-links">
      <a href="#features">Features</a>
      <a href="#">Pricing</a>
      <a href="#">FAQ</a>
      <a href="#" class="pill">Get the app</a>
    </nav>
    <button class="burger" id="burger" aria-label="Open menu">&#9776;</button>
  </header>

  <div class="scrim" id="scrim"></div>
  <nav class="drawer" id="drawer" aria-label="Mobile navigation">
    <div class="dhead"><strong>Tasky</strong><button class="close" id="drawerClose" aria-label="Close">&times;</button></div>
    <a href="#" class="active">Home</a>
    <a href="#features">Features</a>
    <a href="#">Pricing</a>
    <a href="#">Download</a>
    <a href="#">FAQ</a>
  </nav>

  <section class="hero">
    <div>
      <h1>Get more done, calmly.</h1>
      <p>The to-do app that doesn't stress you out. Plan your day, sync everywhere, and stay focused.</p>
      <a href="#" class="btn">Download free</a>
    </div>
    <img src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?w=700&q=70" alt="Tasky app on a laptop">
  </section>

  <section class="features" id="features">
    <div class="feature"><div class="ico">&#128259;</div><h3>Sync everywhere</h3><p>Your tasks follow you across every device.</p></div>
    <div class="feature"><div class="ico">&#9729;</div><h3>Offline mode</h3><p>Keep working with no connection — it syncs later.</p></div>
    <div class="feature"><div class="ico">&#127873;</div><h3>Free forever</h3><p>Core features cost nothing, no credit card.</p></div>
  </section>

  <section class="cta">
    <h2>Ready to clear your head?</h2>
    <p>Join thousands who plan their day with Tasky.</p>
    <a href="#" class="btn">Get the app</a>
  </section>

  <footer class="footer">
    <div class="foot-inner">
      <div class="foot-col foot-brand">
        <h4>Tasky</h4>
        <p>The to-do app that doesn't stress you out. Plan calmly, get more done.</p>
      </div>
      <div class="foot-col">
        <h4>Product</h4>
        <a href="#" class="active">Home</a>
        <a href="#features">Features</a>
        <a href="#">Pricing</a>
        <a href="#">Download</a>
        <a href="#">FAQ</a>
      </div>
      <div class="foot-col">
        <h4>Company</h4>
        <p>hello@tasky.app<br>@taskyapp<br>Free forever</p>
      </div>
    </div>
    <div class="foot-bottom">© 2026 Tasky · Product launch landing page</div>
  </footer>

  <script>
    (function () {
      var b = document.getElementById('burger');
      var d = document.getElementById('drawer');
      var s = document.getElementById('scrim');
      var c = document.getElementById('drawerClose');
      function open()  { d.classList.add('open');  s.classList.add('open');  }
      function close() { d.classList.remove('open'); s.classList.remove('open'); }
      b.onclick = open;
      c.onclick = close;
      s.onclick = close;
      document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') close();
      });
    })();
  </script>
</body>
</html>