A product landing page with a sticky nav, features grid, pricing cards, and a CTA section.
nav → hero → features → pricing → CTA → footer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LaunchPad — Product Landing Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<?php require_once __DIR__ . '/../promo_banner.php'; ?>
<!-- Sticky nav -->
<nav class="nav">
<span class="brand">LaunchPad</span>
<a href="#features">Features</a>
<a href="#pricing">Pricing</a>
<a href="#cta" class="btn-nav">Get Started</a>
</nav>
<!-- Hero -->
<section class="hero">
<h1>Launch your idea<br>faster than ever</h1>
<p>The all-in-one toolkit for indie makers and startup teams.</p>
<a href="#cta" class="btn-hero">Start for free</a>
</section>
<!-- Features -->
<section id="features" class="features">
<h2>Everything you need</h2>
<div class="grid">
<div class="feat"><span>⚡</span><h3>Fast setup</h3><p>Go from idea to live in under an hour.</p></div>
<div class="feat"><span>🔒</span><h3>Secure by default</h3><p>Auth, HTTPS, and rate-limiting built in.</p></div>
<div class="feat"><span>📊</span><h3>Analytics</h3><p>Real-time dashboard — no third parties.</p></div>
</div>
</section>
<!-- Pricing -->
<section id="pricing" class="pricing">
<h2>Simple pricing</h2>
<div class="plans">
<div class="plan"><h3>Free</h3><p class="price">£0 / mo</p><ul><li>1 project</li><li>100 users</li></ul><a href="#" class="btn-plan">Start free</a></div>
<div class="plan featured"><h3>Pro</h3><p class="price">£12 / mo</p><ul><li>Unlimited projects</li><li>10k users</li></ul><a href="#" class="btn-plan">Go Pro</a></div>
</div>
</section>
<!-- CTA -->
<section id="cta" class="cta">
<h2>Ready to build?</h2>
<p>Join 5,000+ makers already using LaunchPad.</p>
<a href="#" class="btn-hero">Create free account</a>
</section>
</body>
</html>Use CSS custom properties, flexbox, and grid for a polished result.
* { margin: 0; padding: 0; box-sizing: border-box; }
:root { --navy: #0f172a; --accent: #6366f1; --text: #334155; --muted: #64748b; }
body { font-family: 'Segoe UI', sans-serif; color: var(--text); }
.nav { position: sticky; top: 0; display: flex; align-items: center; gap: 28px; padding: 16px 60px; background: #fff; border-bottom: 1px solid #e2e8f0; z-index: 100; }
.brand { font-weight: 800; font-size: 1.2rem; color: var(--navy); margin-right: auto; }
.nav a { color: var(--text); text-decoration: none; font-weight: 500; }
.btn-nav { background: var(--accent); color: #fff; padding: 8px 20px; border-radius: 6px; }
.hero { text-align: center; padding: 100px 20px; background: linear-gradient(135deg, #1e1b4b, #312e81); color: #fff; }
.hero h1 { font-size: 3.5rem; line-height: 1.2; margin-bottom: 20px; }
.hero p { font-size: 1.2rem; color: #c7d2fe; margin-bottom: 40px; }
.btn-hero { display: inline-block; padding: 14px 36px; background: var(--accent); color: #fff; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 1rem; }
.features { padding: 80px 40px; text-align: center; }
.features h2 { font-size: 2rem; margin-bottom: 48px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; max-width: 900px; margin: 0 auto; }
.feat { padding: 32px; border: 1px solid #e2e8f0; border-radius: 12px; }
.feat span { font-size: 2rem; }
.feat h3 { margin: 16px 0 8px; }
.pricing { background: #f8fafc; padding: 80px 40px; text-align: center; }
.pricing h2 { font-size: 2rem; margin-bottom: 48px; }
.plans { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.plan { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 40px 32px; min-width: 220px; }
.plan.featured { border-color: var(--accent); box-shadow: 0 4px 24px rgba(99,102,241,0.2); }
.price { font-size: 2rem; font-weight: 700; color: var(--accent); margin: 12px 0 20px; }
.plan ul { list-style: none; text-align: left; margin-bottom: 32px; }
.plan ul li::before { content: "✓ "; color: var(--accent); }
.btn-plan { display: inline-block; padding: 10px 28px; background: var(--accent); color: #fff; border-radius: 6px; text-decoration: none; }
.cta { padding: 100px 20px; text-align: center; background: var(--navy); color: #fff; }
.cta h2 { font-size: 2.5rem; margin-bottom: 16px; }
.cta p { color: #94a3b8; margin-bottom: 36px; }
@media (max-width: 640px) { .hero h1 { font-size: 2.2rem; } .nav { padding: 14px 20px; gap: 16px; } }You have a professional landing page ready to deploy. Swap in your own product copy and push it live on GitHub Pages or Netlify.
Spotted a bug, broken code, or something that doesn't look right? Tell us what's off and we'll fix it.