webdevpuneet.com

Related Snippets

24 in Landing Pages category
11–16 of 24

Event & Conference Website Template

Coach & Consultant Website Template

Online Course Website Template

Local Service Business Website Template

Dental Clinic Website Template

Gym & Fitness Website Template

Event & Conference Website HTML Template — Free Snippet

Event & Conference Website template · 12 website sections · Plain HTML, CSS & JS · Customise it in the Website Builder

CategoryLanding Pages
TagsGSAPLocal StorageClipboard APIDrag & DropTouch Gestures

Copy & paste

Source Code

Requires
JS · gsap.min.jsJS · ScrollTrigger.min.jsJS · ScrollToPlugin.min.jsJS · SplitText.min.jsJS · Flip.min.jsJS · Draggable.min.jsJS · InertiaPlugin.min.js

    <section class="st st-navbar-announcement" data-uid="smvw6s7ubi605">
      <div class="na-bar" data-dismissable>
        <p class="st-wrap na-bar-in"><span>🎟️ Early-bird tickets end 30 September</span> <a class="na-bar-link" href="#pricing"><span>Save 40%</span> <span aria-hidden="true">→</span></a></p>
        <button type="button" class="na-close" data-dismiss aria-label="Dismiss announcement"><span aria-hidden="true">×</span></button>
      </div>
      <header class="st-wrap na">
        <div class="na-left">
          <a class="st-brand" href="#">
            <span class="st-brand-mark"><span class="st-brand-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="16 18 22 12 16 6" /><polyline points="8 6 2 12 8 18" /></svg></span><span>FRONTEND/26</span></span>
          </a>
          <nav class="na-nav" data-menu aria-label="Main">
            <ul class="na-links">
              <li data-menu-item><a class="na-link" href="#team"><span>Speakers</span></a></li>
              <li data-menu-item><a class="na-link" href="#features"><span>Schedule</span></a></li>
              <li data-menu-item><a class="na-link" href="#pricing"><span>Tickets</span></a></li>
              <li data-menu-item><a class="na-link" href="#faq"><span>FAQ</span></a></li>
            </ul>
            <div class="na-actions na-actions--menu" data-menu-item>
              <a class="st-btn" href="#pricing"><span>Get tickets</span></a>
            </div>
          </nav>
        </div>
        <div class="na-actions na-actions--bar">
          <a class="st-btn" href="#pricing"><span>Get tickets</span></a>
        </div>
        <button type="button" class="st-burger" data-menu-toggle aria-expanded="false" aria-label="Open menu"><span></span><span></span><span></span></button>
      </header>
      <i hidden data-sticky-flag></i>
    </section>
    <section class="st st-image-background-hero" data-uid="smvw6s7uc9m7j">
      <div class="ib-bg" role="img" aria-label="Background photo" style="background-image:url('https://webdevpuneet.com/images/section-templates/tpl-event.jpg')"></div>
      <div class="ib-shade" aria-hidden="true"></div>
      <div class="ib st-wrap">
        <div class="ib-copy">
          <span class="st-eyebrow ib-eyebrow" data-anim="item">14–15 May 2026 · Amsterdam</span>
          <h1 class="ib-title" data-anim="item" data-anim-text>Two days of <span class="hl">the future of the web</span></h1>
          <p class="st-lead ib-lead" data-anim="item">Talks, workshops and parties with the people building the next generation of the web.</p>
          <div class="st-btns" data-anim="item">
            <a class="st-btn" href="#pricing"><span>Get your ticket</span></a>
            <a class="st-btn st-btn--ghost ib-ghost" href="#team"><span>See speakers</span></a>
          </div>
        </div>
        <div class="ib-stats" data-anim="media">
          <div><strong>40</strong><span>speakers</span></div>
          <div><strong>1,500</strong><span>attendees</span></div>
          <div><strong>2</strong><span>days</span></div>
        </div>
      </div>
    </section>
    <section id="features" class="st st-features-alternating" data-uid="smvw6s7uc0vzw">
      <div class="st-wrap">
        <header class="st-head">
          <p class="st-eyebrow" data-anim="item">Schedule</p>
          <h2 class="st-h2" data-anim="item" data-anim-text>What’s <span class="hl">on stage</span></h2>
          <p class="st-lead" data-anim="item"></p>
        </header>
        <div class="fa-rows">
          <div class="fa-row">
            <div class="fa-copy" data-anim="item">
              <span class="st-pill fa-label">Day 1</span>
              <h3 class="fa-title">Talks &amp; <span class="hl">keynotes</span></h3>
              <p class="fa-text">Twenty talks on performance, design systems, AI and the browser platform.</p>
              <ul class="fa-bullets"><li>Opening keynote</li><li>3 talk tracks</li><li>Evening party</li></ul>
            </div>
            <div class="fa-media" data-anim="media"><img width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/tpl-event.jpg" alt="Conference stage"></div>
          </div>
          <div class="fa-row">
            <div class="fa-copy" data-anim="item">
              <span class="st-pill fa-label">Day 2</span>
              <h3 class="fa-title">Hands-on <span class="hl">workshops</span></h3>
              <p class="fa-text">Small-group workshops with the speakers, from CSS to GSAP animation.</p>
              <ul class="fa-bullets"><li>12 workshops</li><li>Max 25 people each</li><li>Lunch included</li></ul>
            </div>
            <div class="fa-media" data-anim="media"><img width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/feature-collab.png" alt="Workshop board"></div>
          </div>
        </div>
      </div>
    </section>
    <section id="team" class="st st-team-carousel" data-uid="smvw6s7uc5ylh">
      <div class="st-wrap">
        <div class="tc2-top">
          <header class="st-head st-head--left tc2-head">
            <p class="st-eyebrow" data-anim="item">Speakers</p>
            <h2 class="st-h2" data-anim="item" data-anim-text>Learn from <span class="hl">the best</span></h2>
            <p class="st-lead" data-anim="item">Engineers, designers and leaders from the teams behind tools you use every day.</p>
          </header>
          <div class="tc2-arrows" data-anim="item">
            <button type="button" class="tc2-arrow" data-carousel-prev><span class="tc2-sr">Previous people</span><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg></button>
            <button type="button" class="tc2-arrow" data-carousel-next><span class="tc2-sr">Next people</span><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></button>
          </div>
        </div>
        <ul class="tc2-track" data-carousel tabindex="0" role="region" aria-label="Team">
          <li class="tc2-card" data-anim="item">
            <img width="420" height="560" loading="lazy" draggable="false" src="https://webdevpuneet.com/images/section-templates/avatar-8.jpg" alt="">
            <div class="tc2-info">
              <h3 class="tc2-name"><span>Hana Sato</span></h3>
              <p class="tc2-role">Creative Director</p>
            </div>
          </li>
          <li class="tc2-card" data-anim="item">
            <img width="420" height="560" loading="lazy" draggable="false" src="https://webdevpuneet.com/images/section-templates/avatar-1.jpg" alt="">
            <div class="tc2-info">
              <h3 class="tc2-name"><span>Marcus Webb</span></h3>
              <p class="tc2-role">Technical Lead</p>
            </div>
          </li>
          <li class="tc2-card" data-anim="item">
            <img width="420" height="560" loading="lazy" draggable="false" src="https://webdevpuneet.com/images/section-templates/avatar-2.jpg" alt="">
            <div class="tc2-info">
              <h3 class="tc2-name"><span>Zara Ahmed</span></h3>
              <p class="tc2-role">Brand Designer</p>
            </div>
          </li>
          <li class="tc2-card" data-anim="item">
            <img width="420" height="560" loading="lazy" draggable="false" src="https://webdevpuneet.com/images/section-templates/avatar-7.jpg" alt="">
            <div class="tc2-info">
              <h3 class="tc2-name"><span>Ben Carter</span></h3>
              <p class="tc2-role">Strategist</p>
            </div>
          </li>
          <li class="tc2-card" data-anim="item">
            <img width="420" height="560" loading="lazy" draggable="false" src="https://webdevpuneet.com/images/section-templates/avatar-3.jpg" alt="">
            <div class="tc2-info">
              <h3 class="tc2-name"><span>Lena Fischer</span></h3>
              <p class="tc2-role">Motion Designer</p>
            </div>
          </li>
          <li class="tc2-card" data-anim="item">
            <img width="420" height="560" loading="lazy" draggable="false" src="https://webdevpuneet.com/images/section-templates/avatar-4.jpg" alt="">
            <div class="tc2-info">
              <h3 class="tc2-name"><span>Omar Haddad</span></h3>
              <p class="tc2-role">Front-end Developer</p>
            </div>
          </li>
        </ul>
      </div>
    </section>
    <section id="timeline" class="st st-timeline-horizontal" data-uid="smvw6s7ucvrv6">
      <div class="st-wrap">
        <header class="st-head">
          <p class="st-eyebrow" data-anim="item">The schedule</p>
          <h2 class="st-h2" data-anim="item" data-anim-text>Two days, <span class="hl">hour by hour</span></h2>
          <p class="st-lead" data-anim="item">Keep scrolling to walk through both days, from the opening keynote to the evening party.</p>
        </header>
        <div class="tlh" data-tlh data-layout="alternate" data-marker="icon" data-width="contained" data-start="1" data-mode="pin">
          <button type="button" class="tlh-nav tlh-prev" data-tlh-prev disabled aria-label="Show earlier events"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg></button>
          <div class="tlh-track" data-tlh-track role="region" tabindex="0" aria-label="Company timeline">
            <ol class="tlh-list">
              <li class="tlh-item" data-anim="item">
                <div class="tlh-card">
                  <p class="tlh-date">Day 1 · 09:00</p>
                  <h3 class="tlh-title">Doors and coffee</h3>
                  <p class="tlh-text">Collect your badge, meet the speakers and find a seat before the opening keynote.</p>
                </div>
                <button type="button" class="tlh-dot" data-tlh-dot aria-label="Doors and coffee"><span class="tlh-num" aria-hidden="true"></span><span class="tlh-ico st-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 2v2" /><path d="M14 2v2" /><path d="M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1" /><path d="M6 2v2" /></svg></span></button>
              </li>
              <li class="tlh-item" data-anim="item">
                <div class="tlh-card">
                  <p class="tlh-date">Day 1 · 10:00</p>
                  <h3 class="tlh-title">Opening keynote</h3>
                  <p class="tlh-text">Where the web is heading in 2026, and what it means for the way your team builds.</p>
                </div>
                <button type="button" class="tlh-dot" data-tlh-dot aria-label="Opening keynote"><span class="tlh-num" aria-hidden="true"></span><span class="tlh-ico st-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" /></svg></span></button>
              </li>
              <li class="tlh-item" data-anim="item">
                <div class="tlh-card">
                  <p class="tlh-date">Day 1 · 11:30</p>
                  <h3 class="tlh-title">Three talk tracks</h3>
                  <p class="tlh-text">Twenty talks on performance, design systems, AI and the browser platform.</p>
                </div>
                <button type="button" class="tlh-dot" data-tlh-dot aria-label="Three talk tracks"><span class="tlh-num" aria-hidden="true"></span><span class="tlh-ico st-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg></span></button>
              </li>
              <li class="tlh-item" data-anim="item">
                <div class="tlh-card">
                  <p class="tlh-date">Day 1 · 19:00</p>
                  <h3 class="tlh-title">Evening party</h3>
                  <p class="tlh-text">Food, music and a rooftop view to finish the first day with the community.</p>
                </div>
                <button type="button" class="tlh-dot" data-tlh-dot aria-label="Evening party"><span class="tlh-num" aria-hidden="true"></span><span class="tlh-ico st-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" /></svg></span></button>
              </li>
              <li class="tlh-item" data-anim="item">
                <div class="tlh-card">
                  <p class="tlh-date">Day 2 · 10:00</p>
                  <h3 class="tlh-title">Hands-on workshops</h3>
                  <p class="tlh-text">Twelve small-group workshops of up to 25 people, from CSS to GSAP animation.</p>
                </div>
                <button type="button" class="tlh-dot" data-tlh-dot aria-label="Hands-on workshops"><span class="tlh-num" aria-hidden="true"></span><span class="tlh-ico st-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="16 18 22 12 16 6" /><polyline points="8 6 2 12 8 18" /></svg></span></button>
              </li>
              <li class="tlh-item" data-anim="item">
                <div class="tlh-card">
                  <p class="tlh-date">Day 2 · 16:30</p>
                  <h3 class="tlh-title">Closing session</h3>
                  <p class="tlh-text">The best ideas of the two days, announcements and a look at next year.</p>
                </div>
                <button type="button" class="tlh-dot" data-tlh-dot aria-label="Closing session"><span class="tlh-num" aria-hidden="true"></span><span class="tlh-ico st-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526" /><circle cx="12" cy="8" r="6" /></svg></span></button>
              </li>
            </ol>
          </div>
          <button type="button" class="tlh-nav tlh-next" data-tlh-next aria-label="Show later events"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></button>
        </div>
      </div>
    </section>
    <section id="pricing" class="st st-pricing-three-tier" data-uid="smvw6s7uc3fep">
      <div class="st-wrap">
        <header class="st-head">
          <p class="st-eyebrow" data-anim="item">Tickets</p>
          <h2 class="st-h2" data-anim="item" data-anim-text>Get your <span class="hl">ticket</span></h2>
          <p class="st-lead" data-anim="item">Prices rise as tiers sell out. Group discounts for 5+.</p>
        </header>
        <div class="p3-grid">
          <article class="p3-card" data-anim="item">
            <h3 class="p3-name">Conference</h3>
            <p class="p3-desc">Day 1 talks and party.</p>
            <p class="p3-price">
              <span class="st-pm"><b class="p3-amt">€399</b><span class="p3-per">early bird</span></span>
              <span class="st-py"><b class="p3-amt">$15</b><span class="p3-per">early bird</span></span>
            </p>
            <a class="st-btn p3-btn" href="https://webdevpuneet.com/signup"><span>Buy ticket</span></a>
            <ul class="st-checks p3-list"><li>All talks</li><li>Evening party</li><li>Recordings</li></ul>
          </article>
          <article class="p3-card" data-anim="item">
            <span class="p3-badge">Best value</span>
            <h3 class="p3-name">Full pass</h3>
            <p class="p3-desc">Talks, workshops and everything else.</p>
            <p class="p3-price">
              <span class="st-pm"><b class="p3-amt">€699</b><span class="p3-per">early bird</span></span>
              <span class="st-py"><b class="p3-amt">$15</b><span class="p3-per">early bird</span></span>
            </p>
            <a class="st-btn p3-btn" href="https://webdevpuneet.com/signup"><span>Buy full pass</span></a>
            <ul class="st-checks p3-list"><li>All talks</li><li>2 workshops</li><li>Party and lunch</li><li>Recordings</li></ul>
          </article>
          <article class="p3-card" data-anim="item">
            <h3 class="p3-name">Online</h3>
            <p class="p3-desc">Watch live from anywhere.</p>
            <p class="p3-price">
              <span class="st-pm"><b class="p3-amt">€99</b><span class="p3-per">per person</span></span>
              <span class="st-py"><b class="p3-amt">$15</b><span class="p3-per">per person</span></span>
            </p>
            <a class="st-btn p3-btn" href="https://webdevpuneet.com/signup"><span>Get online pass</span></a>
            <ul class="st-checks p3-list"><li>Live stream</li><li>Chat Q&amp;A</li><li>Recordings</li></ul>
          </article>
        </div>
        <p class="p3-note" data-anim="item">All prices exclude VAT. Tickets are transferable.</p>
      </div>
    </section>
    <section class="st st-logo-cloud" data-uid="smvw6s7uc304f">
      <div class="st-wrap">
        <p class="lc-title" data-anim="item">Proudly supported by <span class="hl">our sponsors</span></p>
      </div>
      <div class="lc-row" data-anim="item" role="region" aria-label="Customer logos" tabindex="0">
        <ul class="lc-track" data-marquee data-speed="45">
          <li class="st-logo">
            <span class="st-logo-mark"><span class="st-logo-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10" /><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" /><path d="M2 12h20" /></svg></span><span>Northwind</span></span>
          </li>
          <li class="st-logo">
            <span class="st-logo-mark"><span class="st-logo-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5" /><path d="M9 18h6" /><path d="M10 22h4" /></svg></span><span>Lumen</span></span>
          </li>
          <li class="st-logo">
            <span class="st-logo-mark"><span class="st-logo-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z" /><path d="m18 13-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18" /><path d="m2.3 2.3 7.286 7.286" /><circle cx="11" cy="11" r="2" /></svg></span><span>Quill</span></span>
          </li>
          <li class="st-logo">
            <span class="st-logo-mark"><span class="st-logo-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" /><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" /><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" /><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" /></svg></span><span>Brightpath</span></span>
          </li>
          <li class="st-logo">
            <span class="st-logo-mark"><span class="st-logo-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" /></svg></span><span>Kestrel</span></span>
          </li>
          <li class="st-logo">
            <span class="st-logo-mark"><span class="st-logo-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="6" /><circle cx="12" cy="12" r="2" /></svg></span><span>Orbit</span></span>
          </li>
          <li class="st-logo">
            <span class="st-logo-mark"><span class="st-logo-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z" /><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12" /></svg></span><span>Tidewater</span></span>
          </li>
          <li class="st-logo">
            <span class="st-logo-mark"><span class="st-logo-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z" /><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65" /><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65" /></svg></span><span>Fernhill</span></span>
          </li>
        </ul>
      </div>
    </section>
    <section id="faq" class="st st-faq-accordion" data-uid="smvw6s7uc1rie">
      <div class="st-wrap">
        <header class="st-head">
          <p class="st-eyebrow" data-anim="item">FAQ</p>
          <h2 class="st-h2" data-anim="item" data-anim-text>Practical <span class="hl">info</span></h2>
          <p class="st-lead" data-anim="item">Everything you need to know about plans, billing and getting started.</p>
        </header>
        <div class="fq-list" data-accordion="single first">
          <details class="st-acc" data-anim="item">
            <summary class="st-acc-q"><span>Where is the venue?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
            <div class="st-acc-a"><p>At the Kromhout Hall in Amsterdam Noord, ten minutes by free ferry from Central Station.</p></div>
          </details>
          <details class="st-acc" data-anim="item">
            <summary class="st-acc-q"><span>Can I transfer my ticket?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
            <div class="st-acc-a"><p>Yes, free of charge until one week before the event.</p></div>
          </details>
          <details class="st-acc" data-anim="item">
            <summary class="st-acc-q"><span>Will talks be recorded?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
            <div class="st-acc-a"><p>Yes. Every ticket includes access to all recordings after the event.</p></div>
          </details>
          <details class="st-acc" data-anim="item">
            <summary class="st-acc-q"><span>Is there a code of conduct?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
            <div class="st-acc-a"><p>Yes. We’re committed to a safe, welcoming event for everyone; read it on our website.</p></div>
          </details>
        </div>
        <p class="fq-contact" data-anim="item"><span>Still have a question?</span> <a href="mailto:[email protected]"><span>Talk to our team</span> <span aria-hidden="true">→</span></a></p>
      </div>
    </section>
    <section class="st st-popup-modal" data-uid="smvw6s7ucdcrz">
      <div class="pu" data-pu data-trigger="delay" data-delay="10" data-scroll="50" data-days="7" data-pos="bottom-right" data-layout="left" data-autoplay="0" data-pu-id="qfowe4">
        <div class="pu-backdrop" data-pu-close hidden></div>
        <div class="pu-dialog" role="dialog" aria-modal="true" aria-labelledby="pu-heading" tabindex="-1" hidden>
          <button type="button" class="pu-x" data-pu-close aria-label="Close popup"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
          <div class="pu-media">
            <img class="pu-img" loading="lazy" src="https://webdevpuneet.com/images/section-templates/tpl-event.jpg" alt="The main stage at FRONTEND/26">
          </div>
          <div class="pu-body">
            <p class="st-eyebrow">Early bird</p>
            <h2 class="pu-h" id="pu-heading">Early-bird tickets end <span class="hl">Friday</span></h2>
            <p class="pu-lead">Save 30% on a full conference pass before prices go up.</p>
            <div class="pu-ctas">
              <a class="st-btn pu-cta" href="#pricing"><span>Get tickets</span></a>
            </div>
            <button type="button" class="pu-no" data-pu-close><span>No thanks</span></button>
          </div>
        </div>
      </div>
    </section>
    <section class="st st-floating-social-share" data-uid="smvw6s7uc6yy9">
      <div class="ss" data-ss data-side="left" data-align="center" style="--ss-top:50%" data-mobile="bar" data-look="network" data-shape="attached" data-size="default" data-tips="on" data-start="open" data-copied="Link copied">
        <div class="ss-panel" role="group" aria-label="Share this page">
          <ul class="ss-list"><li class="ss-item"><a class="ss-btn" data-net="x" data-share="https://x.com/intent/post?url={url}&amp;text={title}&amp;via={via}&amp;hashtags={tags}" href="https://x.com/intent/post" target="_blank" rel="noopener noreferrer" style="--c:#111111" aria-label="Share on X (opens in a new tab)"><svg class="ss-ic" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg><span class="ss-tip" aria-hidden="true">X</span></a></li><li class="ss-item"><a class="ss-btn" data-net="linkedin" data-share="https://www.linkedin.com/sharing/share-offsite/?url={url}" href="https://www.linkedin.com/sharing/share-offsite/" target="_blank" rel="noopener noreferrer" style="--c:#0A66C2" aria-label="Share on LinkedIn (opens in a new tab)"><svg class="ss-ic" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect width="4" height="12" x="2" y="9"/><circle cx="4" cy="4" r="2"/></svg><span class="ss-tip" aria-hidden="true">LinkedIn</span></a></li><li class="ss-item"><a class="ss-btn" data-net="whatsapp" data-share="https://wa.me/?text={text}" href="https://wa.me/" target="_blank" rel="noopener noreferrer" style="--c:#128C7E" aria-label="Share on WhatsApp (opens in a new tab)"><svg class="ss-ic" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21l1.7-5.1A9 9 0 1 1 8.1 19.3z"/><path d="M9 8.5c0 3.300 2.700 6 6 6l1.300-1.500-2.200-1.100-.9.900c-.9-.4-1.700-1.200-2.100-2.100l.9-.9-1.100-2.200z"/></svg><span class="ss-tip" aria-hidden="true">WhatsApp</span></a></li><li class="ss-item"><a class="ss-btn" data-net="facebook" data-share="https://www.facebook.com/sharer/sharer.php?u={url}" href="https://www.facebook.com/sharer/sharer.php" target="_blank" rel="noopener noreferrer" style="--c:#1877F2" aria-label="Share on Facebook (opens in a new tab)"><svg class="ss-ic" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="currentColor"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg><span class="ss-tip" aria-hidden="true">Facebook</span></a></li><li class="ss-item"><button type="button" class="ss-btn" data-net="copy" style="--c:#0F7B3F" aria-label="Copy link"><svg class="ss-ic" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="13" height="13" x="8" y="8" rx="2.500"/><path d="M16 8V6.500A2.500 2.500 0 0 0 13.500 4h-7A2.500 2.500 0 0 0 4 6.500v7A2.500 2.500 0 0 0 6.500 16H8"/></svg><svg class="ss-ic ss-ic--done" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg><span class="ss-tip" aria-hidden="true">Copy link</span></button></li><li class="ss-item ss-item--hide"><button type="button" class="ss-hide" data-ss-hide aria-expanded="true" aria-label="Hide share buttons"><svg class="ss-ic ss-ic--hide" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m11 17-5-5 5-5"/><path d="m18 17-5-5 5-5"/></svg></button></li></ul>
        </div>
        <button type="button" class="ss-tab" data-ss-show aria-expanded="true" aria-label="Show share buttons"><svg class="ss-ic" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.600 13.500 6.800 4M15.400 6.500l-6.800 4"/></svg><span class="ss-tab-text" aria-hidden="true">Share</span></button>
        <span class="ss-live" role="status" aria-live="polite"></span>
      </div>
    </section>
    <section id="contact" class="st st-footer-giant" data-uid="smvw6s7ucgdyx">
      <footer class="fgi">
        <div class="st-wrap">
          <div class="fgi-cta">
            <h2 class="st-h2 fgi-title" data-anim="item">See you in <span class="hl">Amsterdam</span></h2>
            <div class="fgi-cta-side" data-anim="item">
              <a class="st-btn" href="#pricing"><span>Get your ticket</span> <span aria-hidden="true">→</span></a>
              <p class="fgi-email">[email protected]</p>
            </div>
          </div>
          <div class="fgi-mid" data-anim="item">
            <nav aria-label="Footer"><ul class="fgi-links"><li><a href="#team">Speakers</a></li><li><a href="#features">Schedule</a></li><li><a href="#pricing">Tickets</a></li><li><a href="#faq">FAQ</a></li></ul></nav>
            <div><ul class="st-socials">
                <li><a class="st-social" href="https://www.instagram.com/" aria-label="Instagram"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="20" x="2" y="2" rx="5" ry="5" /><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" /><line x1="17.5" x2="17.51" y1="6.5" y2="6.5" /></svg></span></a></li>
                <li><a class="st-social" href="https://dribbble.com/" aria-label="Dribbble"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10" /><path d="M19.13 5.09C15.22 9.14 10 10.44 2.25 10.94" /><path d="M21.75 12.84c-6.62-1.41-12.14 1-16.38 6.32" /><path d="M8.56 2.75c4.37 6 6 9.42 8 17.72" /></svg></span></a></li>
                <li><a class="st-social" href="https://www.linkedin.com/" aria-label="LinkedIn"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" /><rect width="4" height="12" x="2" y="9" /><circle cx="4" cy="4" r="2" /></svg></span></a></li>
              </ul></div>
          </div>
          <p class="fgi-word" data-anim-text aria-hidden="true">FRONTEND/26</p>
          <div class="fgi-bottom">
            <p>© 2026 Frontend Conference</p>
            <ul class="fgi-legal"><li><a href="/privacy/">Privacy</a></li><li><a href="/imprint/">Imprint</a></li></ul>
          </div>
        </div>
      </footer>
    </section>
    <section class="st st-back-to-top" data-uid="smvw6s7ucugtc">
      <div class="btt" data-btt data-enabled="on" data-distance="500" data-pos="right" data-appear="fade" data-speed="0.8" data-mobile="on" data-shadow="on" style="--btt-size:52px;--btt-off:24px;--btt-radius:50%;--btt-speed:0.8s">
        <div class="btt-demo" aria-hidden="true">
          <span class="btt-bar btt-bar--lg"></span><span class="btt-bar"></span><span class="btt-bar btt-bar--md"></span><span class="btt-bar"></span><span class="btt-bar btt-bar--sm"></span>
          <span class="btt-note">The button appears here once the page has scrolled</span>
        </div><!--/btt-demo-->
        <button type="button" class="btt-btn" aria-label="Back to top" title="Back to top"><svg class="btt-svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2.400" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 19V5M5 12l7-7 7 7"/></svg></button>
      </div>
    </section>

