</> ConvertAtlas Developer Tools
Landing & Portfolio · Advanced

Convene — Conference / Event Landing

A high-energy conference and event landing with a gradient hero, a live countdown timer, a speakers grid, an agenda timeline, ticket tiers and scroll-reveal — a ConvertAtlas template.

Uses Bootstrap 5. Bootstrap 5 plus the CDN tag below. The downloaded file already includes everything.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<nav class="cv-nav" data-rv><span class="cv-logo">◆ DevConf</span><div class="cv-links d-none d-md-flex"><a href="#speakers">Speakers</a><a href="#agenda">Agenda</a><a href="#tickets">Tickets</a></div><a href="#tickets" class="cv-btn">Get tickets</a></nav>
<header class="cv-hero"><div class="cv-hero-in">
  <span class="cv-pill" data-rv>📍 Riga · Sep 18–19, 2026</span>
  <h1 data-rv>The conference<br>for people who <span>ship</span></h1>
  <p data-rv>Two days of talks on tools, performance and developer experience — presented by <strong>ConvertAtlas</strong>.</p>
  <div class="cv-count" id="cvCount" data-rv><div><b id="cvD">00</b><span>Days</span></div><div><b id="cvH">00</b><span>Hrs</span></div><div><b id="cvM">00</b><span>Min</span></div><div><b id="cvS">00</b><span>Sec</span></div></div>
  <div data-rv><a href="#tickets" class="cv-btn cv-btn-lg">Reserve your seat</a></div>
</div></header>
<section id="speakers" class="cv-sec">
  <div class="cv-head" data-rv><span class="cv-kick">// speakers</span><h2>Who's on stage</h2></div>
  <div class="cv-spk-grid">
    <div class="cv-spk" data-rv><div class="cv-spk-img" style="background:linear-gradient(135deg,#ff6b35,#f7c59f)"></div><h4>Ava Lindberg</h4><span>Performance, Lumen</span></div>
    <div class="cv-spk" data-rv><div class="cv-spk-img" style="background:linear-gradient(135deg,#7c3aed,#c4b5fd)"></div><h4>Ben Carter</h4><span>DX, Vector</span></div>
    <div class="cv-spk" data-rv><div class="cv-spk-img" style="background:linear-gradient(135deg,#0c8fc4,#5dd6ff)"></div><h4>Rihards O.</h4><span>Maker, ConvertAtlas</span></div>
    <div class="cv-spk" data-rv><div class="cv-spk-img" style="background:linear-gradient(135deg,#16a34a,#86efac)"></div><h4>Cara Diaz</h4><span>Open source, Atlas</span></div>
  </div>
</section>
<section id="agenda" class="cv-sec cv-sec-alt">
  <div class="cv-head" data-rv><span class="cv-kick">// agenda</span><h2>Day one</h2></div>
  <div class="cv-agenda">
    <div class="cv-slot" data-rv><b>09:00</b><div><h4>Opening keynote</h4><span>Building tools developers keep open</span></div></div>
    <div class="cv-slot" data-rv><b>10:30</b><div><h4>Shipping 435 snippets</h4><span>Lessons from a one-person platform</span></div></div>
    <div class="cv-slot" data-rv><b>13:00</b><div><h4>SEO for web apps</h4><span>Schema, sitemaps &amp; Core Web Vitals</span></div></div>
    <div class="cv-slot" data-rv><b>15:30</b><div><h4>Single-file templates</h4><span>Why constraints make better design</span></div></div>
  </div>
</section>
<section id="tickets" class="cv-sec">
  <div class="cv-head" data-rv><span class="cv-kick">// tickets</span><h2>Grab your pass</h2></div>
  <div class="cv-tix-grid">
    <div class="cv-tix" data-rv><h3>Early bird</h3><div class="cv-price">€0</div><ul><li>2-day access</li><li>All talks</li><li>Community Discord</li></ul><a href="#" class="cv-btn cv-btn-out">Register free</a></div>
    <div class="cv-tix cv-tix-pop" data-rv><span class="cv-tag">Best value</span><h3>Pro pass</h3><div class="cv-price">€99</div><ul><li>Everything in Early bird</li><li>Workshops</li><li>Recorded sessions</li></ul><a href="#" class="cv-btn">Get Pro</a></div>
    <div class="cv-tix" data-rv><h3>Team</h3><div class="cv-price">€399</div><ul><li>5 Pro passes</li><li>Reserved seating</li><li>Invoice billing</li></ul><a href="#" class="cv-btn cv-btn-out">Contact us</a></div>
  </div>
