IGNITE 2026 · Countdown Timer · Canvas Confetti · Intersection Observer Scroll Reveal · Dark Cyber UI · Registration Form · Portfolio-Ready
The Coodeverse IGNITE 2026 Conference Landing Page is a free HTML CSS JS futuristic event template featuring a live JavaScript countdown timer (days/hours/minutes/seconds with setInterval and padStart), canvas confetti animation (400 particles, Math.sin tilt, requestAnimationFrame) triggered on registration form submit, Intersection Observer scroll reveal with staggered transitionDelay for speaker cards, dark cyber UI with CSS custom properties and radial-gradient, CSS Grid speaker layout, and a complete event registration form. Pure vanilla HTML CSS JavaScript — no frameworks. 100% free.
Pure HTML + CSS + Vanilla JavaScript — no frameworks. Teaches countdown timer with Date arithmetic, canvas confetti with requestAnimationFrame, Intersection Observer scroll reveal, CSS radial-gradient dark hero, CSS Grid auto-fill speaker layout, staggered transitionDelay, and registration form with success state. Perfect for portfolio and freelance event projects.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IGNITE 2026 • The Future of Tech & Design | Coodeverse</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&family=Space+Grotesk:wght@700&display=swap" rel="stylesheet">
<style>
:root { --bg:#0a0621; --card:#120c33; --accent:#00e7ff; --purple:#a78bfa; --text:#e0d4ff; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; }
.hero { height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; background:radial-gradient(circle at 50% 30%,#1a0b40 0%,var(--bg) 80%); }
.hero h1 { font-family:'Space Grotesk',sans-serif; font-size:7.5rem; font-weight:900; line-height:0.9; background:linear-gradient(90deg,#fff,var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:1rem; }
.hero p { font-size:1.8rem; max-width:700px; margin:0 auto 2rem; opacity:0.9; }
.btn { padding:20px 60px; background:var(--accent); color:#000; border:none; border-radius:50px; font-size:1.4rem; font-weight:700; cursor:pointer; box-shadow:0 20px 60px rgba(0,231,255,0.4); transition:all 0.4s; }
.btn:hover { transform:translateY(-10px); box-shadow:0 40px 100px rgba(0,231,255,0.6); }
.countdown { margin:3rem 0; display:flex; justify-content:center; gap:2rem; flex-wrap:wrap; }
.time-block { background:var(--card); padding:1.5rem 2rem; border-radius:20px; min-width:120px; text-align:center; box-shadow:0 15px 40px rgba(0,0,0,0.3); }
.number { font-family:'Space Grotesk'; font-size:4rem; font-weight:700; background:linear-gradient(90deg,var(--accent),var(--purple)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.label { font-size:1rem; opacity:0.8; letter-spacing:2px; }
.info { padding:120px 8%; display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:4rem; max-width:1400px; margin:0 auto; text-align:center; }
.info-card { background:var(--card); padding:3rem; border-radius:28px; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.info-card h3 { font-size:2rem; margin:1.5rem 0; background:linear-gradient(90deg,var(--accent),var(--purple)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.register { padding:120px 8%; background:var(--card); text-align:center; }
.form { max-width:600px; margin:0 auto; display:grid; gap:1.5rem; }
input, select { padding:18px 24px; background:rgba(255,255,255,0.05); border:2px solid rgba(0,231,255,0.2); border-radius:16px; color:white; font-size:1.1rem; outline:none; }
input:focus, select:focus { border-color:var(--accent); box-shadow:0 0 30px rgba(0,231,255,0.3); }
.success { display:none; padding:3rem; background:rgba(0,255,159,0.1); border-radius:24px; border:2px solid #10b981; margin-top:2rem; }
.speakers { padding:120px 8%; text-align:center; }
.speaker-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:3rem; max-width:1200px; margin:3rem auto 0; }
.speaker { opacity:0; transform:translateY(60px); transition:all 0.8s ease; }
.speaker.visible { opacity:1; transform:translateY(0); }
.speaker img { width:100%; height:280px; object-fit:cover; border-radius:24px; transition:transform 0.6s; }
.speaker:hover img { transform:scale(1.08); }
canvas#confetti { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:9999; }
@media (max-width:768px) { .hero h1 { font-size:4.8rem; } .countdown { gap:1rem; } .time-block { padding:1rem 1.5rem; } .number { font-size:3rem; } }
</style>
</head>
<body>
<section class="hero">
<div>
<h1>IGNITE<br>2026</h1>
<p>The world's leading conference on AI, Design & Future Tech</p>
<div class="countdown" id="countdown">
<div class="time-block"><div class="number" id="d">00</div><div class="label">DAYS</div></div>
<div class="time-block"><div class="number" id="h">00</div><div class="label">HOURS</div></div>
<div class="time-block"><div class="number" id="m">00</div><div class="label">MINUTES</div></div>
<div class="time-block"><div class="number" id="s">00</div><div class="label">SECONDS</div></div>
</div>
<button class="btn" onclick="document.querySelector('.register').scrollIntoView({behavior:'smooth'})">Secure Your Ticket</button>
</div>
</section>
<section class="info">
<div class="info-card"><h3>March 12–14, 2026</h3><p>San Francisco • Moscone Center</p></div>
<div class="info-card"><h3>120+ Speakers</h3><p>From OpenAI, Figma, Notion, Stripe & more</p></div>
<div class="info-card"><h3>5,000 Attendees</h3><p>Founders, designers, engineers, investors</p></div>
</section>
<section class="speakers">
<h2>Featured Speakers</h2>
<div class="speaker-grid">
<div class="speaker"><img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600" alt="Sarah Chen – CEO Horizon AI"><p><strong>Sarah Chen</strong><br>CEO, Horizon AI</p></div>
<div class="speaker"><img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600" alt="Michael Torres – Design Lead Figma"><p><strong>Michael Torres</strong><br>Design Lead, Figma</p></div>
<div class="speaker"><img src="https://images.unsplash.com/photo-1580489940927-9f0d5e1e9e0f?w=600" alt="Emma Richards – CTO Nova Labs"><p><strong>Emma Richards</strong><br>CTO, Nova Labs</p></div>
<div class="speaker"><img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=600" alt="Alex Kim – Founder Future Studio"><p><strong>Alex Kim</strong><br>Founder, Future Studio</p></div>
</div>
</section>
<section class="register">
<h2>Reserve Your Spot</h2>
<p>Only 1,247 tickets remaining</p>
<form class="form" id="registerForm">
<input type="text" placeholder="Full Name" required>
<input type="email" placeholder="Email Address" required>
<select required>
<option value="" disabled selected>Ticket Type</option>
<option>General Admission – $799</option>
<option>VIP All-Access – $1,999</option>
<option>Group (5+) – $649 each</option>
</select>
<button type="submit" class="btn">Complete Registration</button>
</form>
<div class="success" id="success">
<h3>You're in! 🎉 Check your email.</h3>
<p>Ticket confirmation sent. See you in San Francisco!</p>
</div>
</section>
<canvas id="confetti"></canvas>
<script>
// ── Countdown Timer ──
const eventDate = new Date('2026-03-12T09:00:00');
function updateCountdown() {
const diff = eventDate - new Date();
if (diff <= 0) { document.getElementById('countdown').innerHTML = '<h2>Event Live Now!</h2>'; return; }
const pad = n => n.toString().padStart(2,'0');
document.getElementById('d').textContent = pad(Math.floor(diff / 86400000));
document.getElementById('h').textContent = pad(Math.floor((diff % 86400000) / 3600000));
document.getElementById('m').textContent = pad(Math.floor((diff % 3600000) / 60000));
document.getElementById('s').textContent = pad(Math.floor((diff % 60000) / 1000));
}
setInterval(updateCountdown, 1000);
updateCountdown();
// ── Registration + Confetti ──
document.getElementById('registerForm').addEventListener('submit', e => {
e.preventDefault();
document.querySelector('.form').style.display = 'none';
document.getElementById('success').style.display = 'block';
triggerConfetti();
});
function triggerConfetti() {
const canvas = document.getElementById('confetti');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const colors = ['#00e7ff','#a78bfa','#ff2a6d','#10b981'];
const particles = Array.from({length:400}, () => ({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height - canvas.height,
r: Math.random() * 6 + 2,
d: Math.random() * 8 + 4,
color: colors[Math.floor(Math.random() * colors.length)],
tiltAngle: 0
}));
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach((c, i) => {
c.tiltAngle += 0.1; c.y += c.d;
const tilt = Math.sin(c.tiltAngle) * 15;
if (c.y > canvas.height) { particles.splice(i, 1); return; }
ctx.beginPath(); ctx.lineWidth = c.r; ctx.strokeStyle = c.color;
ctx.moveTo(c.x + tilt + c.r/2, c.y);
ctx.lineTo(c.x + tilt, c.y + tilt + c.r/2);
ctx.stroke();
});
if (particles.length) requestAnimationFrame(draw);
}
draw();
}
// ── Intersection Observer Scroll Reveal ──
const observer = new IntersectionObserver(entries => {
entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
}, { threshold: 0.3 });
document.querySelectorAll('.speaker').forEach((s, i) => {
s.style.transitionDelay = (i * 0.15) + 's';
observer.observe(s);
});
</script>
</body>
</html>
const eventDate = new Date('2026-03-12T09:00:00'). Diff: const diff = eventDate - new Date(). Extract: const days = Math.floor(diff / 86400000). Format: n.toString().padStart(2,'0'). Auto-update: setInterval(updateCountdown, 1000). Handle expiry: if (diff <= 0) show 'Event Live Now!'.position:fixed; top:0; left:0; pointer-events:none; z-index:9999. (2) Create 400 particles with random x, y (above screen), speed d, radius r, color. (3) In draw loop: c.y += c.d (fall), tilt = Math.sin(c.tiltAngle) * 15 (sway). (4) Draw: ctx.moveTo / lineTo / stroke. (5) Remove: if (c.y > canvas.height) particles.splice(i,1). (6) Animate: requestAnimationFrame(draw)..speaker { opacity:0; transform:translateY(60px); transition:all 0.8s ease; } and .speaker.visible { opacity:1; transform:translateY(0); }. JS: const observer = new IntersectionObserver(entries => { entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); }); }, { threshold: 0.3 }). Stagger: el.style.transitionDelay = (i * 0.15) + 's'. Then observer.observe(el).:root { --bg:#0a0621; --card:#120c33; --accent:#00e7ff; --purple:#a78bfa; }. Hero: background:radial-gradient(circle at 50% 30%,#1a0b40 0%,var(--bg) 80%). Gradient text: background:linear-gradient(90deg,#fff,var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent. Glow: box-shadow:0 20px 60px rgba(0,231,255,0.4). Glass input: background:rgba(255,255,255,0.05); border:2px solid rgba(0,231,255,0.2).days.toString().padStart(2, '0') converts 5 to '05' and 12 to '12'. First argument (2) = target length. Second ('0') = padding character. Without padStart, timers jump from '10' to '9' causing layout shifts. Always call .toString() first since padStart is a string method. The IGNITE 2026 demo uses it on all four time units.Countdown Timer · Canvas Confetti · Scroll Reveal · Dark Cyber UI · Speaker Grid · Registration Form · Free Forever
Trusted by 50,000+ developers worldwide · Coodeverse · Free Forever