Free event website template

Live demo GitHub Download ZIP Use this template

Repository: github.com/8bsite/event-website-template · Live demo: 8bsite.github.io/event-website-template/ · MIT license

About this template

ONDO is an event website template for a two-day music and culture festival: schedule, lineup, a crew battle, venue zones, food, sponsors, a photo wall and three passes. It also fits a concert, a fan meeting or a convention, or any event with a timetable.

A one-page site for a two-day K-culture festival in Rotterdam: lineup, a crew battle, four zones, a beauty lab, a food board, partner info, a photo wall and three passes. Crimson and red slides with big type that heats from dim to white-hot as you scroll; the first screen's face closes into nine round windows that become the day's schedule.

Good for:

Music or culture festivalConcert, fan meeting or conventionClub night or event series with a lineupAny event with a schedule, several areas and ticket tiers

Free for personal and client work under the MIT license. In collections: one page website templates, github website templates, website templates with animation, parallax website templates.

How to use the event website template

With an AI coding agent

Download the files into your project (Windows PowerShell: curl.exe):

curl -LO https://raw.githubusercontent.com/8bsite/event-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/event-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/event-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/event-website-template/main/CREDITS.md

Then give the agent this prompt:

Read AGENTS.md, then edit index.html. Use this template as the base for an event site for <your event: what it is, dates, venue and address, lineup or programme, areas, ticket types and prices, how to buy>. Keep the layout, the motion and the single-file format; replace the event name, copy, photos, schedule, prices, links and contacts, and recolour it through the CSS variables if needed.

Give the agent the file, not a link. AGENTS.md says what to keep and what to replace. Step by step: templates for Claude Code.

In a terminal

npx degit 8bsite/event-website-template my-site

No code

Download the ZIP, edit index.html and drag its folder onto Netlify Drop, or click Use this template and turn on GitHub Pages.

Event website design and motion

Palette

#6e0a1e deep crimson page and slides#c8102e red slides and photo tint#fcfafb white text, buttons, light slides#1c0509 near-black slides#ff5c7a pink hot edge, hover sweeps#d9331f orange-red in gradients

Fonts

Asta Sans: the only family: huge tight uppercase headings, text and Hangul

Sections are slides inset by a thin crimson margin, switching between near-black, crimson, red and white. Headings are huge, tight capitals filled with a gradient; many photos are greyscale or tinted red. Circles recur: schedule rings, round portraits, a round venue plan, round crops and rings around the contact.

Motion runs on scroll; the list of sections below says what moves in each.

What is on the page

Navigation
Top bar: wordmark, section links, Tickets button; phone menu overlay with dates and venue
Heat of Seoul
Two-screen opening: a full-bleed photo under a huge title, then nine round windows onto it with the day's schedule
Smooth scrolling throughout. Scrolling, the photo zooms and the title splits apart, then a crimson veil closes into nine round schedule windows.
On the bill
The bill: five act names set full width, each with a round portrait and day, stage and time
Most headings warm from dim to white as they arrive. Each portrait swells mid-screen as its name glides sideways and heats up.
Crew battle
Split screen: two sides with a moving VS line (demo: a dance crew battle)
Pinned, the VS line sweeps right, left, then back to centre as each crew's name grows and the rounds light up.
One hall, four heats
Venue plan with four round zone windows and a description of each
The round venue plan holds still and zooms onto each zone as its text scrolls past, the others dimming.
Idol looks
Sideways track of three items, each a tall photo with times, name, text and three steps (demo: make-up looks)
The white slide pins and its track moves sideways; each look's photo opens from a small circle.
Food street
Menu board with prices, names in two languages, two photos
On arrival, the round stall photo spins in and the menu rows fade up as their rules draw across.
Who fills the hall
For sponsors: audience in four columns with bars sized by share, a portrait and a deck button
Tied to scroll, the portrait rises into place and the four audience bars grow up one after another.
The photo wall
Photo wall: eight photos, rectangles and circles, red-tinted
Each red-tinted photo flashes its true colours as it crosses mid-screen, the columns slightly out of step.
Passes
Three ticket tiers as wristband passes with prices and buttons
On wide screens the three passes start bunched and fanned like a hand of cards, then spread into a row.
Before you come
Questions and answers (native <details>) with a contact e-mail
See you on the river
Contact block framed by rings: e-mail, venue address, travel, phone, press e-mail
Tied to scroll, four rings widen one after another behind the contact details while the heading heats up.
Footer
Width-filling ONDO 온도 wordmark, links, copyright and the Design: 8B credit

What is inside

Files: index.html (152 KB, CSS and JavaScript inside), AGENTS.md, CREDITS.md, LICENSE
Motion: GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.27 smooth scroll, loaded from jsDelivr. With reduced motion on, the page shows a complete static version.
Fonts: Asta Sans from Google Fonts (SIL Open Font License)
Photos: 29 from Unsplash (Unsplash License), loaded from Unsplash's servers and each credited in CREDITS.md
Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), container query units, cascade layers, small/dynamic viewport units).
Replace before publishing: Social preview image, favicon, email address, phone number and social media links, plus the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
License: MIT

Good to know

One page, no CMS: texts and prices are edited in the HTML, and there is no checkout or payment built in.
Choose day / Choose weekend / Choose pit buttons on the three passes lead to #contact now; point them to your ticket shop URL for each pass.
Tickets (nav) and Get tickets (first screen) lead to #tickets now; point them to your ticket shop URL, or keep them on the passes section.
Enter your crew for 2027 (battle) lead to a mailto: link now; point them to your sign-up form URL or a real e-mail address.
Request the partner deck (partners) lead to a mailto: link now; point them to your partner deck PDF or a real e-mail address.
The photo wall is static: nothing collects tagged photos; connect a feed or reword the paragraph.
In the looks track, while it slides, one look's text sits beside the next look's photo for a moment.
The demo facts are invented. Photos load from Unsplash, the motion libraries from jsDelivr.

Questions about this event website template

Can visitors buy tickets on the page?

No. The pass buttons jump to the contact block, so point each one at your ticket shop. There is no form on the page, so nothing needs a form service.

How do I change the schedule?

The nine rings on the second screen are plain list items, a time and a label each. Keep nine of them: the round windows in the veil are set for nine.

For agents and LLMs

ondo.mdThis page as plain text: what it is, how to use it, sections, files. ondo.jsonName, tags, size, license, sections and every file URL. AGENTS.mdEditing rules for coding agents: what to keep, what to replace.

More templates

Ombrelle, a free restaurant website template: first screen