</section>
<footer class="cv-foot">◆ DevConf © 2026 · Built with <a href="https://convertatlas.org">ConvertAtlas</a> · Developer Tools</footer>
*{box-sizing:border-box}body{margin:0;background:#0f1020;color:#ececf6;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;overflow-x:hidden}a{text-decoration:none}
.cv-nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:16px 28px;background:rgba(15,16,32,.7);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.07)}
.cv-logo{font-weight:800;color:#ff6b35}
.cv-links{gap:26px}.cv-links a{color:#a6a8c4;font-size:.88rem}.cv-links a:hover{color:#ff6b35}
.cv-btn{background:linear-gradient(120deg,#ff6b35,#f7931e);color:#0f1020;font-weight:800;padding:10px 20px;border-radius:10px;font-size:.88rem;display:inline-block;transition:.18s}
.cv-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(255,107,53,.4)}
.cv-btn-lg{padding:15px 34px;font-size:1.02rem}
.cv-btn-out{background:transparent;border:1px solid #ff6b35;color:#ff6b35}
.cv-hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:120px 24px 60px;background:radial-gradient(60% 50% at 50% 0%,rgba(255,107,53,.18),transparent 70%)}
.cv-hero-in{max-width:760px}
.cv-pill{display:inline-block;border:1px solid rgba(255,107,53,.4);background:rgba(255,107,53,.1);border-radius:999px;padding:7px 16px;font-size:.82rem;color:#ffb088;margin-bottom:22px}
.cv-hero h1{font-size:clamp(2.4rem,6.5vw,4.6rem);font-weight:800;letter-spacing:-.035em;line-height:1.04;margin:0 0 16px}
.cv-hero h1 span{background:linear-gradient(120deg,#ff6b35,#f7931e);-webkit-background-clip:text;background-clip:text;color:transparent}
.cv-hero p{color:#a6a8c4;font-size:1.08rem;max-width:540px;margin:0 auto 30px;line-height:1.7}
.cv-count{display:flex;gap:16px;justify-content:center;margin-bottom:32px}
.cv-count div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px 18px;min-width:74px}
.cv-count b{display:block;font-size:1.9rem;font-weight:800;color:#ff6b35}.cv-count span{color:#8a8caa;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em}
.cv-sec{max-width:1040px;margin:0 auto;padding:70px 24px}
.cv-sec-alt{background:linear-gradient(180deg,transparent,rgba(255,107,53,.04),transparent)}
.cv-kick{font-family:ui-monospace,monospace;color:#ff6b35;font-size:.82rem}
.cv-head{text-align:center;margin-bottom:34px}.cv-head h2{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;letter-spacing:-.03em;margin:6px 0 0}
.cv-spk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:760px){.cv-spk-grid,.cv-tix-grid{grid-template-columns:1fr!important}.cv-links{display:none}.cv-count{flex-wrap:wrap}}
.cv-spk{text-align:center}
.cv-spk-img{height:180px;border-radius:16px;margin-bottom:12px;transition:transform .3s}
.cv-spk:hover .cv-spk-img{transform:scale(1.04) translateY(-4px)}
.cv-spk h4{margin:0;font-size:1.05rem}.cv-spk span{color:#8a8caa;font-size:.82rem}
.cv-agenda{max-width:680px;margin:0 auto}
.cv-slot{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.cv-slot b{color:#ff6b35;font-family:ui-monospace,monospace;min-width:54px}
.cv-slot h4{margin:0 0 3px;font-size:1.05rem}.cv-slot span{color:#a6a8c4;font-size:.88rem}
.cv-tix-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cv-tix{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:28px;text-align:center;position:relative}
.cv-tix-pop{border-color:#ff6b35;box-shadow:0 0 40px rgba(255,107,53,.15)}
.cv-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#ff6b35;color:#0f1020;font-size:.72rem;font-weight:800;padding:4px 14px;border-radius:999px}
.cv-tix h3{font-size:1.1rem;margin:0 0 8px}.cv-price{font-size:2.4rem;font-weight:800;margin-bottom:14px}
.cv-tix ul{list-style:none;padding:0;margin:0 0 20px;text-align:left}.cv-tix li{padding:6px 0;color:#a6a8c4;font-size:.9rem;border-bottom:1px solid rgba(255,255,255,.06)}
.cv-tix li::before{content:"✓ ";color:#ff6b35}
.cv-foot{text-align:center;padding:28px;color:#6b6d88;font-size:.84rem;border-top:1px solid rgba(255,255,255,.07)}.cv-foot a{color:#ff6b35}
[data-rv]{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}[data-rv].in{opacity:1;transform:none}
var target=new Date('2026-09-18T09:00:00').getTime();
function pad(n){return String(n).padStart(2,'0')}
function tick(){var d=target-Date.now();if(d<0)d=0;
 document.getElementById('cvD').textContent=pad(Math.floor(d/86400000));
 document.getElementById('cvH').textContent=pad(Math.floor(d/3600000)%24);
 document.getElementById('cvM').textContent=pad(Math.floor(d/60000)%60);
 document.getElementById('cvS').textContent=pad(Math.floor(d/1000)%60);}
tick();setInterval(tick,1000);
var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}})},{threshold:.12});
document.querySelectorAll('[data-rv]').forEach(function(el,i){el.style.transitionDelay=(i%3*70)+'ms';io.observe(el)});
Free to use — no attribution required. This is a complete, responsive Bootstrap 5 page. It uses Bootstrap 5 via CDN (linked above). Download a ready-to-open .html file with all CDN links included, or copy the HTML and drop it into your project.

What's included in this template

The Convene — Conference / Event Landing is a complete landing & portfolio design with realistic demo content — ready to preview, copy or download as a single responsive HTML file. Key features:

  • Live JS countdown timer
  • Speakers grid with hover
  • Agenda / schedule timeline
  • Ticket pricing tiers
  • Scroll-reveal sections
  • Gradient event branding

How to use it

Open the live preview above to see the full design at desktop, tablet and mobile widths. When you are happy with it, use Download to save a single convene-event-landing.html file, or Copy to grab the source. All required libraries load from public CDNs, so the file works the moment you open it — just replace the demo content with your own and publish.