Wedding Web · By Ankit D · Jun 9, 2026

Premium Animated Wedding Invitation Website Using HTML, CSS, JavaScript

Premium Animated Wedding Invitation Website Using HTML, CSS, JavaScript
  1. Introduction
  2. Before starting, make sure you know
  3. Wedding Invitation Website
  4. HTML
  5. CSS
  6. JavaScript
  7. Conclusion

Introduction

Wedding invitations are no longer limited to traditional cards. Today, many couples prefer sharing their special moments through beautifully designed websites that not only provide event details but also create a memorable experience for guests.

In this project, we will create a Premium Animated Wedding Invitation Website using HTML, CSS, and JavaScript. The website features a cinematic curtain-opening effect, background music, an interactive wedding timeline, venue details, and an RSVP form. Combined with smooth animations and elegant styling, the invitation feels modern, engaging, and visually rich.

Before starting, make sure you know:

This is a beginner-friendly project, but having basic knowledge will help you understand how different parts work together.

Wedding Invitation Website

In this project, everything is created in a single HTML file, where HTML, CSS, and JavaScript are combined together. This makes the project easy to run and understand, especially for beginners. Instead of separating files, all styling and functionality are included in one place, so you can directly open and view the result in the browser.


After adding the code, run it in your browser to see the final animated wedding invitation website.

Features of the Project

This wedding invitation website includes several features that make it more engaging than a standard digital invitation.

All these features work together to create a smooth and immersive experience, making guests feel like they are part of a real wedding celebration.

HTML:

Let’s start with the HTML structure of the wedding invitation website.

The project begins with the basic HTML setup using the <html> <head> and <body> tags. Inside the external libraries like Tailwind CSS and GSAP are included to support styling and animations.

We start by adding an <audio> element with the id "weddingMusic", which is used to play background music throughout the invitation. This helps create an emotional and cinematic feel for the visitors.

A music control button with the id "musicControl" is also added so users can play or pause the music whenever they want.

To create the grand entry effect, a main container called "curtainLayer" is used. Inside this, two panels with the classes "curtain-left" and "curtain-right" create a realistic stage-like curtain opening animation.

A central button with the id "openBtn" is placed on the screen, which starts the entire experience when clicked.

The website content is divided into multiple sections such as:

After form submission, a hidden <div id="rsvpSuccess"> is shown to confirm the response.

