# ONDO, a free event website template > Event website for a music or culture festival, with lineup, schedule, venue zones and tickets. One HTML file with GSAP scroll animations, no build step, MIT license. Made by 8B (https://8b.com/). 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. - Page: https://8b.com/templates/ondo/ - Live demo: https://8bsite.github.io/event-website-template/ - Repository (GitHub template): https://github.com/8bsite/event-website-template - Download ZIP: https://github.com/8bsite/event-website-template/archive/refs/heads/main.zip - Size: 152 KB, 29 photos (Unsplash), fonts: Asta Sans - Motion: GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.27 smooth scroll ## Use it with an AI coding agent Download the files into the project (Windows PowerShell: `curl.exe`): ```bash 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: ```text Read AGENTS.md, then edit index.html. Use this template as the base for an event site for . 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. ``` Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/event-website-template my-site`. ## Design 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. - 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. ## Sections and motion - **Navigation** (navigation): top bar: wordmark, section links, Tickets button; phone menu overlay with dates and venue - **Heat of Seoul** (opening): two-screen opening: a full-bleed photo under a huge title, then nine round windows onto it with the day's schedule. Motion: 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** (lineup): the bill: five act names set full width, each with a round portrait and day, stage and time. Motion: 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** (battle): split screen: two sides with a moving VS line (demo: a dance crew battle). Motion: 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** (zones): venue plan with four round zone windows and a description of each. Motion: The round venue plan holds still and zooms onto each zone as its text scrolls past, the others dimming. - **Idol looks** (looks): sideways track of three items, each a tall photo with times, name, text and three steps (demo: make-up looks). Motion: The white slide pins and its track moves sideways; each look's photo opens from a small circle. - **Food street** (food): menu board with prices, names in two languages, two photos. Motion: On arrival, the round stall photo spins in and the menu rows fade up as their rules draw across. - **Who fills the hall** (partners): for sponsors: audience in four columns with bars sized by share, a portrait and a deck button. Motion: Tied to scroll, the portrait rises into place and the four audience bars grow up one after another. - **The photo wall** (fanwall): photo wall: eight photos, rectangles and circles, red-tinted. Motion: Each red-tinted photo flashes its true colours as it crosses mid-screen, the columns slightly out of step. - **Passes** (tickets): three ticket tiers as wristband passes with prices and buttons. Motion: On wide screens the three passes start bunched and fanned like a hand of cards, then spread into a row. - **Before you come** (faq): questions and answers (native
) with a contact e-mail - **See you on the river** (contact): contact block framed by rings: e-mail, venue address, travel, phone, press e-mail. Motion: Tied to scroll, four rings widen one after another behind the contact details while the heading heats up. - **Footer** (footer): width-filling ONDO 온도 wordmark, links, copyright and the Design: 8B credit ## Good for - music or culture festival - concert, fan meeting or convention - club night or event series with a lineup - any event with a schedule, several areas and ticket tiers ## Questions **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. ## Before publishing Replace: social preview image, favicon, email address, phone number and social media links, plus the invented demo facts (prices, dates, addresses). ## License Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. The "Design: 8B" footer link is optional.