Extend with AI

Take This Template Further With AI

Give this prompt to an AI assistant to generate your own version of the Event & Conference Website template: swap in your business name, services and tone, add or remove sections, translate it, or turn the page into a Next.js project or a WordPress theme. Use the template above as the visual reference, so you and the AI start from a design that already works.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build a complete event & conference website for “FRONTEND/26” as clean HTML, CSS and a little JavaScript.

Page structure, top to bottom:
1. Navbar With Announcement Bar
2. Image Background Hero: “Two days of the future of the web”
3. Alternating Feature Rows: “What’s on stage”
4. Team Carousel: “Learn from the best”
5. Horizontal Timeline: “Two days, hour by hour”
6. Three-Tier Pricing: “Get your ticket”
7. Scrolling Logo Cloud: “Proudly supported by our sponsors”
8. FAQ Accordion: “Practical info”
9. Popup & Promo Modal
10. Floating Social Share Bar
11. Big Wordmark Footer
12. Back to Top Button

Look and feel:
- Colours as CSS custom properties: brand #e879f9, page background #0f0a1f, cards #1a1430, text #f5f3ff, muted text #b7aed1. Corner radius 14px, content width 1200px.
- Headings in Space Grotesk, body text in Inter (load both from Google Fonts with display=swap).
- Mobile first. Sections use CSS grid or flexbox and stack cleanly below 700px.

