Homecoming — Free Family Reunion Website Template
Homecoming gives a family reunion a warm, nostalgic website in lake blue, warm sand and sunset coral, with Fraunces headings and DM Sans text. Everything relatives need before the trip sits on one page: when and where, what happens each day, where to stay and which booking code to quote, and one RSVP per household that counts adults, teens, kids and little ones, banquet plates and shirt sizes while showing the estimated fees. The family tree is built in HTML, CSS and SVG, collapses by branch on phones and highlights names as you search. A second page gathers photos, stories and tributes.
Key features
- Hero with the reunion name, dates, venue and a live countdown that reads its target from a data attribute
- Weekend schedule in accessible tabs with arrow-key support and a timeline for each day
- Illustrated SVG venue map with a numbered legend and drive times
- Hotel, cabin and camping cards with copy-to-clipboard booking codes and availability bars
- RSVP form with age-group steppers, arrival day, banquet plates and shirt sizes, plus a live headcount and fee summary
- Who’s coming section with count-up numbers, a branch bar chart and an arrivals chart drawn from small JavaScript data arrays
- T-shirt shop with an SVG shirt preview that changes colour and flips front to back, and a live order total
- Fees and contribution fund with a budget breakdown bar and a marked spot to connect your payment link
- Four-generation family tree in HTML, CSS and SVG with collapsible branches on phones and a name search
- Memories page with a filterable photo wall and lightbox, drag-and-drop photo previews, tributes with a light-a-candle button and a past reunions timeline with an attendance chart
Best for
- Family reunions and multi-day family gatherings
- Clan, heritage and extended-family reunions that need RSVPs and lodging details
- Milestone anniversary weekends and family camp weekends
- Developers who want a jQuery-free Bootstrap 5 event starter
At a glance
- Bootstrap 5.3.8 with vanilla JavaScript, no jQuery
- 2 pages: index.html, memories.html
- Inline SVG icons, venue map, charts and T-shirt preview; no icon fonts or chart libraries
- Front-end forms with browser validation, live summaries and success states
- Colours and fonts set as CSS custom properties in css/style.css
- Free for personal and commercial use; attribution optional but welcome. Full terms: uicookies.com/license
How to use it
Unzip the folder and open index.html in a browser. Replace the reunion name, dates, schedule, lodging details and family tree in the HTML, and swap the photos in img/ for your own. Colours and fonts are custom properties at the top of css/style.css. Set the countdown with the data-countdown attribute and the chart numbers in the arrays at the top of js/main.js. The RSVP, shirt and memory forms need a form service or backend to receive entries. Upload the folder to any static host.
Frequently asked questions
Is Homecoming free for commercial use?
Yes. You can use it for personal and commercial projects, including sites you build for clients. Attribution is optional but always welcome. Full terms are at uicookies.com/license.
What is Homecoming built with?
Bootstrap 5.3.8 with a single vanilla JavaScript file and no jQuery or other libraries. Icons, the venue map, charts and the T-shirt preview are inline SVG, so there are no icon fonts or chart libraries to load.
Which pages and sections are included?
Two pages. index.html has the countdown hero, schedule tabs, venue and lodging, who’s coming, RSVP, T-shirt shop, fees, family tree, FAQ and organiser contacts. memories.html has the photo wall, the share-a-memory form, tributes and the past reunions timeline.
Do the RSVP form and payments work out of the box?
The forms validate in the browser, add up the headcount and fees, and show a success state, but they do not send anything. Connect them to a form service or your own backend. For payments, paste a PayPal.me, Venmo or Stripe Payment Link into the Pay button; the page never handles card details.
Can I change the family tree for my own family?
Yes. The tree is plain nested HTML lists: one card for the first couple, one item per branch, then children and grandchildren inside it. Add or remove people and the connectors, collapsible branches and name search keep working.
