Files
cbd420/HTML Code with referral style.html
2025-12-21 12:46:27 +01:00

356 lines
8.9 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>420Deals.ch Premium Swiss CBD Drops</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
:root {
--bg: #0e0e0e;
--bg-soft: #151515;
--card: #1c1c1c;
--text: #eaeaea;
--muted: #9a9a9a;
--accent: #3ddc84;
--border: #2a2a2a;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: 'Inter', sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
nav {
position: sticky;
top: 0;
z-index: 10;
background: rgba(14,14,14,0.9);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
padding: 20px 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
nav .brand { font-weight: 600; font-size: 18px; letter-spacing: 0.5px; }
nav .links a { margin-left: 28px; font-size: 14px; color: var(--muted); }
nav .links a:hover { color: var(--text); }
.unlock-bar {
background: var(--bg-soft);
border-bottom: 1px solid var(--border);
padding: 12px 20px;
font-size: 14px;
color: var(--muted);
text-align: center;
}
.unlock-bar strong { color: var(--text); }
.unlock-bar a {
margin-left: 10px;
color: var(--accent);
font-weight: 500;
}
.container { max-width: 1200px; margin: 0 auto; padding: 80px 20px; }
header { padding-top: 120px; padding-bottom: 80px; }
header h1 {
font-size: 44px;
font-weight: 600;
max-width: 760px;
letter-spacing: -0.5px;
}
header p {
margin-top: 20px;
font-size: 18px;
color: var(--muted);
max-width: 620px;
}
.drop {
background: var(--card);
border-radius: 20px;
padding: 40px;
display: grid;
grid-template-columns: 420px 1fr;
gap: 50px;
border: 1px solid var(--border);
}
.drop img {
width: 100%;
border-radius: 16px;
object-fit: cover;
}
.drop h2 { font-size: 28px; margin: 0 0 10px; }
.drop .meta { color: var(--muted); margin-bottom: 20px; }
.price {
font-size: 22px;
font-weight: 500;
margin-bottom: 20px;
}
.price .muted {
display: block;
margin-top: 6px;
font-size: 14px;
color: var(--muted);
}
.price .hint {
font-size: 13px;
color: var(--muted);
margin-top: 4px;
}
.price a {
color: var(--accent);
font-weight: 500;
}
.progress {
background: var(--bg-soft);
border-radius: 10px;
height: 10px;
overflow: hidden;
margin-bottom: 12px;
}
.progress span {
display: block;
height: 100%;
width: 62%;
background: linear-gradient(90deg, var(--accent), #1fa463);
}
.options button {
background: transparent;
border: 1px solid var(--border);
color: var(--text);
padding: 14px 20px;
margin-right: 12px;
border-radius: 12px;
cursor: pointer;
font-size: 14px;
}
.options button.active,
.options button:hover {
border-color: var(--accent);
color: var(--accent);
}
.cta {
margin-top: 30px;
padding: 16px 28px;
background: var(--accent);
color: #000;
border: none;
border-radius: 14px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
}
.cta-note {
margin-top: 8px;
font-size: 13px;
color: var(--muted);
}
.info-box {
margin-top: 60px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 30px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
gap: 30px;
}
.info-box div h3 { margin-bottom: 8px; font-size: 18px; }
.info-box div p { color: var(--muted); font-size: 14px; }
.signup {
background: var(--card);
border-radius: 20px;
padding: 50px;
text-align: center;
border: 1px solid var(--border);
}
.signup input {
width: 260px;
padding: 14px;
margin: 10px;
border-radius: 12px;
border: 1px solid var(--border);
background: var(--bg-soft);
color: var(--text);
}
.signup small {
display: block;
margin-top: 10px;
font-size: 13px;
color: var(--muted);
}
.signup button {
margin-top: 20px;
padding: 14px 28px;
background: var(--accent);
color: #000;
border: none;
border-radius: 14px;
cursor: pointer;
}
.past {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
gap: 30px;
}
.past .card {
background: var(--card);
border-radius: 16px;
padding: 20px;
border: 1px solid var(--border);
}
.past img { width: 100%; border-radius: 12px; margin-bottom: 12px; }
footer {
padding: 60px 20px;
text-align: center;
color: var(--muted);
font-size: 13px;
border-top: 1px solid var(--border);
}
@media(max-width:900px) {
.drop { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<nav>
<div class="brand">420Deals.ch</div>
<div class="links">
<a href="#drop">Drop</a>
<a href="#past">Past Drops</a>
<a href="#community">Community</a>
</div>
</nav>
<div class="unlock-bar">
🔒 Wholesale prices locked — <strong>1 / 3 referrals completed</strong> · 2 to go
<br>
<small>3 verified sign-ups unlock wholesale prices forever.</small>
<a href="#unlock">Unlock now</a>
</div>
<header class="container">
<h1>Buy together. Wholesale prices for private buyers.</h1>
<p>Limited CBD drops directly from Swiss producers. No retail. No marketing markup. Just collective volume pricing.</p>
</header>
<section class="container" id="drop">
<div class="drop">
<img src="https://images.unsplash.com/photo-1604908554027-0b6c2c9c7e92" />
<div>
<h2>Harlequin Collective Drop</h2>
<div class="meta">1kg batch · Indoor · Switzerland</div>
<div class="price">
<strong>Standard price: 2.50 CHF / g</strong><br>
<span class="muted">
Wholesale: 1.90 CHF / g 🔒 <a href="#unlock">unlock</a>
</span>
<div class="hint">Unlock once. Keep wholesale forever.</div>
</div>
<div class="progress"><span></span></div>
<div class="meta">620g of 1,000g reserved</div>
<div class="options">
<button class="active">50g</button>
<button>100g</button>
<button>250g</button>
</div>
<button class="cta">Join the drop</button>
<div class="cta-note">No subscription · No obligation</div>
</div>
</div>
<div class="info-box">
<div>
<h3>Why so cheap?</h3>
<p>Retail prices average around 10 CHF/g. By buying collectively, we purchase like wholesalers — without intermediaries.</p>
</div>
<div>
<h3>Taxes & Legal</h3>
<p>Bulk sales with 2.5% VAT. No retail packaging, no tobacco tax.</p>
</div>
<div>
<h3>Drop model</h3>
<p>One strain per drop. Once sold out, the next drop goes live.</p>
</div>
</div>
</section>
<section class="container" id="community">
<div class="signup">
<h2>Drop notifications</h2>
<p>Receive updates about new drops via email or WhatsApp.</p>
<input type="email" placeholder="Email" />
<input type="text" placeholder="WhatsApp number" />
<br />
<button>Notify me</button>
<small>Counts as a referral sign-up if invited.</small>
</div>
</section>
<section class="container" id="past">
<h2>Past Drops</h2>
<div class="past">
<div class="card">
<img src="https://images.unsplash.com/photo-1581091012184-5c7b4c101899" />
<strong>Swiss Gold</strong><br><span class="meta">Sold out in 42h</span>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1512436991641-6745cdb1723f" />
<strong>Lemon T1</strong><br><span class="meta">Sold out in 19h</span>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1600431521340-491eca880813" />
<strong>Alpine Frost</strong><br><span class="meta">Sold out in 31h</span>
</div>
</div>
</section>
<footer>
© 2025 420Deals.ch · CBD &lt; 1% THC · 18+ only · Switzerland
</footer>
</body>
</html>