An elegant, animated, scrollable online invitation for a Katb Ketab. Built as a single static site — no build step, no dependencies.
Style: Islamic / floral / elegant — deep emerald, warm gold, ivory cream.
- Opening "envelope" with a Bismillah and a tap-to-open seal
- Animated hero with the couple's names in a gold ornamental frame
- Qur'anic verse (Ar-Rum 30:21) with Arabic calligraphy
- Live countdown to the day, plus Add to calendar (Google + downloadable
.ics) - Details cards — when / where (with map & directions) / dress
- Summer colour palette swatches for the ladies' outfits
- Photo gallery (add your own pictures)
- Background music toggle (optional)
- Falling gold-petal animation, scroll-reveal effects, scroll progress bar
- Fully responsive + respects "reduce motion" accessibility settings
Open config.js and change the values in quotes — names, date, venue,
map link, dress code, colour swatches, photos and music. Save, and that's it.
groom: "Omar",
bride: "Raghad",
eventDate: "2026-07-17T20:00:00+03:00", // drives the countdown & calendar
venue: "Al-Aziz Al-Hakim Mosque",
mapUrl: "https://www.google.com/maps/...", // the "Get directions" linkEither paste online image links into the gallery: [ ] array, or drop files
into the assets/ folder and reference them, e.g. "assets/photo1.jpg".
Put an .mp3 at assets/music.mp3 and set musicUrl: "assets/music.mp3".
A deploy workflow is already included (.github/workflows/deploy-pages.yml).
To turn the link on, once:
- Go to the repo on GitHub → Settings → Pages.
- Under Build and deployment → Source, choose GitHub Actions.
- Push to the branch (already automated) — the site publishes in ~1 minute.
Your shareable link will be: https://theaviator4.github.io/or/
Prefer the simplest path? Settings → Pages → Source: Deploy from a branch → pick this branch and
/ (root)also works for a static site like this.
Just open index.html in a browser, or run a tiny server:
python3 -m http.server 8000 # then visit http://localhost:8000