Content:
- Write real, believable events copy for every section instead of lorem ipsum: specific offers, numbers, names and calls to action.
- One clear primary action in the hero and again near the end.

Quality:
- Semantic HTML (header, main, section, footer) with exactly one h1, the hero headline, and one h2 per section.
- Accessible: alt text on every image, visible focus states, labelled form fields, buttons and links with clear text, and prefers-reduced-motion respected.
- SEO: title “Event Website Template — Free Conference Landing Page HTML”, a meta description of 150 to 160 characters, Open Graph tags and JSON-LD that suits a events business.
- Optional: a subtle GSAP ScrollTrigger fade-up on section headings, with content visible without JavaScript.

Also create these pages with the same navbar, footer and theme, and link them from the menu:
- About (about.html)
- Pricing (pricing.html)
- FAQ (faq.html)
- Privacy (privacy.html)

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

What's included

Features

12 ready-made website sections assembled into one finished event & conference website page: Navbar With Announcement Bar, Image Background Hero, Alternating Feature Rows, Team Carousel, Horizontal Timeline, Three-Tier Pricing, Scrolling Logo Cloud, FAQ Accordion, Popup & Promo Modal, Floating Social Share Bar, Big Wordmark Footer, Back to Top Button
Every section links to its own page in the Website Section Templates library, where you can edit it on its own
One theme drives the whole page (colours, fonts, corner radius, width), so changing the brand takes a minute
Container-query responsive: each section adapts to the width it is placed in, from phone to desktop
GSAP entrance animations and scroll effects load from a CDN, and switch off for visitors who prefer reduced motion
Also available as a 6-page website in the builder, sharing one navbar, footer and theme
A pinned horizontal timeline (GSAP ScrollTrigger) that slides along as you scroll, with a growing progress line
A floating back to top button that appears as visitors scroll, on every page of the multi-page version
Plain HTML, CSS and JavaScript: copy the code here or export it to React, Vue, Angular or Tailwind

