data-countdown
Doors open in
- 00days
- 00hours
- 00min
- 00sec
Every kind of event: conferences, multi-event sites, festivals, hackathons, expos, webinars, AI summits, business forums, education events, creator meetups, weddings, medical congresses, marathons, film festivals and food festivals. One template.
Fifteen home demos, 31 inner pages and a live style switcher. Hand-written HTML, CSS and vanilla JavaScript you can read, change and ship.
- 15home demos
- 46pages
- 50+JS modules
- 0dependencies
- 320–1920 pxfully responsive
The line-up
Fifteen headliners, each with its own colours, type and signature modules. Point at a name to preview it, click to open the demo.
- No jQuery
- No framework
- No build step
- Just HTML, CSS & JS
- Conference
- Festival
- Hackathon
- Expo
- Webinar
- AI Summit
- Forum
- Workshop
- Meetup
- Wedding
- Congress
- Marathon
- Film
- Food
Make it yours. Live.
The main demo ships with a style switcher. Recolour it, change the type, swap headers and footers or box the page in. The preview on the right is the real theme, not a picture.
- 10 colours + your own
- 4 font pairs
- 5 headers
- 4 footers
- Boxed or wide
- Sticky header and motion switches
- Every page one click away
- Inner pages take the colour of the demo you came from
- Share a link to any look
The programme
Every demo brings modules built for its kind of event. They all live in one JavaScript file and switch on with a data attribute.
-
Conference schedule
Day tabs, a timeline with speaker avatars and a session that marks itself as live.
See it in the conference demo -
Featured event
Countdown, video and a side reel of upcoming events for sites that run many events at once.
See it in the multi-event demo -
Festival site map
An SVG map whose stages light up from the list, plus a timetable that follows the clock.
See it in the festival demo -
The 48-hour clock
A hackathon schedule with a progress bar that knows which hour of the event it is.
See it in the hackathon demo -
Expo floor plan
Halls you can explore from a key, an exhibitor search and a stand price calculator.
See it in the expo demo -
Live webinar stage
A player with a moving chat, viewer count and reactions, next to a local-time agenda.
See it in the webinar demo
Not videos. Click them.
Every box below runs on the theme's own main.js, the same file the demos use. Add the data attribute to your markup and it works.
data-poll
Which act opens your event?
Tap an answer to see the results
data-local-time
Keynotes, in your time zone
- Opening keynote
- Panel: events after dark
- Late session for the Americas
data-dot-grid
Move your cursor here
A canvas of dots that lights up around the pointer and rests when it is off screen.
data-seats
Front-end meetup
38 of 60 seats taken
data-confetti
Tickets sold out?
data-scramble
Ship/48
Headings that decode as they scroll in, from the hackathon demo.
31 inner pages, ready
Speakers, schedules, event details, a blog, legal pages and a full shop that shares one front-end cart. Click any page to open it.
A shop that actually works
Add to cart, change quantities, save to a wishlist and walk through checkout. It runs in the browser, ready for your own payment back end.
0items in the demo cart
Every screen, front row
Layouts are tuned from 320 px phones to wide desktops, with a mobile header and menu of their own. The same festival demo, three screens.
Backstage
No build step, no package manager, no framework to learn. Open a file, read the comments, change what you need.
- One main stylesheet with a table of contents and design tokens, plus a small one per demo
- One commented JavaScript file, modules switched on by data attributes
- A widgets page with 27 of them working, each with the attribute to copy
- Inline SVG icon sprite, no icon font
- AJAX contact form with a PHP handler (mail or SMTP)
- Documentation for every page, header, footer and component
<div data-countdown="2027-03-14T09:00">
<b data-days></b> <b data-hours></b> …
</div>
<div data-poll> … </div>
<button data-confetti>Celebrate</button>
<script src="assets/js/main.min.js"></script>
✓ That's the whole setup.Built with care
The details people notice later: keyboard use, motion settings, privacy and speed.
Keyboard first
Skip link, visible focus, menus, tabs, dialogs and sliders you can use without a mouse.
Motion you can turn off
Follows the reduced-motion setting, or switch every animation off with one attribute.
Privacy-minded
Maps load only on click, and the cookie notice comes with real settings.
Light by design
No libraries to download, lazy images, one CSS and one JS file per page.
Every browser that matters
Current Chrome, Safari, Firefox and Edge, with fallbacks where newer CSS is used.
Code you can read
Comments in every file, a table of contents in style.css and one data attribute per feature.
Found. Shared.
Every page is ready for search engines and for the link previews people see in chats and feeds. Write your own words into it; the structure is already there.
- A unique title and description on all 46 pages
- Event structured data on the fifteen home demos: dates, venue, organiser and tickets
- FAQPage data on the FAQ page, so answers can appear in results
- Open Graph and Twitter cards with a share image on every page
- sitemap.xml and robots.txt, ready for your domain
- One h1 per page, headings in order and alt text on every image
In the box
- 46 HTML pages, including 15 home demos
- style.css and a file per demo, with minified builds
- main.js with every module and a minified build
- Style switcher for the main demo
- PHP contact form handler
- Calendar file, PDF brochure and e-mail template
- Documentation
- Free updates for life
- Six months of author support, extendable
Photos in the demos are for preview only and are not included in the download.
No. Every page is plain HTML that works when you open it. If you edit a stylesheet, one command rebuilds the minified copies; the documentation shows how.
Yes. All demos share the same stylesheet and script. Each demo's colours and fonts come from one attribute on the html tag, so sections can move between pages.
The cart, wishlist and checkout work in the browser with demo products. Connect them to the e-commerce or ticketing back end you use.
Yes, through the included PHP handler on any host that supports PHP mail. Set your own address in one line.
It is meant for trying looks. Pick yours, apply it with the matching header, footer and colour variables, then remove the switcher with three lines.
Yes, and every update is free for life: download it again from your ThemeForest account. Six months of support from the author are included, and you can extend them to twelve.
Your next event starts here
Fifteen home demos, 31 inner pages, the style switcher and the documentation. Free updates for life and six months of support from the author come with every ThemeForest purchase.