Saffron — Free Indian Wedding Website Template
Saffron gives a multi-day Indian wedding a celebratory website in saffron, marigold, deep magenta and emerald on ivory, with Rozha One headings and Mukta text. The garland strip, cusped arch frames, rangoli medallion and block-print pattern are original CSS and inline SVG. Guests see every event with its time, venue and dress colours, filter by day and save any event, or all five, to their calendar as an .ics file. The RSVP form asks which celebrations each guest will attend and what they eat, and the city guide covers weather, shuttles and free hours between events.
Key features
- Hero with the couple’s names, dates, cusped arch photo frame and a live countdown that reads its target from a data attribute
- Five event cards (Haldi, Mehendi, Sangeet, wedding, reception) with time, venue, running order and dress-code colour swatches
- Add-to-calendar buttons that build .ics files in the browser for one event or all five, with a reminder the day before
- Day filter with toggle buttons that shows the celebrations for one day at a time
- Families section with monogram crests, initials avatars for parents, siblings and grandparents, and a help-desk contact strip
- Travel and stay section with air, rail and transfer details and three room-block cards with rates, deadlines and booking codes
- Photo gallery with a keyboard-friendly lightbox built on the native dialog element
- RSVP page with attendance per event, guest stepper, vegetarian, non-vegetarian, Jain and vegan choices, pickup details, accessibility needs, song request, live summary, error summary and success state
- City guide with a weather range chart drawn from a JavaScript array, a saved packing checklist, an illustrated venue map and a shuttle timetable
- Original garland, arch, rangoli and block-print motifs in CSS and inline SVG; no icon fonts and no photos of people
Best for
- Indian and South Asian weddings spread over several days
- Destination weddings that need travel, room-block and shuttle details
- Couples who want guests to RSVP per event and choose a meal preference
- Wedding planners building invitation sites for clients
- Developers who want a jQuery-free Bootstrap 5 event starter
At a glance
- Bootstrap 5.3.8 with vanilla JavaScript, no jQuery
- 3 pages: index.html, rsvp.html, travel.html
- Client-side .ics calendar files for each event or the whole weekend
- Inline SVG icons, motifs, venue map and weather chart; no icon fonts or chart libraries
- Front-end RSVP form with browser validation, live summary and success state
- 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 names, dates, events and venues 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. Event times for the calendar files sit in data attributes on each event card and RSVP checkbox, and the countdown reads data-countdown. The RSVP form needs a form service or backend to receive replies. Upload the folder to any static host.
Frequently asked questions
Is Saffron free for commercial use?
Yes. You can use it for personal and commercial projects, including wedding sites you build for clients. Attribution is optional but always welcome. Full terms are at uicookies.com/license.
What is Saffron built with?
Bootstrap 5.3.8 with a single vanilla JavaScript file and no jQuery or other libraries. Icons, ornaments, the venue map and the weather chart are inline SVG, so there are no icon fonts or chart libraries to load.
Which pages and sections are included?
Three pages. index.html has the countdown hero, our story, the five celebrations, the families, travel and room blocks, a gallery, an FAQ and an RSVP call to action. rsvp.html holds the RSVP form, and travel.html is a city guide with weather, packing list, venue map, shuttle timetable and things to do.
Does the RSVP form send replies?
The form validates in the browser, shows a live summary and a success state, and offers the guest a calendar file for the events they chose, but it does not send anything. Connect it to a form service or your own backend to collect replies.
Can I change the events for my own wedding?
Yes. Each event is one card in index.html; edit the text, the swatch colours and the data-start, data-end and data-location attributes, and the add-to-calendar buttons follow. Remove a card or a whole day group to drop an event, and update the matching checkbox in rsvp.html.