About this UI Snippet

A Conference Website That Sells Tickets: Date, Speakers, Schedule and Three Ticket Tiers

Screenshot of the Event & Conference Website Template snippet rendered live

An event page has a deadline and a capacity, so it needs to create a decision. The announcement bar and hero put the date, city and one button in front of the visitor straight away. The alternating feature blocks give reasons to attend, built around what attendees will take home, the speaker carousel gives the draw (people choose events for who is on stage), and the ticket tiers with a highlighted default plan make the choice easy, with the early-bird price creating urgency.

The page covers the practicalities too: a sponsor logo cloud shows who backs the event, the FAQ handles travel, refunds and accessibility, a promo popup can announce a speaker or a price change and a share bar makes it easy to pass the link to a colleague, which is how most conference tickets get bought.

Replace the sample event with yours, ideally with real speaker photos. It is the layout of the Event & Conference Website template; open it in the Website Builder to edit and export.

Interactive extras built in

Beyond the core sections, this template adds a pinned horizontal schedule that moves through both days of the conference as you scroll; and a floating back to top button that appears after the visitor scrolls, so a long page is easy to leave and return. Each one has its own page in the Website Section Templates library (Horizontal Timeline, Back to Top Button), where you can try its settings on their own, and you can edit, move or remove any of them in the Website Builder.