Complete Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wedding Invitation | Aarav & Diya</title>

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- GSAP & ScrollTrigger -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/TextPlugin.min.js"></script>

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Playfair+Display:ital,wght@0,400;0,600;0,800;1,400&family=Lato:wght@300;400&display=swap"
        rel="stylesheet">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        royal: {
                            900: '#2a0202', // Darker Maroon for depth
                            800: '#4a0404',
                            700: '#630808',
                            100: '#f9ebeb'
                        },
                        gold: {
                            400: '#d4af37',
                            500: '#c5a028',
                            600: '#b08d20',
                            glow: '#fadd80'
                        },
                        cream: '#fffdd0',
                    },
                    fontFamily: {
                        script: ['Great Vibes', 'cursive'],
                        serif: ['Playfair Display', 'serif'],
                        sans: ['Lato', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style>
        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #2a0202;
        }

        ::-webkit-scrollbar-thumb {
            background: #d4af37;
            border-radius: 4px;
        }

        /* Ambient Floating Particles */
        .particle {
            position: fixed;
            pointer-events: none;
            z-index: 1;
            opacity: 0;
        }

        .petal {
            position: fixed;
            pointer-events: none;
            z-index: 50;
            background-size: contain;
            background-repeat: no-repeat;
            opacity: 0.8;
            will-change: transform;
        }

        /* Utilities */
        .text-shadow-gold {
            text-shadow: 0 2px 10px rgba(212, 175, 55, 0.5);
        }

        /* Mandala Spin Animation */
        @keyframes spin-slow {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        .animate-spin-slow {
            animation: spin-slow 60s linear infinite;
        }

        /* === ULTRA REALISTIC CURTAIN STYLES === */
        .curtain-container {
            perspective: 1000px;
            /* Adds depth for the 3D skew effect */
        }

        .curtain-panel {
            /* Realistic Velvet Texture using gradients for folds */
            background-color: #4a0404;
            background-image:
                /* Deep shadows for folds */
                repeating-linear-gradient(90deg,
                    rgba(0, 0, 0, 0.5) 0%,
                    rgba(0, 0, 0, 0.1) 15%,
                    rgba(255, 255, 255, 0.05) 25%,
                    /* Highlight */
                    rgba(0, 0, 0, 0.1) 35%,
                    rgba(0, 0, 0, 0.5) 50%),
                /* Subtle pattern texture */
                url('https://www.transparenttextures.com/patterns/arabesque.png');
            background-size: 100% 100%, 200px 200px;
            box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.9);
            transform-origin: top center;
            will-change: transform;
        }

        .curtain-hem {
            /* Ornate Gold Border */
            background: linear-gradient(to bottom, #b08d20, #fadd80, #b08d20);
            box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
        }

        /* Central Glow Effect behind curtains */
        .stage-glow {
            background: radial-gradient(circle, rgba(212, 175, 55, 0.4) 0%, rgba(74, 4, 4, 0) 70%);
            mix-blend-mode: screen;
            opacity: 0;
        }
    </style>
</head>

<body class="bg-royal-900 text-cream overflow-x-hidden selection:bg-gold-500 selection:text-royal-900">

    <!-- Audio Player -->
    <audio id="weddingMusic" loop>
        <source
            src="Kudmayi-(Film-Version)(PaglaSongs).mp3"
            type="audio/ogg">
    </audio>

    <div id="musicControl" class="fixed bottom-6 right-6 z-50 cursor-pointer hidden">
        <div
            class="w-12 h-12 rounded-full bg-gold-500 flex items-center justify-center shadow-lg hover:scale-110 transition-transform duration-300 animate-pulse">
            <i id="musicIcon" class="fas fa-music text-royal-900"></i>
        </div>
    </div>

    <!-- ==================== CINEMATIC CURTAIN ENTRY ==================== -->
    <div id="curtainLayer" class="fixed inset-0 z-[100] flex curtain-container overflow-hidden pointer-events-auto">

        <!-- Central Stage Light (Behind Curtains, In Front of Main) -->
        <div id="centerGlow" class="absolute inset-0 stage-glow z-[90]"></div>

        <!-- Left Curtain -->
        <div class="curtain-panel curtain-left w-1/2 h-full relative z-[100] flex items-center justify-end">
            <!-- Gold Border/Hem -->
            <div class="absolute right-0 top-0 bottom-0 w-3 md:w-5 curtain-hem border-l-2 border-r-2 border-yellow-700">
            </div>
            <!-- Decorative Tassel Look (CSS) -->
            <div class="text-gold-500 opacity-30 text-9xl absolute -right-32 top-1/4 rotate-45 pointer-events-none">✨
            </div>
        </div>

        <!-- Right Curtain -->
        <div class="curtain-panel curtain-right w-1/2 h-full relative z-[100] flex items-center justify-start">
            <!-- Gold Border/Hem -->
            <div class="absolute left-0 top-0 bottom-0 w-3 md:w-5 curtain-hem border-l-2 border-r-2 border-yellow-700">
            </div>
            <!-- Decorative Tassel Look (CSS) -->
            <div class="text-gold-500 opacity-30 text-9xl absolute -left-32 top-1/4 rotate-45 pointer-events-none">✨
            </div>
        </div>

        <!-- Entry Content (Floating on top) -->
        <div id="entryContent"
            class="absolute inset-0 flex flex-col items-center justify-center z-[101] text-center px-4">
            <div
                class="relative p-10 border-4 border-double border-gold-500/50 bg-black/30 backdrop-blur-sm rounded-lg shadow-2xl transform transition-transform hover:scale-105 duration-700">
                <h2 class="font-script text-gold-400 text-4xl md:text-6xl mb-4 entry-text">You Are Invited</h2>
                <h1
                    class="font-serif text-white text-5xl md:text-8xl font-bold mb-8 entry-text tracking-wider drop-shadow-lg">
                    Aarav & Diya</h1>

                <button id="openBtn"
                    class="group relative px-10 py-5 bg-royal-900 border border-gold-500 text-gold-500 font-serif text-xl tracking-widest uppercase overflow-hidden shadow-[0_0_20px_rgba(212,175,55,0.3)] transition-all duration-300 hover:shadow-[0_0_40px_rgba(212,175,55,0.6)]">
                    <span class="relative z-10 group-hover:text-cream transition-colors duration-300">Open
                        Invitation</span>
                    <div
                        class="absolute inset-0 bg-gold-600 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-500 ease-out -z-0">
                    </div>
                </button>
            </div>

            <p class="mt-6 text-sm text-gold-300 entry-text italic opacity-80 animate-pulse">Tap to begin the
                celebration</p>
        </div>
    </div>

    <!-- ==================== MAIN SITE CONTENT ==================== -->
    <main id="mainContent" class="opacity-0 filter blur-xl">

        <!-- Hero Section -->
        <section class="min-h-screen relative flex flex-col items-center justify-center overflow-hidden">
            <!-- Background Parallax -->
            <div class="absolute inset-0 z-0">
                <img src="https://images.unsplash.com/photo-1519741497674-611481863552?q=80&w=2070&auto=format&fit=crop"
                    class="w-full h-full object-cover opacity-30 scale-110 parallax-bg" alt="Wedding Background">
                <div class="absolute inset-0 bg-gradient-to-b from-royal-900 via-transparent to-royal-900"></div>
            </div>

            <!-- Content -->
            <div class="relative z-10 text-center px-4 mt-20">
                <div class="gsap-hero-reveal transform translate-y-10 opacity-0">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Om_symbol.svg/250px-Om_symbol.svg.png"
                        class="w-16 h-16 mx-auto mb-6 opacity-80 invert filter drop-shadow-[0_0_10px_rgba(212,175,55,0.5)]"
                        alt="Om">
                </div>

                <p
                    class="gsap-hero-reveal font-serif text-gold-400 tracking-[0.3em] uppercase mb-4 transform translate-y-10 opacity-0">
                    Together with our families</p>

                <h1
                    class="gsap-hero-reveal font-script text-7xl md:text-9xl text-cream mb-6 transform translate-y-10 opacity-0 text-shadow-gold">
                    Aarav <span class="text-gold-500">&</span> Diya
                </h1>

                <p
                    class="gsap-hero-reveal font-serif text-xl md:text-2xl text-gold-200 mb-10 transform translate-y-10 opacity-0">
                    Invite you to join us in the celebration of our love
                </p>

                <div class="gsap-hero-reveal transform translate-y-10 opacity-0">
                    <div class="inline-block border-y border-gold-500 py-3 px-8 backdrop-blur-sm bg-royal-900/30">
                        <span class="font-serif text-2xl tracking-widest">DECEMBER 12, 2026</span>
                    </div>
                    <div class="mt-4 font-sans text-gold-300 tracking-wide">UDAIPUR, RAJASTHAN</div>
                </div>

                <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
                    <i class="fas fa-chevron-down text-gold-500 text-2xl"></i>
                </div>
            </div>
        </section>

        <!-- Couple Story Section -->
        <section class="py-24 bg-cream text-royal-900 relative overflow-hidden">
            <div class="absolute top-0 left-0 w-64 h-64 opacity-10">
                <img src="https://www.svgrepo.com/show/530219/mandala.svg" class="w-full h-full animate-spin-slow">
            </div>

            <div class="container mx-auto px-6 relative z-10">
                <div class="text-center mb-16">
                    <h2 class="font-serif text-4xl md:text-5xl text-royal-900 mb-4 section-title opacity-0">Our Story
                    </h2>
                    <div class="w-24 h-1 bg-gold-500 mx-auto rounded-full"></div>
                </div>

                <div class="flex flex-col md:flex-row items-center justify-center gap-12 md:gap-24">
                    <!-- Groom -->
                    <div class="text-center couple-card opacity-0 transform -translate-x-20">
                        <div class="relative w-64 h-64 mx-auto mb-6">
                            <div class="absolute inset-0 border-4 border-gold-500 rounded-full transform rotate-45">
                            </div>
                            <div class="absolute inset-0 border-4 border-royal-900 rounded-full transform -rotate-12">
                            </div>
                            <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=600&auto=format&fit=crop"
                                class="w-full h-full object-cover rounded-full shadow-xl grayscale hover:grayscale-0 transition-all duration-500"
                                alt="Groom">
                        </div>
                        <h3 class="font-script text-4xl text-royal-900 mb-2">Aarav</h3>
                        <p class="font-sans text-gray-600 text-sm italic w-64 mx-auto">"The moment I saw her, I knew my
                            search was over."</p>
                    </div>

                    <!-- Heart Icon -->
                    <div class="text-gold-500 text-4xl md:text-6xl animate-pulse">
                        <i class="fas fa-heart"></i>
                    </div>

                    <!-- Bride -->
                    <div class="text-center couple-card opacity-0 transform translate-x-20">
                        <div class="relative w-64 h-64 mx-auto mb-6">
                            <div class="absolute inset-0 border-4 border-gold-500 rounded-full transform -rotate-45">
                            </div>
                            <div class="absolute inset-0 border-4 border-royal-900 rounded-full transform rotate-12">
                            </div>
                            <img src="https://plus.unsplash.com/premium_photo-1675107359841-eb9142494289?q=80&w=387&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                                class="w-full h-full object-cover rounded-full shadow-xl grayscale hover:grayscale-0 transition-all duration-500"
                                alt="Bride">
                        </div>
                        <h3 class="font-script text-4xl text-royal-900 mb-2">Diya</h3>
                        <p class="font-sans text-gray-600 text-sm italic w-64 mx-auto">"In him, I found my love, my best
                            friend, and my home."</p>
                    </div>
                </div>

                <!-- Typewriter Text -->
                <div class="mt-16 text-center max-w-2xl mx-auto">
                    <p id="storyTypewriter" class="font-serif text-xl md:text-2xl text-royal-800 leading-relaxed"></p>
                </div>
            </div>
        </section>

        <!-- Wedding Timeline -->
        <section class="py-24 bg-royal-900 relative">
            <div class="container mx-auto px-4">
                <div class="text-center mb-20">
                    <h2 class="font-serif text-4xl md:text-5xl text-gold-400 mb-2 section-title opacity-0">Wedding
                        Events</h2>
                    <p class="font-sans text-cream opacity-70">A celebration of love and tradition</p>
                </div>

                <!-- Vertical Line -->
                <div class="relative max-w-4xl mx-auto">
                    <!-- The actual line drawn by GSAP -->
                    <div
                        class="absolute left-4 md:left-1/2 top-0 bottom-0 w-0.5 bg-gradient-to-b from-transparent via-gold-500 to-transparent transform md:-translate-x-1/2 timeline-line origin-top">
                    </div>

                    <!-- Event 1: Engagement -->
                    <div class="relative flex flex-col md:flex-row items-center justify-between mb-16 timeline-item">
                        <div
                            class="w-full md:w-[45%] mb-8 md:mb-0 text-left md:text-right pr-0 md:pr-12 pl-12 md:pl-0 order-1">
                            <h3 class="font-serif text-3xl text-gold-400 mb-2">The Engagement</h3>
                            <p class="font-sans text-gold-200 text-lg mb-1">Dec 10, 2026 | 7:00 PM</p>
                            <p class="text-cream opacity-80 text-sm">Hotel Taj Lake Palace</p>
                            <p class="text-xs text-gold-500 mt-2 uppercase tracking-widest">Ring Ceremony</p>
                        </div>
                        <div
                            class="absolute left-4 md:left-1/2 transform -translate-x-1/2 w-8 h-8 bg-royal-900 border-2 border-gold-500 rounded-full z-10 flex items-center justify-center order-2">
                            <div class="w-3 h-3 bg-gold-500 rounded-full"></div>
                        </div>
                        <div class="w-full md:w-[45%] pl-12 md:pl-12 order-3">
                            <div
                                class="bg-royal-800 p-6 rounded-lg border border-gold-600/30 hover:border-gold-500 transition-colors duration-300 shadow-lg group">
                                <i
                                    class="fas fa-ring text-4xl text-gold-500 mb-4 group-hover:scale-110 transition-transform block"></i>
                                <p class="text-sm text-cream opacity-80 italic">"The beginning of forever."</p>
                            </div>
                        </div>
                    </div>

                    <!-- Event 2: Mehendi -->
                    <div class="relative flex flex-col md:flex-row items-center justify-between mb-16 timeline-item">
                        <div class="w-full md:w-[45%] order-3 md:order-1 pl-12 md:pl-0 md:pr-12">
                            <div
                                class="bg-royal-800 p-6 rounded-lg border border-gold-600/30 hover:border-gold-500 transition-colors duration-300 shadow-lg group text-right md:text-left">
                                <i
                                    class="fas fa-hand-sparkles text-4xl text-gold-500 mb-4 group-hover:scale-110 transition-transform block"></i>
                                <p class="text-sm text-cream opacity-80 italic">"Color of love on hands."</p>
                            </div>
                        </div>
                        <div
                            class="absolute left-4 md:left-1/2 transform -translate-x-1/2 w-8 h-8 bg-royal-900 border-2 border-gold-500 rounded-full z-10 flex items-center justify-center order-2">
                            <div class="w-3 h-3 bg-gold-500 rounded-full"></div>
                        </div>
                        <div class="w-full md:w-[45%] mb-8 md:mb-0 text-left pl-12 order-1 md:order-3">
                            <h3 class="font-serif text-3xl text-gold-400 mb-2">Mehendi Ceremony</h3>
                            <p class="font-sans text-gold-200 text-lg mb-1">Dec 11, 2026 | 11:00 AM</p>
                            <p class="text-cream opacity-80 text-sm">Poolside, The Oberoi Udaivilas</p>
                            <p class="text-xs text-gold-500 mt-2 uppercase tracking-widest">Henna & Folk Songs</p>
                        </div>
                    </div>

                    <!-- Event 3: Sangeet -->
                    <div class="relative flex flex-col md:flex-row items-center justify-between mb-16 timeline-item">
                        <div
                            class="w-full md:w-[45%] mb-8 md:mb-0 text-left md:text-right pr-0 md:pr-12 pl-12 md:pl-0 order-1">
                            <h3 class="font-serif text-3xl text-gold-400 mb-2">Sangeet Night</h3>
                            <p class="font-sans text-gold-200 text-lg mb-1">Dec 11, 2026 | 8:00 PM</p>
                            <p class="text-cream opacity-80 text-sm">Grand Ballroom, Udaivilas</p>
                            <p class="text-xs text-gold-500 mt-2 uppercase tracking-widest">Dance & Music</p>
                        </div>
                        <div
                            class="absolute left-4 md:left-1/2 transform -translate-x-1/2 w-8 h-8 bg-royal-900 border-2 border-gold-500 rounded-full z-10 flex items-center justify-center order-2">
                            <div class="w-3 h-3 bg-gold-500 rounded-full"></div>
                        </div>
                        <div class="w-full md:w-[45%] pl-12 order-3">
                            <div
                                class="bg-royal-800 p-6 rounded-lg border border-gold-600/30 hover:border-gold-500 transition-colors duration-300 shadow-lg group">
                                <i
                                    class="fas fa-music text-4xl text-gold-500 mb-4 group-hover:scale-110 transition-transform block"></i>
                                <p class="text-sm text-cream opacity-80 italic">"Dance the night away!"</p>
                            </div>
                        </div>
                    </div>

                    <!-- Event 4: Wedding -->
                    <div class="relative flex flex-col md:flex-row items-center justify-between mb-16 timeline-item">
                        <div class="w-full md:w-[45%] order-3 md:order-1 pl-12 md:pl-0 md:pr-12">
                            <div
                                class="bg-gradient-to-br from-gold-600 to-gold-400 p-6 rounded-lg shadow-2xl group text-right md:text-left transform scale-105 border-2 border-white/20">
                                <i
                                    class="fas fa-dove text-4xl text-royal-900 mb-4 group-hover:scale-110 transition-transform block"></i>
                                <p class="text-sm text-royal-900 font-bold italic">"The Royal Union."</p>
                            </div>
                        </div>
                        <div
                            class="absolute left-4 md:left-1/2 transform -translate-x-1/2 w-12 h-12 bg-gold-500 border-4 border-royal-900 rounded-full z-10 flex items-center justify-center order-2 shadow-[0_0_15px_rgba(212,175,55,0.8)]">
                            <i class="fas fa-heart text-royal-900 text-sm"></i>
                        </div>
                        <div class="w-full md:w-[45%] mb-8 md:mb-0 text-left pl-12 order-1 md:order-3">
                            <h3 class="font-serif text-4xl text-white mb-2">The Wedding</h3>
                            <p class="font-sans text-gold-300 text-lg mb-1">Dec 12, 2026 | 5:00 PM</p>
                            <p class="text-cream opacity-80 text-sm">Jagmandir Island Palace</p>
                            <p class="text-xs text-gold-500 mt-2 uppercase tracking-widest">Pheras & Reception</p>
                        </div>
                    </div>

                </div>
            </div>
        </section>

        <!-- Family & Venue Section (Grid) -->
        <section class="py-24 bg-cream text-royal-900">
            <div class="container mx-auto px-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-12">

                    <!-- Family -->
                    <div class="venue-card opacity-0 transform translate-y-10">
                        <div class="text-center border-4 border-double border-gold-500 p-10 h-full relative">
                            <div class="absolute top-0 left-0 text-gold-500 text-4xl -mt-6 -ml-4"><i
                                    class="fas fa-crown"></i></div>
                            <h2 class="font-serif text-3xl mb-8">Blessings From</h2>

                            <div class="mb-8">
                                <h3 class="font-bold uppercase tracking-widest text-sm mb-2 text-gold-600">Groom's
                                    Parents</h3>
                                <p class="font-serif text-xl">Mr. Rajesh & Mrs. Sunita Sharma</p>
                            </div>

                            <div class="mb-8">
                                <h3 class="font-bold uppercase tracking-widest text-sm mb-2 text-gold-600">Bride's
                                    Parents</h3>
                                <p class="font-serif text-xl">Mr. Vikram & Mrs. Anjali Mehta</p>
                            </div>

                            <p class="font-script text-2xl text-gold-600 mt-8">And Grandparents</p>
                        </div>
                    </div>

                    <!-- Venue Map -->
                    <div class="venue-card opacity-0 transform translate-y-10 delay-200">
                        <div class="h-full bg-white shadow-xl p-4 border border-gold-200 rounded-lg">
                            <h2 class="font-serif text-2xl text-center mb-4 text-royal-900">The Royal Venue</h2>
                            <!-- Interactive Map Placeholder -->
                            <div class="w-full h-64 bg-gray-200 mb-4 relative overflow-hidden group rounded">
                                <iframe
                                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3628.6473090407767!2d73.6826693751429!3d24.576599978111953!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x396cc51e5e050017%3A0xc457335607593d6a!2sThe%20Oberoi%20Udaivilas%2C%20Udaipur!5e0!3m2!1sen!2sin!4v1709400000000!5m2!1sen!2sin"
                                    width="100%" height="100%" style="border:0;" allowfullscreen=""
                                    loading="lazy"></iframe>
                                <div
                                    class="absolute inset-0 bg-gold-500/10 pointer-events-none group-hover:bg-transparent transition-colors">
                                </div>
                            </div>

                            <div class="text-center">
                                <p class="font-serif text-lg mb-4">The Oberoi Udaivilas, Udaipur</p>
                                <a href="https://maps.google.com" target="_blank"
                                    class="inline-block bg-royal-900 text-gold-500 px-6 py-2 rounded-full hover:bg-gold-500 hover:text-royal-900 transition-colors uppercase text-sm tracking-wider font-bold">
                                    <i class="fas fa-location-arrow mr-2"></i> Get Directions
                                </a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>

        <!-- RSVP Section -->
        <section class="py-24 bg-royal-900 relative overflow-hidden">
            <!-- Decorative bg elements -->
            <div class="absolute top-0 right-0 w-64 h-64 opacity-5 pointer-events-none">
                <i class="fas fa-mandala text-[20rem] text-gold-500 animate-spin-slow"></i>
            </div>

            <div class="container mx-auto px-4 relative z-10">
                <div
                    class="max-w-xl mx-auto bg-royal-800 p-8 md:p-12 rounded-lg border border-gold-500/30 shadow-2xl rsvp-container">
                    <div class="text-center mb-8">
                        <i class="fas fa-envelope-open-text text-5xl text-gold-500 mb-4"></i>
                        <h2 class="font-serif text-4xl text-cream mb-2">RSVP</h2>
                        <p class="text-gold-200">Please confirm your presence by November 1st</p>
                    </div>

                    <form id="rsvpForm" class="space-y-6">
                        <div>
                            <label class="block text-gold-400 text-sm uppercase tracking-wider mb-2">Full Name</label>
                            <input type="text"
                                class="w-full bg-royal-900 border-b border-gold-500 text-cream px-4 py-3 focus:outline-none focus:border-gold-300 transition-colors"
                                placeholder="Enter your name" required>
                        </div>

                        <div>
                            <label class="block text-gold-400 text-sm uppercase tracking-wider mb-2">Number of
                                Guests</label>
                            <select
                                class="w-full bg-royal-900 border-b border-gold-500 text-cream px-4 py-3 focus:outline-none cursor-pointer">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-gold-400 text-sm uppercase tracking-wider mb-2">Attending?</label>
                            <div class="flex gap-4 mt-2">
                                <label class="flex items-center cursor-pointer">
                                    <input type="radio" name="attendance"
                                        class="form-radio text-gold-500 focus:ring-gold-500 bg-royal-900 border-gold-500"
                                        checked>
                                    <span class="ml-2 text-cream">Joyfully Accepts</span>
                                </label>
                                <label class="flex items-center cursor-pointer">
                                    <input type="radio" name="attendance"
                                        class="form-radio text-gold-500 focus:ring-gold-500 bg-royal-900 border-gold-500">
                                    <span class="ml-2 text-cream">Regretfully Declines</span>
                                </label>
                            </div>
                        </div>

                        <button type="submit"
                            class="w-full bg-gold-500 text-royal-900 font-bold font-serif py-4 hover:bg-cream transition-colors duration-300 mt-4">
                            SEND CONFIRMATION
                        </button>
                    </form>

                    <!-- Success Message (Hidden by default) -->
                    <div id="rsvpSuccess" class="hidden text-center py-10">
                        <i class="fas fa-check-circle text-6xl text-green-500 mb-4 scale-0 success-icon"></i>
                        <h3 class="font-serif text-3xl text-cream mb-2">Thank You!</h3>
                        <p class="text-gold-200">Your response has been recorded.</p>
                        <p class="text-sm text-gray-400 mt-4">We look forward to seeing you.</p>
                    </div>
                </div>
            </div>
        </section>

        <footer class="bg-black text-center py-10 border-t border-royal-800">
            <h2 class="font-script text-4xl text-gold-500 mb-4">Aarav & Diya</h2>
            <p class="text-gray-500 text-sm uppercase tracking-widest">#AaravDiyaWedding</p>
            <p class="text-gray-700 text-xs mt-8">Designed with ❤️ for the special day</p>
        </footer>
    </main>

    <script>
        // ==================== GSAP ANIMATIONS ====================
        gsap.registerPlugin(ScrollTrigger, TextPlugin);

        // --- PARTICLE SYSTEMS ---

        function createParticles() {
            const container = document.body;
            const particleCount = 30;

            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.classList.add('particle');

                const size = Math.random() * 4 + 1;
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                particle.style.background = '#d4af37';
                particle.style.borderRadius = '50%';
                particle.style.left = `${Math.random() * 100}vw`;
                particle.style.top = `${Math.random() * 100}vh`;

                container.appendChild(particle);

                gsap.to(particle, {
                    y: -100 - Math.random() * 200,
                    x: Math.random() * 50 - 25,
                    opacity: Math.random() * 0.5 + 0.2,
                    duration: Math.random() * 5 + 5,
                    repeat: -1,
                    yoyo: true,
                    ease: "sine.inOut",
                    delay: Math.random() * 5
                });
            }
        }

        function createPetals() {
            const container = document.body;
            const petalCount = 20;
            const petalSVG = "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzAgMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE1LDBDNSwxMCwwLDIwLDE1LDMwQzMwLDIwLDI1LDEwLDE1LDB6IiBmaWxsPSIjZmZjMGNiIiBvcGFjaXR5PSIwLjYiLz48L3N2Zz4=";

            for (let i = 0; i < petalCount; i++) {
                const petal = document.createElement('div');
                petal.classList.add('petal');
                petal.style.backgroundImage = `url('${petalSVG}')`;

                const size = Math.random() * 20 + 10;
                petal.style.width = `${size}px`;
                petal.style.height = `${size}px`;
                petal.style.left = `${Math.random() * 100}vw`;
                petal.style.top = `-50px`;

                container.appendChild(petal);

                // Add falling animation immediately when called
                gsap.to(petal, {
                    y: '110vh',
                    x: `+=${Math.random() * 100 - 50}`,
                    rotation: Math.random() * 360 + 360,
                    duration: Math.random() * 5 + 8, // Vary speed
                    repeat: -1,
                    ease: "none",
                    delay: Math.random() * 5
                });
            }
        }

        // --- ENTRY SEQUENCE ---

        const openBtn = document.getElementById('openBtn');
        const curtainLayer = document.getElementById('curtainLayer');
        const mainContent = document.getElementById('mainContent');
        const audio = document.getElementById('weddingMusic');
        const musicControl = document.getElementById('musicControl');
        const musicIcon = document.getElementById('musicIcon');
        let isPlaying = false;

        // Intro Animation for Button
        gsap.to(".entry-text", {
            y: 0,
            opacity: 1,
            stagger: 0.2,
            duration: 1,
            ease: "power3.out",
            delay: 0.5
        });

        // Open Interaction
        openBtn.addEventListener('click', () => {
            // 1. Play Music
            audio.volume = 0.5;
            audio.play().then(() => {
                isPlaying = true;
                musicControl.classList.remove('hidden');
            }).catch(e => console.log("Audio play failed", e));

            // GSAP Timeline for Realistic Opening
            const openTl = gsap.timeline({
                onComplete: () => {
                    curtainLayer.style.display = 'none';
                }
            });

            // A. Fade out button container
            openTl.to("#entryContent", { opacity: 0, duration: 0.5, ease: "power2.out" });

            // B. Ignite the glow
            openTl.to("#centerGlow", { opacity: 0.8, duration: 1, scale: 1.5 }, "<");

            // C. Realistic Curtain Pull (Skew + Scale + Move)
            // Left Curtain
            openTl.to(".curtain-left", {
                xPercent: -100,
                skewX: 10, // Simulate drag force
                scaleX: 0.9, // Fabric compression
                duration: 2.5,
                ease: "power4.inOut"
            }, "open");

            // Right Curtain
            openTl.to(".curtain-right", {
                xPercent: 100,
                skewX: -10, // Simulate drag force
                scaleX: 0.9,
                duration: 2.5,
                ease: "power4.inOut"
            }, "open");

            // D. Reveal Main Content (Blur Focus)
            openTl.to("#mainContent", {
                opacity: 1,
                filter: "blur(0px)",
                duration: 2.5,
                ease: "power2.out"
            }, "-=2.0");

            // E. Reset Curtain Props (optional, cleanup)
            openTl.set(".curtain-panel", { skewX: 0, scaleX: 1 });

            // Start ambient effects
            createParticles();
            createPetals();
            runHeroAnimations();
        });

        // Music Toggle
        musicControl.addEventListener('click', () => {
            if (isPlaying) {
                audio.pause();
                musicIcon.classList.remove('fa-music');
                musicIcon.classList.add('fa-volume-mute');
                musicControl.classList.remove('animate-pulse');
            } else {
                audio.play();
                musicIcon.classList.add('fa-music');
                musicIcon.classList.remove('fa-volume-mute');
                musicControl.classList.add('animate-pulse');
            }
            isPlaying = !isPlaying;
        });

        // --- SCROLL ANIMATIONS ---

        function runHeroAnimations() {
            // Hero Elements Reveal
            gsap.to(".gsap-hero-reveal", {
                y: 0,
                opacity: 1,
                stagger: 0.2,
                duration: 1.5,
                ease: "power3.out",
                delay: 0.5
            });

            // Parallax Background
            gsap.to(".parallax-bg", {
                scrollTrigger: {
                    trigger: "body",
                    start: "top top",
                    end: "bottom top",
                    scrub: true
                },
                y: 200,
                scale: 1
            });
        }

        // Rest of scroll animations
        gsap.to(".section-title", {
            scrollTrigger: { trigger: ".section-title", start: "top 80%" },
            opacity: 1, y: 0, duration: 1
        });

        gsap.to(".couple-card", {
            scrollTrigger: { trigger: ".couple-card", start: "top 75%" },
            x: 0, opacity: 1, stagger: 0.3, duration: 1, ease: "back.out(1.7)"
        });

        ScrollTrigger.create({
            trigger: "#storyTypewriter",
            start: "top 80%",
            onEnter: () => {
                gsap.to("#storyTypewriter", {
                    text: {
                        value: "Love is not just about finding the right person, but creating the right relationship. It's not about how much love you have in the beginning but how much love you build until the end. We are starting our forever, and we want you to be part of it."
                    },
                    duration: 6,
                    ease: "none"
                });
            }
        });

        gsap.from(".timeline-line", {
            scrollTrigger: {
                trigger: ".timeline-item",
                start: "top 70%",
                end: "bottom 20%",
                scrub: 1
            },
            scaleY: 0,
            transformOrigin: "top center",
            ease: "none"
        });

        gsap.utils.toArray(".timeline-item").forEach((item, i) => {
            gsap.from(item, {
                scrollTrigger: {
                    trigger: item,
                    start: "top 85%"
                },
                y: 50,
                opacity: 0,
                duration: 1,
                delay: i * 0.1
            });
        });

        gsap.utils.toArray(".venue-card").forEach((card) => {
            gsap.to(card, {
                scrollTrigger: { trigger: card, start: "top 85%" },
                y: 0, opacity: 1, duration: 1, ease: "power2.out"
            });
        });

        const form = document.getElementById('rsvpForm');
        form.addEventListener('submit', (e) => {
            e.preventDefault();
            gsap.to(form, {
                opacity: 0,
                y: -20,
                duration: 0.5,
                onComplete: () => {
                    form.style.display = 'none';
                    const success = document.getElementById('rsvpSuccess');
                    success.classList.remove('hidden');
                    gsap.fromTo(".success-icon",
                        { scale: 0, rotation: -180 },
                        { scale: 1, rotation: 0, duration: 0.8, ease: "elastic.out(1, 0.5)" }
                    );
                }
            });
        });

    </script>
</body>

</html>

CSS:

The styling is done inside the same file using internal CSS along with Tailwind CSS classes. This helps maintain a clean and premium design without needing external files.

The design uses a royal wedding theme with colors like gold, cream, maroon, and dark elegant shades.

Google Fonts such as Great Vibes, Playfair Display, and Lato are used to enhance typography and give a luxurious feel.

Several visual effects are created using CSS:

A custom animation called spin-slow is also used to rotate decorative elements slowly in the background, adding subtle motion to the design.

JavaScript:

The functionality is written using JavaScript along with GSAP (GreenSock Animation Platform), ScrollTrigger, and TextPlugin libraries.

Since everything is inside a single file, JavaScript is added at the bottom and handles all animations and interactions.

When the user clicks the "openBtn", a cinematic sequence starts:

Two important functions are used:

Scroll-based animations are also applied so that sections appear smoothly while scrolling.

The TextPlugin is used to create a typewriter effect for the wedding story section.

Finally, the RSVP form is handled using JavaScript. When the user submits the form, it fades out and a success message is displayed with a smooth animation.

Conclusion

This project shows how HTML, CSS, and JavaScript can be combined inside a single file structure to create a modern and premium wedding invitation website.

Instead of a traditional static invitation card, this digital version creates a more interactive and emotional experience for guests. The design can be easily customized with different colors, fonts, background music, and animations to match any wedding theme. It can also be reused for engagements, birthdays, or other special events.

Code Author: @Developergtm

Tags

#css#ecommerce#design#ecommerce-website#javascript