HTML Template
120 lines
6.3 KB
Landing Page Template
Live Preview
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Page Template</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #0a0a0f; color: #e4e4e7; }
nav {
display: flex; justify-content: space-between; align-items: center;
padding: 1rem 2rem; background: #0a0a0fee; backdrop-filter: blur(10px);
position: sticky; top: 0; z-index: 100; border-bottom: 1px solid #18181b;
}
.logo { font-size: 1.25rem; font-weight: 800; color: #6366f1; }
.nav-links { display: flex; gap: 1.5rem; list-style: none; }
.nav-links a { color: #a1a1aa; text-decoration: none; font-size: 0.9rem; transition: color 0.3s; }
.nav-links a:hover { color: #fff; }
.nav-cta {
padding: 0.5rem 1.25rem; background: #6366f1; color: #fff;
border-radius: 8px; text-decoration: none; font-size: 0.85rem; font-weight: 600;
}
.hero { text-align: center; padding: 5rem 2rem; max-width: 800px; margin: 0 auto; }
.hero .badge {
display: inline-block; padding: 0.35rem 1rem; background: #6366f122;
border: 1px solid #6366f133; border-radius: 999px; color: #818cf8;
font-size: 0.8rem; font-weight: 600; margin-bottom: 1.5rem;
}
.hero h1 { font-size: 3rem; font-weight: 800; line-height: 1.2; margin-bottom: 1rem; }
.hero h1 .grad { background: linear-gradient(90deg, #6366f1, #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero p { font-size: 1.15rem; color: #71717a; margin-bottom: 2rem; line-height: 1.6; }
.hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn-primary {
padding: 0.875rem 2rem; background: #6366f1; color: #fff;
border-radius: 10px; text-decoration: none; font-weight: 600; transition: all 0.3s;
}
.btn-primary:hover { background: #4f46e5; transform: translateY(-2px); }
.btn-ghost {
padding: 0.875rem 2rem; background: #18181b; border: 1px solid #27272a;
color: #e4e4e7; border-radius: 10px; text-decoration: none; font-weight: 600; transition: all 0.3s;
}
.btn-ghost:hover { border-color: #3f3f46; }
.features { max-width: 1000px; margin: 0 auto; padding: 4rem 2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.feature {
background: #18181b; border: 1px solid #27272a; border-radius: 16px; padding: 2rem; text-align: center;
transition: transform 0.3s, border-color 0.3s;
}
.feature:hover { transform: translateY(-5px); border-color: #3f3f46; }
.feature .icon {
width: 48px; height: 48px; margin: 0 auto 1rem; border-radius: 12px;
background: #6366f122; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.feature h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.feature p { color: #71717a; font-size: 0.9rem; line-height: 1.5; }
.stats { max-width: 800px; margin: 0 auto; padding: 3rem 2rem; display: flex; justify-content: space-around; text-align: center; flex-wrap: wrap; gap: 2rem; }
.stat .num { font-size: 2.5rem; font-weight: 800; color: #6366f1; }
.stat .label { color: #71717a; font-size: 0.85rem; }
.cta-band { text-align: center; padding: 4rem 2rem; background: linear-gradient(135deg, #6366f111, #a855f711); border-top: 1px solid #27272a; border-bottom: 1px solid #27272a; }
.cta-band h2 { font-size: 2rem; margin-bottom: 0.5rem; }
.cta-band p { color: #71717a; margin-bottom: 1.5rem; }
footer { text-align: center; padding: 2rem; color: #52525b; font-size: 0.85rem; }
@media (max-width: 768px) {
.nav-links { display: none; }
.hero h1 { font-size: 2rem; }
.features { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<nav>
<div class="logo">CDNSnippet</div>
<ul class="nav-links">
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Docs</a></li>
<li><a href="#">Blog</a></li>
</ul>
<a href="#" class="nav-cta">Get Started</a>
</nav>
<section class="hero">
<span class="badge">⚡ New: API v2 is live</span>
<h1>Build Faster with <span class="grad">Production-Ready</span> Code Snippets</h1>
<p>Copy, paste, and ship. Over 100+ tested snippets for forms, validation, tracking, APIs, and more. No fluff, just code that works.</p>
<div class="hero-btns">
<a href="#" class="btn-primary">Start Free →</a>
<a href="#" class="btn-ghost">Browse Snippets</a>
</div>
</section>
<section class="features">
<div class="feature">
<div class="icon">📥</div>
<h3>Copy & Download</h3>
<p>One-click copy or download snippets directly. No signup required for free snippets.</p>
</div>
<div class="feature">
<div class="icon">🔍</div>
<h3>Smart Search</h3>
<p>Find snippets by language, category, or keyword. Filter by difficulty level.</p>
</div>
<div class="feature">
<div class="icon">🛡</div>
<h3>Production Safe</h3>
<p>Every snippet includes error handling, security notes, and common pitfalls explained.</p>
</div>
</section>
<section class="stats">
<div class="stat"><div class="num">100+</div><div class="label">Snippets</div></div>
<div class="stat"><div class="num">14</div><div class="label">Categories</div></div>
<div class="stat"><div class="num">5K+</div><div class="label">Developers</div></div>
<div class="stat"><div class="num">99.9%</div><div class="label">Uptime</div></div>
</section>
<section class="cta-band">
<h2>Ready to Code Smarter?</h2>
<p>Join thousands of developers who ship faster with CDNSnippet</p>
<a href="#" class="btn-primary">Sign Up Free</a>
</section>
<footer>© 2025 CDNSnippet. All rights reserved.</footer>
</body>
</html>