Built from website section templates

The 12 Sections Behind This Event & Conference Website Page

This page is not one big block of code: it is stacked from ready-made sections in the free Website Section Templates library, in this order. Open any of them to edit it on its own, or start with the whole page.

  1. Navbar With Announcement Bara bar announcing the date and early-bird deadline, creating the urgency an event needs
  2. Image Background Heroa stage photograph with the date, city and a Get tickets button
  3. Alternating Feature Rowsreasons to attend, framed as what an attendee takes home, in alternating rows
  4. Team Carouselthe speakers in a draggable carousel, because people choose events for who is on stage
  5. Horizontal Timelinea pinned horizontal schedule that moves through both days of the conference as you scroll
  6. Three-Tier Pricingticket tiers with a highlighted default and an early-bird price
  7. Scrolling Logo Cloudsponsor logos that show who backs the event and add credibility
  8. FAQ Accordiontravel, refunds, accessibility and group discounts answered up front
  9. Popup & Promo Modala promo popup for a new speaker or a price change, easy to remove after
  10. Floating Social Share Bara floating share bar so attendees can pass the link to a colleague, how most tickets get bought
  11. Big Wordmark Footera giant wordmark footer that repeats the event name, date and a last ticket link
  12. Back to Top Buttona floating back to top button that appears after the visitor scrolls, so a long page is easy to leave and return
