# index.php ```php Hassaan & Sania | Wedding Album /* OPENING SCREEN */ #envelope-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 22px; overflow: hidden; background: #f8f7f3; transition: opacity 1.2s ease, visibility 1.2s ease, background 1.15s ease; cursor: pointer; } #envelope-overlay.hide { opacity: 0; visibility: hidden; } #envelope-overlay.to-black { background: #000; } .black-transition { position: fixed; inset: 0; z-index: 99998; background: #000; opacity: 0; visibility: hidden; transition: opacity 0.9s ease, visibility 0.9s ease; } .black-transition.show { opacity: 1; visibility: visible; } .envelope-scene { position: relative; width: min(900px, 96vw); min-height: min(860px, 95vh); display: flex; align-items: center; justify-content: center; } .scene-title { position: absolute; top: 0%; left: 50%; transform: translateX(-50%); text-align: center; color: #111; font-size: clamp(26px, 4vw, 60px); font-style: italic; font-family: "Times New Roman", Georgia, serif; letter-spacing: 0.4px; line-height: 1.08; font-weight: 400; } .scene-title span { display: block; } .tap-bottom { position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); font-size: clamp(24px, 3.2vw, 50px); letter-spacing: 1.4px; text-transform: uppercase; color: #111; text-align: center; width: 100%; pointer-events: none; } .envelope-area { position: relative; width: min(620px, 78vw); height: min(430px, 55vw); min-height: 240px; margin: 0 auto; perspective: 1800px; } .open-target { position: absolute; inset: 0; cursor: pointer; border: 0; background: transparent; z-index: 20; padding: 0; } .floral { position: absolute; width: clamp(120px, 14vw, 180px); height: clamp(220px, 28vw, 320px); pointer-events: none; z-index: 16; } .floral.left { left: -6%; top: 8%; transform: rotate(-7deg); } .floral.right { right: -6%; bottom: 5%; transform: rotate(8deg); } .stem { position: absolute; width: 4px; border-radius: 999px; background: linear-gradient(to bottom, #6f8440, #b8c766); transform-origin: top center; box-shadow: 0 0 0 1px rgba(255,255,255,0.12); } .floral.left .stem.s1 { left: 54px; top: 24px; height: 174px; transform: rotate(-8deg); } .floral.left .stem.s2 { left: 72px; top: 38px; height: 160px; transform: rotate(7deg); } .floral.left .stem.s3 { left: 98px; top: 16px; height: 186px; transform: rotate(14deg); } .floral.left .stem.s4 { left: 114px; top: 42px; height: 150px; transform: rotate(2deg); } .floral.right .stem.s1 { right: 46px; top: 58px; height: 172px; transform: rotate(16deg); } .floral.right .stem.s2 { right: 68px; top: 30px; height: 190px; transform: rotate(5deg); } .floral.right .stem.s3 { right: 94px; top: 42px; height: 162px; transform: rotate(-8deg); } .floral.right .stem.s4 { right: 26px; top: 20px; height: 194px; transform: rotate(20deg); } .bloom { position: absolute; width: 64px; height: 64px; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.10)); } .bloom::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 18%, #fffdf8 0 20%, transparent 21%), radial-gradient(circle at 82% 38%, #f7f2e1 0 20%, transparent 21%), radial-gradient(circle at 82% 68%, #f3edd9 0 20%, transparent 21%), radial-gradient(circle at 50% 84%, #f7f2e1 0 20%, transparent 21%), radial-gradient(circle at 18% 68%, #f3edd9 0 20%, transparent 21%), radial-gradient(circle at 18% 38%, #f7f2e1 0 20%, transparent 21%), radial-gradient(circle at 50% 50%, #e9d9a8 0 11%, #cbb374 12%, #f9f6eb 13%, #f5f0df 24%, transparent 25%); border-radius: 50%; } .bloom::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e7d28f, #c8a96b 70%, #b28d45 100%); box-shadow: 0 0 0 3px rgba(255,255,255,0.22); } .floral.left .b1 { left: 18px; top: 106px; } .floral.left .b2 { left: 64px; top: 92px; } .floral.left .b3 { left: 44px; top: 142px; } .floral.right .b1 { right: 30px; top: 120px; } .floral.right .b2 { right: 72px; top: 146px; } .floral.right .b3 { right: 20px; top: 170px; } .tiny-bloom { position: absolute; width: 22px; height: 22px; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08)); } .tiny-bloom::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 15%, #fffdf8 0 16%, transparent 17%), radial-gradient(circle at 82% 38%, #f6f0df 0 16%, transparent 17%), radial-gradient(circle at 82% 68%, #f2ead5 0 16%, transparent 17%), radial-gradient(circle at 50% 85%, #f6f0df 0 16%, transparent 17%), radial-gradient(circle at 18% 68%, #f2ead5 0 16%, transparent 17%), radial-gradient(circle at 18% 38%, #f6f0df 0 16%, transparent 17%), radial-gradient(circle at 50% 50%, #ddc67b 0 10%, #c5a45a 11%, transparent 12%); border-radius: 50%; } .floral.left .t1 { left: 86px; top: 42px; } .floral.left .t2 { left: 100px; top: 28px; } .floral.left .t3 { left: 114px; top: 44px; } .floral.right .t1 { right: 104px; top: 84px; } .floral.right .t2 { right: 88px; top: 66px; } .floral.right .t3 { right: 74px; top: 86px; } .droop { position: absolute; width: 5px; border-radius: 999px; background: linear-gradient(to bottom, #7d8e3e, #bccb5c); transform-origin: top center; opacity: 0.95; } .floral.left .d1 { left: 32px; top: 98px; height: 140px; transform: rotate(8deg); } .floral.left .d2 { left: 142px; top: 96px; height: 154px; transform: rotate(-6deg); } .floral.right .d1 { right: 24px; top: 126px; height: 162px; transform: rotate(8deg); } .floral.right .d2 { right: 108px; top: 120px; height: 144px; transform: rotate(-10deg); } .envelope { position: absolute; inset: 0; filter: drop-shadow(0 28px 34px rgba(0,0,0,0.12)); } .env-base { position: absolute; left: 50%; bottom: 0; width: 100%; height: 100%; transform: translateX(-50%); background: linear-gradient(180deg, #f4f1ea 0%, #ece7de 100%); border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(140, 132, 120, 0.05), 0 10px 22px rgba(0,0,0,0.05); overflow: hidden; } .env-base::before { content: ""; position: absolute; left: 0; bottom: 0; width: 51%; height: 68%; background: linear-gradient(135deg, #f7f4ee 0%, #eeebe2 100%); clip-path: polygon(0 100%, 0 0, 100% 100%); } .env-base::after { content: ""; position: absolute; right: 0; bottom: 0; width: 51%; height: 68%; background: linear-gradient(225deg, #f7f4ee 0%, #eeebe2 100%); clip-path: polygon(100% 100%, 0 100%, 100% 0); } .env-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 48%; background: linear-gradient(180deg, #f0ebe3 0%, #e5dfd5 100%); clip-path: polygon(0 100%, 50% 0, 100% 100%); z-index: 3; } .env-letter { position: absolute; left: 50%; bottom: 34px; width: 84%; height: 68%; transform: translateX(-50%) translateY(34px); background: linear-gradient(180deg, #fffdfa 0%, #f5f0e9 100%); border-radius: 1px; box-shadow: inset 0 0 0 1px rgba(165, 155, 145, 0.08), 0 10px 18px rgba(0,0,0,0.08); z-index: 2; transition: transform 1.15s cubic-bezier(.22,1,.36,1), opacity 0.55s ease; opacity: 0.18; } .env-letter::before { content: ""; position: absolute; inset: 18px 20px auto 20px; height: 2px; background: linear-gradient(to right, transparent, rgba(0,0,0,0.08), transparent); } .env-flap { position: absolute; left: 0; top: 0; width: 100%; height: 66%; transform-origin: top center; transform-style: preserve-3d; transition: transform 1.18s cubic-bezier(.22,1,.36,1); z-index: 10; } .env-flap::before { content: ""; position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); background: linear-gradient(180deg, #f5f1ea 0%, #ebe5db 100%); box-shadow: inset 0 -1px 0 rgba(145, 135, 122, 0.1); } .env-seal { position: absolute; left: 50%; top: 57%; width: clamp(62px, 7vw, 74px); height: clamp(62px, 7vw, 74px); transform: translate(-50%, -50%); border-radius: 999px; z-index: 14; background: radial-gradient(circle at 35% 30%, #323232 0%, #111 60%, #050505 100%); box-shadow: inset 0 1px 2px rgba(255,255,255,0.12), 0 10px 18px rgba(0,0,0,0.16); display: flex; align-items: center; justify-content: center; transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s; } .env-seal::before { content: "S&H"; color: rgba(235,235,235,0.92); font-size: clamp(18px, 2vw, 24px); font-style: italic; letter-spacing: 0.6px; } .envelope.open .env-flap { transform: rotateX(178deg); } .envelope.open .env-letter { transform: translateX(-50%) translateY(-12px); opacity: 0.06; } .envelope.open .env-seal { opacity: 0; transform: translate(-50%, -50%) scale(0.82); }

Hassaan & Sania

A Celebration of Love, Family & New Beginnings

31st May 2026

Thank You For Celebrating With Us

To our beloved family and friends, thank you for sharing your love, support, prayers, and blessings.

Every smile, every embrace, and every moment spent together helped make our wedding truly unforgettable.

As we begin our new life together, we are grateful to have such wonderful people surrounding us.

This website was created so we can all relive these beautiful memories for years to come.

With Love,
Hassaan & Sania

Our Memories

Our Story

Every great love story begins with a single moment. What started as friendship became love, and love became a promise for forever. On 31st May 2026 we began our greatest adventure together.

Leave Us A Message


``` # Folder Structure ```text wedding-album/ index.php assets/ └── images/ └── hero.jpg ← YOUR uploaded photo photos/ ├── wedding/ │ ├── photo1.jpg │ ├── photo2.jpg │ └── ... │ └── reception/ ├── photo1.jpg ├── photo2.jpg └── ... ``` Save your uploaded staircase portrait as: `assets/images/hero.jpg` The code above keeps the portrait visible in full on the welcome screen using `object-fit: contain`, so the bride and groom won't be cropped or zoomed in when guests first visit the site.