HTML Template
170 lines
7.6 KB
Pricing Table 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>Pricing Table Template</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', system-ui, sans-serif;
background: #0a0a0f;
color: #e4e4e7;
padding: 3rem 1rem;
}
.container { max-width: 1000px; margin: 0 auto; }
.header { text-align: center; margin-bottom: 3rem; }
.header h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 0.5rem; }
.header p { color: #71717a; font-size: 1.1rem; }
.toggle { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.5rem 0; }
.toggle span { color: #71717a; font-size: 0.9rem; }
.toggle .active { color: #fff; font-weight: 600; }
.toggle-switch {
width: 48px; height: 26px;
background: #27272a;
border-radius: 999px;
cursor: pointer;
position: relative;
transition: background 0.3s;
}
.toggle-switch.on { background: #6366f1; }
.toggle-switch::after {
content: '';
position: absolute;
top: 3px; left: 3px;
width: 20px; height: 20px;
background: #fff;
border-radius: 50%;
transition: transform 0.3s;
}
.toggle-switch.on::after { transform: translateX(22px); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.card {
background: #18181b;
border: 1px solid #27272a;
border-radius: 20px;
padding: 2rem;
position: relative;
transition: transform 0.3s, border-color 0.3s;
}
.card:hover { transform: translateY(-5px); border-color: #3f3f46; }
.card.featured { border-color: #6366f1; }
.badge {
position: absolute;
top: -12px; left: 50%;
transform: translateX(-50%);
background: #6366f1;
color: #fff;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
padding: 4px 14px;
border-radius: 999px;
}
.plan-name { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; }
.price { font-size: 3rem; font-weight: 800; margin-bottom: 0.25rem; }
.price .currency { font-size: 1.2rem; vertical-align: top; }
.price .period { font-size: 0.9rem; color: #71717a; font-weight: 400; }
.desc { color: #71717a; font-size: 0.85rem; margin-bottom: 1.5rem; }
.features { list-style: none; margin-bottom: 2rem; }
.features li {
padding: 0.6rem 0;
font-size: 0.9rem;
color: #a1a1aa;
border-bottom: 1px solid #27272a;
display: flex; align-items: center; gap: 0.5rem;
}
.features li:last-child { border-bottom: none; }
.check { color: #22c55e; font-weight: bold; }
.x { color: #ef4444; }
.btn {
display: block;
width: 100%;
padding: 0.75rem;
text-align: center;
border-radius: 10px;
font-weight: 600;
text-decoration: none;
font-size: 0.9rem;
transition: all 0.3s;
}
.btn-primary { background: #6366f1; color: #fff; }
.btn-primary:hover { background: #4f46e5; }
.btn-secondary { background: #27272a; color: #e4e4e7; border: 1px solid #3f3f46; }
.btn-secondary:hover { background: #3f3f46; }
@media (max-width: 768px) {
.grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Simple, Transparent Pricing</h1>
<p>Choose the plan that fits your needs</p>
</div>
<div class="toggle">
<span class="active" id="monthly-label">Monthly</span>
<div class="toggle-switch" id="toggle" onclick="toggleBilling()"></div>
<span id="yearly-label">Yearly <small style="color:#22c55e">(-20%)</small></span>
</div>
<div class="grid">
<div class="card">
<div class="plan-name">Starter</div>
<div class="price"><span class="currency">$</span><span id="starter-price">9</span><span class="period">/mo</span></div>
<p class="desc">Perfect for personal projects</p>
<ul class="features">
<li><span class="check">✓</span> 10 snippets</li>
<li><span class="check">✓</span> Basic support</li>
<li><span class="check">✓</span> Community access</li>
<li><span class="x">✗</span> API access</li>
<li><span class="x">✗</span> Priority support</li>
</ul>
<a href="#" class="btn btn-secondary">Get Started</a>
</div>
<div class="card featured">
<div class="badge">Most Popular</div>
<div class="plan-name">Pro</div>
<div class="price"><span class="currency">$</span><span id="pro-price">29</span><span class="period">/mo</span></div>
<p class="desc">For growing teams and businesses</p>
<ul class="features">
<li><span class="check">✓</span> Unlimited snippets</li>
<li><span class="check">✓</span> Priority support</li>
<li><span class="check">✓</span> API access</li>
<li><span class="check">✓</span> Custom domains</li>
<li><span class="x">✗</span> White-label</li>
</ul>
<a href="#" class="btn btn-primary">Start Free Trial</a>
</div>
<div class="card">
<div class="plan-name">Enterprise</div>
<div class="price"><span class="currency">$</span><span id="ent-price">99</span><span class="period">/mo</span></div>
<p class="desc">For large organizations</p>
<ul class="features">
<li><span class="check">✓</span> Everything in Pro</li>
<li><span class="check">✓</span> White-label</li>
<li><span class="check">✓</span> Dedicated manager</li>
<li><span class="check">✓</span> SLA guarantee</li>
<li><span class="check">✓</span> Custom integrations</li>
</ul>
<a href="#" class="btn btn-secondary">Contact Sales</a>
</div>
</div>
</div>
<script>
let yearly = false;
const prices = { starter: [9, 7], pro: [29, 23], ent: [99, 79] };
function toggleBilling() {
yearly = !yearly;
const t = document.getElementById('toggle');
t.classList.toggle('on', yearly);
document.getElementById('monthly-label').classList.toggle('active', !yearly);
document.getElementById('yearly-label').classList.toggle('active', yearly);
document.getElementById('starter-price').textContent = yearly ? prices.starter[1] : prices.starter[0];
document.getElementById('pro-price').textContent = yearly ? prices.pro[1] : prices.pro[0];
document.getElementById('ent-price').textContent = yearly ? prices.ent[1] : prices.ent[0];
}
</script>
</body>
</html>