Start using this templateAbout the Event & Conference Website templateAll website section templates

Step by step

How to Use

  1. 1
    Open the template in the Website BuilderPress "Start using this template" to open the Event & Conference Website in the Website Builder. Everything is edited with forms in a side panel; no code is needed.
  2. 2
    Set the date, city and early-bird deadlineEdit the announcement bar and hero with the real date and venue, and add the deadline for the cheapest tickets so there is a reason to buy now.
  3. 3
    Add real speakers with photos and talk titlesFill the carousel with each speaker's photo, role and talk title; a named talk is more persuasive than a name alone.
  4. 4
    Link the ticket buttons to your checkoutPoint each tier at your ticketing provider (Eventbrite, Tito or Stripe), and keep the highlighted plan as the one you want most attendees to buy.
  5. 5
    Export and publishDownload one HTML file or a ZIP (or one HTML file per page for the multi-page version) and upload it to Netlify, Vercel, Cloudflare Pages, GitHub Pages or your own host. Or copy the code from this page and export it to React, Vue, Angular or Tailwind with the buttons above the editor.

Real-world uses

Common Use Cases

Conferences, summits and meetups
Sell tickets and publish the programme from a page with the date, speakers and tiers up front.
Festivals and workshops
Swap speakers for artists or instructors and tiers for day passes.
Learn a draggable carousel and share bar
See how a drag-to-scroll carousel and a floating share bar work in plain JavaScript.

Got questions?

Frequently Asked Questions

The date and place, why to attend, speakers, a schedule, ticket options, sponsors and answers on travel and refunds.

Use an early-bird price with a real deadline in the announcement bar and ticket section, and update the page when the price changes.

Yes. Add a schedule section from the Website Section Templates library, or list sessions inside the feature rows.

It adds a pinned horizontal timeline and a floating back to top button. Each is a section you can edit, move or remove in the Website Builder, and each has its own page in the Website Section Templates library.

It is assembled from 12 templates in the free Website Section Templates library: Navbar With Announcement Bar, Image Background Hero, Alternating Feature Rows, Team Carousel, Horizontal Timeline, Three-Tier Pricing, Scrolling Logo Cloud, FAQ Accordion, Popup & Promo Modal, Floating Social Share Bar, Big Wordmark Footer, Back to Top Button. Each one has its own page where you can edit it separately.

It is the same page. Here you read and edit the HTML, CSS and JavaScript directly with a live preview; in the Website Builder you edit it with forms, change the theme once for the whole page, add pages and export a finished site.