<!DOCTYPE html>
<html lang="ne">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>शुभ विवाह | बिहे</title>
<meta
name="description"
content="शुभ विवाह — हाम्रो विशेष दिनमा यहाँलाई हार्दिक निमन्त्रणा।"
/>
<!-- Google Font -->
<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=Noto+Sans+Devanagari:wght@400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<style>
:root {
--red: #8d1725;
--red-dark: #5c0b16;
--gold: #d5a23a;
--gold-light: #f5d98b;
--cream: #fffaf0;
--cream-2: #f8edda;
--text: #3c2422;
--muted: #765e5b;
--white: #fff;
--shadow: 0 20px 60px rgba(70, 20, 20, .15);
--radius: 24px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Noto Sans Devanagari", sans-serif;
color: var(--text);
background: var(--cream);
overflow-x: hidden;
}
body.no-scroll {
overflow: hidden;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
}
/* =========================
INTRO SCREEN
========================= */
.intro {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
background:
radial-gradient(circle at 50% 30%, rgba(213,162,58,.25), transparent 35%),
linear-gradient(135deg, #5a0813, #8d1725 55%, #4d0711);
transition: opacity .8s ease, visibility .8s ease;
}
.intro.hide {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.intro-inner {
padding: 30px;
animation: introUp 1.2s ease;
}
.intro-symbol {
width: 100px;
height: 100px;
margin: 0 auto 25px;
border: 1px solid rgba(255,255,255,.5);
border-radius: 50%;
display: grid;
place-items: center;
color: var(--gold-light);
font-size: 42px;
box-shadow: 0 0 0 12px rgba(213,162,58,.06);
}
.intro-small {
color: #f8d98a;
letter-spacing: 4px;
font-size: 13px;
margin-bottom: 10px;
}
.intro h1 {
font-size: clamp(38px, 8vw, 75px);
font-weight: 700;
line-height: 1.15;
margin-bottom: 15px;
}
.intro p {
opacity: .85;
font-size: 16px;
margin-bottom: 35px;
}
.open-btn {
border: 1px solid var(--gold-light);
background: var(--gold);
color: #4b0c13;
padding: 14px 30px;
border-radius: 100px;
font-weight: 800;
cursor: pointer;
transition: .3s;
box-shadow: 0 12px 35px rgba(0,0,0,.25);
}
.open-btn:hover {
transform: translateY(-3px);
background: #f0c968;
}
@keyframes introUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =========================
DECORATIONS
========================= */
.mandala {
position: absolute;
width: 500px;
height: 500px;
border: 1px solid rgba(213,162,58,.25);
border-radius: 50%;
pointer-events: none;
}
.mandala::before,
.mandala::after {
content: "";
position: absolute;
inset: 35px;
border: 1px dashed rgba(213,162,58,.25);
border-radius: 50%;
}
.mandala::after {
inset: 90px;
border-style: solid;
}
.mandala-left {
left: -270px;
top: 40%;
}
.mandala-right {
right: -270px;
top: 20%;
}
.flower {
position: absolute;
font-size: 30px;
animation: floatFlower 5s ease-in-out infinite;
opacity: .75;
pointer-events: none;
}
.f1 { left: 7%; top: 15%; }
.f2 { right: 8%; top: 30%; animation-delay: 1s; }
.f3 { left: 15%; bottom: 20%; animation-delay: 2s; }
.f4 { right: 15%; bottom: 15%; animation-delay: 3s; }
@keyframes floatFlower {
0%, 100% { transform: translateY(0) rotate(0); }
50% { transform: translateY(-15px) rotate(8deg); }
}
/* =========================
NAVBAR
========================= */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding: 18px 5%;
transition: .35s;
}
.navbar.scrolled {
background: rgba(255,250,240,.92);
backdrop-filter: blur(15px);
box-shadow: 0 5px 25px rgba(0,0,0,.08);
padding: 12px 5%;
}
.nav-inner {
max-width: 1150px;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
font-size: 22px;
font-weight: 800;
color: var(--red);
}
.logo span {
color: var(--gold);
}
.nav-links {
display: flex;
gap: 25px;
list-style: none;
}
.nav-links a {
font-size: 14px;
font-weight: 600;
transition: .25s;
}
.nav-links a:hover {
color: var(--red);
}
.nav-actions {
display: flex;
gap: 8px;
}
.icon-btn {
width: 40px;
height: 40px;
border: 1px solid rgba(141,23,37,.15);
border-radius: 50%;
background: transparent;
cursor: pointer;
display: grid;
place-items: center;
color: var(--red);
}
.menu-btn {
display: none;
}
/* =========================
HERO
========================= */
.hero {
min-height: 100vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
background:
linear-gradient(rgba(255,250,240,.75), rgba(255,250,240,.92)),
radial-gradient(circle at center, #f8d98a 0, transparent 35%);
}
.hero-content {
max-width: 900px;
padding: 130px 25px 80px;
position: relative;
z-index: 2;
}
.eyebrow {
color: var(--red);
letter-spacing: 3px;
font-size: 14px;
font-weight: 700;
margin-bottom: 20px;
}
.hero h1 {
font-size: clamp(48px, 9vw, 105px);
line-height: 1.05;
color: var(--red);
margin-bottom: 20px;
font-weight: 800;
}
.hero h1 span {
color: var(--gold);
display: block;
font-family: "Playfair Display", serif;
font-style: italic;
font-size: .55em;
margin: 12px 0;
}
.hero-subtitle {
max-width: 650px;
margin: auto;
color: var(--muted);
line-height: 2;
font-size: 17px;
}
.date-pill {
display: inline-flex;
margin-top: 30px;
padding: 12px 25px;
border-radius: 100px;
color: white;
background: var(--red);
box-shadow: 0 10px 30px rgba(141,23,37,.25);
font-weight: 700;
}
.scroll-down {
position: absolute;
bottom: 25px;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
color: var(--muted);
animation: bounce 2s infinite;
}
@keyframes bounce {
0%,100% { transform: translate(-50%,0); }
50% { transform: translate(-50%,8px); }
}
/* =========================
SECTIONS
========================= */
section {
padding: 100px 6%;
position: relative;
overflow: hidden;
}
.section-inner {
max-width: 1100px;
margin: auto;
}
.section-title {
text-align: center;
margin-bottom: 60px;
}
.section-title .small {
color: var(--gold);
font-weight: 800;
letter-spacing: 3px;
font-size: 13px;
margin-bottom: 10px;
}
.section-title h2 {
font-size: clamp(30px, 5vw, 50px);
color: var(--red);
margin-bottom: 12px;
}
.section-title p {
color: var(--muted);
}
/* =========================
COUPLE
========================= */
.couple {
background: white;
}
.couple-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 40px;
}
.person {
text-align: center;
}
.person-photo {
width: 230px;
height: 230px;
margin: 0 auto 25px;
border-radius: 50%;
padding: 7px;
background: linear-gradient(135deg, var(--gold), #fff0b9, var(--gold));
box-shadow: var(--shadow);
}
.person-photo img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
border: 5px solid white;
}
.person h3 {
font-size: 27px;
color: var(--red);
margin-bottom: 5px;
}
.person p {
color: var(--muted);
}
.heart {
width: 70px;
height: 70px;
border-radius: 50%;
background: var(--red);
color: white;
display: grid;
place-items: center;
font-size: 28px;
box-shadow: 0 10px 35px rgba(141,23,37,.3);
animation: heartbeat 1.7s infinite;
}
@keyframes heartbeat {
0%,100% { transform: scale(1); }
15% { transform: scale(1.1); }
30% { transform: scale(1); }
}
/* =========================
COUNTDOWN
========================= */
.countdown-section {
background:
linear-gradient(rgba(93,8,20,.93), rgba(93,8,20,.97)),
radial-gradient(circle, var(--gold), transparent);
color: white;
text-align: center;
}
.countdown-section .section-title h2,
.countdown-section .section-title p {
color: white;
}
.countdown {
display: grid;
grid-template-columns: repeat(4, 1fr);
max-width: 750px;
margin: auto;
gap: 15px;
}
.time-box {
padding: 25px 10px;
border: 1px solid rgba(255,255,255,.2);
background: rgba(255,255,255,.07);
backdrop-filter: blur(10px);
border-radius: 18px;
}
.time-box strong {
display: block;
font-size: clamp(35px, 6vw, 60px);
color: var(--gold-light);
line-height: 1;
}
.time-box span {
font-size: 12px;
opacity: .75;
}
/* =========================
EVENTS
========================= */
.events {
background: var(--cream);
}
.event-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.event-card {
background: white;
border-radius: var(--radius);
padding: 35px 25px;
text-align: center;
box-shadow: 0 10px 40px rgba(90,20,20,.07);
border: 1px solid rgba(213,162,58,.15);
transition: .35s;
}
.event-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow);
}
.event-icon {
width: 65px;
height: 65px;
border-radius: 50%;
margin: 0 auto 20px;
background: #fff4d8;
color: var(--red);
display: grid;
place-items: center;
font-size: 28px;
}
.event-card h3 {
color: var(--red);
margin-bottom: 12px;
font-size: 21px;
}
.event-card .time {
color: var(--gold);
font-weight: 800;
margin-bottom: 8px;
}
.event-card p {
color: var(--muted);
font-size: 14px;
line-height: 1.8;
}
/* =========================
STORY
========================= */
.story {
background: white;
}
.story-content {
max-width: 760px;
margin: auto;
text-align: center;
}
.story-content p {
color: var(--muted);
line-height: 2.1;
font-size: 17px;
}
.quote {
margin-top: 35px;
padding: 30px;
border-top: 1px solid #e7d8bb;
border-bottom: 1px solid #e7d8bb;
font-family: "Playfair Display", serif;
font-style: italic;
font-size: 25px;
color: var(--red);
}
/* =========================
GALLERY
========================= */
.gallery {
background: var(--cream-2);
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.gallery-item {
height: 300px;
overflow: hidden;
border-radius: 18px;
cursor: pointer;
position: relative;
}
.gallery-item:nth-child(2) {
height: 380px;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: .6s;
}
.gallery-item:hover img {
transform: scale(1.08);
}
/* =========================
LOCATION
========================= */
.location {
background: white;
}
.location-box {
max-width: 850px;
margin: auto;
background: var(--cream);
border-radius: 30px;
padding: 45px;
text-align: center;
border: 1px solid #ead9b9;
}
.location-icon {
font-size: 45px;
margin-bottom: 15px;
}
.location-box h3 {
color: var(--red);
font-size: 28px;
margin-bottom: 10px;
}
.location-box p {
color: var(--muted);
line-height: 1.9;
}
.map-btn {
display: inline-flex;
margin-top: 25px;
background: var(--red);
color: white;
padding: 13px 25px;
border-radius: 100px;
font-weight: 700;
transition: .3s;
}
.map-btn:hover {
background: var(--red-dark);
transform: translateY(-2px);
}
/* =========================
RSVP
========================= */
.rsvp {
background:
radial-gradient(circle at 20% 20%, rgba(213,162,58,.12), transparent 25%),
var(--cream);
}
.rsvp-box {
max-width: 700px;
margin: auto;
text-align: center;
}
.rsvp-box h2 {
color: var(--red);
font-size: 38px;
margin-bottom: 15px;
}
.rsvp-box p {
color: var(--muted);
margin-bottom: 25px;
line-height: 1.8;
}
.rsvp-btn {
display: inline-flex;
padding: 15px 30px;
border-radius: 100px;
background: var(--gold);
color: #4d2913;
font-weight: 800;
box-shadow: 0 10px 30px rgba(213,162,58,.25);
transition: .3s;
}
.rsvp-btn:hover {
transform: translateY(-3px);
}
/* =========================
FOOTER
========================= */
footer {
background: #4e0812;
color: white;
text-align: center;
padding: 55px 20px;
}
footer .om {
color: var(--gold-light);
font-size: 35px;
margin-bottom: 15px;
}
footer h3 {
font-size: 27px;
margin-bottom: 8px;
}
footer p {
opacity: .7;
font-size: 14px;
}
.footer-line {
width: 70px;
height: 1px;
background: var(--gold);
margin: 25px auto;
}
.made {
margin-top: 25px;
opacity: .5;
font-size: 12px;
}
/* =========================
REVEAL ANIMATION
========================= */
.reveal {
opacity: 0;
transform: translateY(35px);
transition: opacity .8s ease, transform .8s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* =========================
MUSIC BUTTON
========================= */
.music-btn {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 999;
width: 52px;
height: 52px;
border-radius: 50%;
border: 0;
color: white;
background: var(--red);
cursor: pointer;
box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.music-btn.playing {
animation: musicPulse 1.2s infinite;
}
@keyframes musicPulse {
50% {
box-shadow: 0 0 0 12px rgba(141,23,37,.1);
}
}
/* =========================
LIGHTBOX
========================= */
.lightbox {
position: fixed;
inset: 0;
z-index: 9998;
display: flex;
align-items: center;
justify-content: center;
background: rgba(20,5,5,.92);
opacity: 0;
visibility: hidden;
transition: .3s;
padding: 20px;
}
.lightbox.active {
opacity: 1;
visibility: visible;
}
.lightbox img {
max-width: 95%;
max-height: 85vh;
border-radius: 15px;
object-fit: contain;
}
.lightbox-close {
position: absolute;
top: 20px;
right: 25px;
color: white;
font-size: 35px;
cursor: pointer;
}
/* =========================
DARK MODE
========================= */
body.dark {
--cream: #160d0d;
--cream-2: #211313;
--text: #f8eadd;
--muted: #cbb5ad;
--white: #1e1212;
background: #160d0d;
}
body.dark .navbar.scrolled,
body.dark .couple,
body.dark .story,
body.dark .location {
background: rgba(28,15,15,.94);
}
body.dark .event-card,
body.dark .location-box {
background: #241414;
border-color: rgba(213,162,58,.15);
}
body.dark .navbar.scrolled .nav-links a,
body.dark .logo {
color: #f6dca2;
}
body.dark .icon-btn {
color: #f6dca2;
border-color: rgba(246,220,162,.2);
}
/* =========================
MOBILE
========================= */
@media (max-width: 800px) {
.nav-links {
position: fixed;
top: 70px;
left: 15px;
right: 15px;
padding: 25px;
flex-direction: column;
background: rgba(255,250,240,.98);
border-radius: 20px;
box-shadow: var(--shadow);
transform: translateY(-20px);
opacity: 0;
pointer-events: none;
transition: .3s;
}
.nav-links.open {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.dark .nav-links {
background: #241414;
}
.menu-btn {
display: grid;
}
.couple-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.heart {
margin: auto;
}
.event-grid {
grid-template-columns: 1fr;
}
.gallery-grid {
grid-template-columns: 1fr 1fr;
}
.gallery-item,
.gallery-item:nth-child(2) {
height: 220px;
}
.countdown {
grid-template-columns: repeat(2, 1fr);
}
.location-box {
padding: 30px 20px;
}
}
@media (max-width: 500px) {
section {
padding: 75px 5%;
}
.hero-content {
padding-top: 120px;
}
.person-photo {
width: 190px;
height: 190px;
}
.gallery-grid {
grid-template-columns: 1fr;
}
.gallery-item,
.gallery-item:nth-child(2) {
height: 300px;
}
.mandala {
display: none;
}
}
</style>
</head>
<body class="no-scroll">
<!-- =========================
INTRO
========================== -->
<div class="intro" id="intro">
<div class="intro-inner">
<div class="intro-symbol">ॐ</div>
<div class="intro-small">शुभ विवाह</div>
<h1 id="introNames">
हाम्रो बिहे
</h1>
<p>मायाको यो सुन्दर यात्रामा तपाईंलाई हार्दिक निमन्त्रणा।</p>
<button class="open-btn" id="openInvitation">
💌 निमन्त्रणा खोल्नुहोस्
</button>
</div>
</div>
<!-- =========================
NAVBAR
========================== -->
<header class="navbar" id="navbar">
<div class="nav-inner">
<a href="#home" class="logo">
हाम्रो <span>बिहे</span>
</a>
<ul class="nav-links" id="navLinks">
<li><a href="#home">गृहपृष्ठ</a></li>
<li><a href="#couple">वर–वधू</a></li>
<li><a href="#events">कार्यक्रम</a></li>
<li><a href="#gallery">तस्बिरहरू</a></li>
<li><a href="#location">स्थान</a></li>
</ul>
<div class="nav-actions">
<button class="icon-btn" id="themeBtn" aria-label="Dark mode">
☾
</button>
<button class="icon-btn menu-btn" id="menuBtn" aria-label="Menu">
☰
</button>
</div>
</div>
</header>
<!-- =========================
HERO
========================== -->
<main>
<section class="hero" id="home">
<div class="mandala mandala-left"></div>
<div class="mandala mandala-right"></div>
<div class="flower f1">🌸</div>
<div class="flower f2">🌺</div>
<div class="flower f3">🌼</div>
<div class="flower f4">🌸</div>
<div class="hero-content reveal">
<div class="eyebrow">
ॐ श्री गणेशाय नमः
</div>
<h1>
<span>दुई मुटु</span>
एक जीवन
</h1>
<p class="hero-subtitle">
दुई आत्मा, एउटै सपना र जीवनभरको साथ।
हाम्रो जीवनको सबैभन्दा विशेष दिनमा
यहाँको उपस्थितिले हाम्रो खुसी अझ विशेष बनाउनेछ।
</p>
<div class="date-pill" id="heroDate">
२०८३ साल — शुभ विवाह
</div>
</div>
<div class="scroll-down">
↓ तल हेर्नुहोस्
</div>
</section>
<!-- =========================
COUPLE
========================== -->
<section class="couple" id="couple">
<div class="section-inner">
<div class="section-title reveal">
<div class="small">THE HAPPY COUPLE</div>
<h2>हाम्रो मिलन</h2>
<p>दुई परिवार, एउटा नयाँ सुरुवात।</p>
</div>
<div class="couple-grid">
<div class="person reveal">
<div class="person-photo">
<img
id="groomImage"
src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=700&q=80"
alt="वर"
/>
</div>
<h3 id="groomName">प्रबिन</h3>
<p>वर</p>
</div>
<div class="heart">♥</div>
<div class="person reveal">
<div class="person-photo">
<img
id="brideImage"
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=700&q=80"
alt="वधू"
/>
</div>
<h3 id="brideName">प्रियंका</h3>
<p>वधू</p>
</div>
</div>
</div>
</section>
<!-- =========================
COUNTDOWN
========================== -->
<section class="countdown-section">
<div class="section-inner">
<div class="section-title reveal">
<div class="small">COUNTING THE DAYS</div>
<h2>हाम्रो विशेष दिन</h2>
<p>अब धेरै समय बाँकी छैन...</p>
</div>
<div class="countdown reveal">
<div class="time-box">
<strong id="days">00</strong>
<span>दिन</span>
</div>
<div class="time-box">
<strong id="hours">00</strong>
<span>घण्टा</span>
</div>
<div class="time-box">
<strong id="minutes">00</strong>
<span>मिनेट</span>
</div>
<div class="time-box">
<strong id="seconds">00</strong>
<span>सेकेन्ड</span>
</div>
</div>
</div>
</section>
<!-- =========================
EVENTS
========================== -->
<section class="events" id="events">
<div class="section-inner">
<div class="section-title reveal">
<div class="small">WEDDING EVENTS</div>
<h2>विवाह कार्यक्रम</h2>
<p>हाम्रो विशेष दिनका केही महत्वपूर्ण क्षणहरू।</p>
</div>
<div class="event-grid">
<article class="event-card reveal">
<div class="event-icon">🌿</div>
<h3>मेहन्दी</h3>
<div class="time">
बिहान १०:०० बजे
</div>
<p>
प्रेम र खुसीका रंगहरूसँग
मेहन्दी कार्यक्रम।
</p>
</article>
<article class="event-card reveal">
<div class="event-icon">💍</div>
<h3>विवाह समारोह</h3>
<div class="time">
दिउँसो २:०० बजे
</div>
<p>
शुभ मुहूर्तमा वैवाहिक संस्कार
तथा शुभ विवाह समारोह।
</p>
</article>
<article class="event-card reveal">
<div class="event-icon">🍽️</div>
<h3>विवाह भोज</h3>
<div class="time">
साँझ ६:०० बजे
</div>
<p>
आफन्त तथा प्रियजनसँग
रमाइलो भेटघाट र भोज।
</p>
</article>
</div>
</div>
</section>
<!-- =========================
STORY
========================== -->
<section class="story">
<div class="section-inner">
<div class="section-title reveal">
<div class="small">OUR STORY</div>
<h2>हाम्रो कथा</h2>
</div>
<div class="story-content reveal">
<p>
कहिलेकाहीँ जीवनमा आउने एउटा व्यक्ति नै
सम्पूर्ण संसार जस्तै लाग्न थाल्छ।
हाम्रो भेटबाट सुरु भएको यो सुन्दर यात्रा
आज जीवनभर सँगै हिँड्ने वाचासम्म आइपुगेको छ।
</p>
<div class="quote">
“जहाँ प्रेम हुन्छ, त्यहाँ हरेक दिन
नयाँ सुरुवात हुन्छ।”
</div>
</div>
</div>
</section>
<!-- =========================
GALLERY
========================== -->
<section class="gallery" id="gallery">
<div class="section-inner">
<div class="section-title reveal">
<div class="small">MEMORIES</div>
<h2>हाम्रा सम्झनाहरू</h2>
<p>केही सुन्दर क्षणहरू, सधैँका लागि।</p>
</div>
<div class="gallery-grid">
<div class="gallery-item reveal">
<img
src="https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=1000&q=85"
alt="Wedding"
/>
</div>
<div class="gallery-item reveal">
<img
src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?auto=format&fit=crop&w=1000&q=85"
alt="Wedding couple"
/>
</div>
<div class="gallery-item reveal">
<img
src="https://images.unsplash.com/photo-1469371670807-013ccf25f16a?auto=format&fit=crop&w=1000&q=85"
alt="Wedding ceremony"
/>
</div>
<div class="gallery-item reveal">
<img
src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?auto=format&fit=crop&w=1000&q=85"
alt="Wedding flowers"
/>
</div>
<div class="gallery-item reveal">
<img
src="https://images.unsplash.com/photo-1606800052052-a08af7148866?auto=format&fit=crop&w=1000&q=85"
alt="Bride"
/>
</div>
<div class="gallery-item reveal">
<img
src="https://images.unsplash.com/photo-1520854221256-17451cc331bf?auto=format&fit=crop&w=1000&q=85"
alt="Wedding rings"
/>
</div>
</div>
</div>
</section>
<!-- =========================
LOCATION
========================== -->
<section class="location" id="location">
<div class="section-inner">
<div class="section-title reveal">
<div class="small">JOIN US</div>
<h2>विवाह स्थल</h2>
<p>यहाँलाई भेट्न हामी आतुर छौँ।</p>
</div>
<div class="location-box reveal">
<div class="location-icon">📍</div>
<h3 id="venueName">
काठमाडौं विवाह मण्डप
</h3>
<p id="venueAddress">
काठमाडौं, नेपाल<br>
विशेष विवाह समारोह स्थल
</p>
<a
class="map-btn"
id="mapLink"
href="https://maps.google.com/"
target="_blank"
rel="noopener"
>
📍 Google Maps मा हेर्नुहोस्
</a>
</div>
</div>
</section>
<!-- =========================
RSVP
========================== -->
<section class="rsvp">
<div class="rsvp-box reveal">
<h2>तपाईंलाई पर्खिरहेका छौँ ❤️</h2>
<p>
हाम्रो खुसीको क्षणमा तपाईंको उपस्थिति नै
हाम्रो लागि सबैभन्दा ठूलो उपहार हुनेछ।
</p>
<a
href="tel:+9779800000000"
class="rsvp-btn"
id="rsvpLink"
>
📞 उपस्थितिको जानकारी दिनुहोस्
</a>
</div>
</section>
</main>
<!-- =========================
FOOTER
========================== -->
<footer>
<div class="om">ॐ</div>
<h3 id="footerNames">
प्रबिन & प्रियंका
</h3>
<div class="footer-line"></div>
<p>
शुभ विवाह • शुभ मंगल • शुभ जीवन
</p>
<p class="made">
प्रेमले बनाइएको हाम्रो सानो डिजिटल निमन्त्रणा ❤️
</p>
</footer>
<!-- MUSIC -->
<button class="music-btn" id="musicBtn" aria-label="Music">
🎵
</button>
<!-- Put your music file here -->
<audio id="weddingMusic" loop preload="none">
<source src="wedding-music.mp3" type="audio/mpeg">
</audio>
<!-- LIGHTBOX -->
<div class="lightbox" id="lightbox">
<div class="lightbox-close" id="lightboxClose">×</div>
<img id="lightboxImage" src="" alt="Gallery preview">
</div>
<script>
/* =====================================================
✨ WEDDING WEBSITE CONFIGURATION
Change ONLY these values to customize the website.
====================================================== */
const CONFIG = {
// Names
groom: "प्रबिन",
bride: "प्रियंका",
// Wedding date
// Format: YYYY-MM-DDTHH:mm:ss
weddingDate: "2027-01-15T14:00:00",
// Display date
displayDate: "१५ माघ २०८३",
// Venue
venue: "काठमाडौं विवाह मण्डप",
address: "काठमाडौं, नेपाल",
// Google Maps
mapUrl: "https://maps.google.com/?q=Kathmandu,Nepal",
// RSVP phone
phone: "+9779800000000",
// Couple photos
groomPhoto:
"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=700&q=80",
bridePhoto:
"https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=700&q=80"
};
/* =====================================================
APPLY CONFIG
====================================================== */
document.title =
`शुभ विवाह | ${CONFIG.groom} & ${CONFIG.bride}`;
document.getElementById("introNames").textContent =
`${CONFIG.groom} & ${CONFIG.bride}`;
document.getElementById("groomName").textContent =
CONFIG.groom;
document.getElementById("brideName").textContent =
CONFIG.bride;
document.getElementById("footerNames").textContent =
`${CONFIG.groom} & ${CONFIG.bride}`;
document.getElementById("heroDate").textContent =
`${CONFIG.displayDate} — शुभ विवाह`;
document.getElementById("venueName").textContent =
CONFIG.venue;
document.getElementById("venueAddress").innerHTML =
`${CONFIG.address}<br>विशेष विवाह समारोह स्थल`;
document.getElementById("mapLink").href =
CONFIG.mapUrl;
document.getElementById("rsvpLink").href =
`tel:${CONFIG.phone}`;
document.getElementById("groomImage").src =
CONFIG.groomPhoto;
document.getElementById("brideImage").src =
CONFIG.bridePhoto;
/* =====================================================
INTRO
====================================================== */
const intro = document.getElementById("intro");
const openInvitation =
document.getElementById("openInvitation");
openInvitation.addEventListener("click", () => {
intro.classList.add("hide");
document.body.classList.remove("no-scroll");
// Try to start music after user interaction
const music =
document.getElementById("weddingMusic");
music.play()
.then(() => {
musicBtn.textContent = "🔊";
musicBtn.classList.add("playing");
})
.catch(() => {});
});
/* =====================================================
NAVIGATION
====================================================== */
const navbar =
document.getElementById("navbar");
const navLinks =
document.getElementById("navLinks");
const menuBtn =
document.getElementById("menuBtn");
menuBtn.addEventListener("click", () => {
navLinks.classList.toggle("open");
menuBtn.textContent =
navLinks.classList.contains("open")
? "×"
: "☰";
});
document.querySelectorAll(".nav-links a")
.forEach(link => {
link.addEventListener("click", () => {
navLinks.classList.remove("open");
menuBtn.textContent = "☰";
});
});
window.addEventListener("scroll", () => {
if (window.scrollY > 40) {
navbar.classList.add("scrolled");
} else {
navbar.classList.remove("scrolled");
}
});
/* =====================================================
COUNTDOWN
====================================================== */
const weddingTime =
new Date(CONFIG.weddingDate).getTime();
function updateCountdown() {
const now = new Date().getTime();
const distance =
weddingTime - now;
if (distance <= 0) {
document.getElementById("days").textContent = "00";
document.getElementById("hours").textContent = "00";
document.getElementById("minutes").textContent = "00";
document.getElementById("seconds").textContent = "00";
return;
}
const days =
Math.floor(distance / (1000 * 60 * 60 * 24));
const hours =
Math.floor(
(distance % (1000 * 60 * 60 * 24)) /
(1000 * 60 * 60)
);
const minutes =
Math.floor(
(distance % (1000 * 60 * 60)) /
(1000 * 60)
);
const seconds =
Math.floor(
(distance % (1000 * 60)) /
1000
);
document.getElementById("days").textContent =
String(days).padStart(2, "0");
document.getElementById("hours").textContent =
String(hours).padStart(2, "0");
document.getElementById("minutes").textContent =
String(minutes).padStart(2, "0");
document.getElementById("seconds").textContent =
String(seconds).padStart(2, "0");
}
updateCountdown();
setInterval(updateCountdown, 1000);
/* =====================================================
SCROLL REVEAL
====================================================== */
const revealObserver =
new IntersectionObserver(
entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add("visible");
revealObserver.unobserve(entry.target);
}
});
},
{
threshold: 0.12
}
);
document.querySelectorAll(".reveal")
.forEach(el => revealObserver.observe(el));
/* =====================================================
DARK MODE
====================================================== */
const themeBtn =
document.getElementById("themeBtn");
const savedTheme =
localStorage.getItem("wedding-theme");
if (savedTheme === "dark") {
document.body.classList.add("dark");
themeBtn.textContent = "☀";
}
themeBtn.addEventListener("click", () => {
document.body.classList.toggle("dark");
const dark =
document.body.classList.contains("dark");
themeBtn.textContent =
dark ? "☀" : "☾";
localStorage.setItem(
"wedding-theme",
dark ? "dark" : "light"
);
});
/* =====================================================
MUSIC
====================================================== */
const music =
document.getElementById("weddingMusic");
const musicBtn =
document.getElementById("musicBtn");
musicBtn.addEventListener("click", () => {
if (music.paused) {
music.play()
.then(() => {
musicBtn.textContent = "🔊";
musicBtn.classList.add("playing");
})
.catch(() => {
alert(
"कृपया wedding-music.mp3 फाइल राख्नुहोस्।"
);
});
} else {
music.pause();
musicBtn.textContent = "🎵";
musicBtn.classList.remove("playing");
}
});
/* =====================================================
GALLERY LIGHTBOX
====================================================== */
const lightbox =
document.getElementById("lightbox");
const lightboxImage =
document.getElementById("lightboxImage");
const lightboxClose =
document.getElementById("lightboxClose");
document.querySelectorAll(".gallery-item img")
.forEach(image => {
image.addEventListener("click", () => {
lightboxImage.src = image.src;
lightbox.classList.add("active");
});
});
function closeLightbox() {
lightbox.classList.remove("active");
}
lightboxClose.addEventListener(
"click",
closeLightbox
);
lightbox.addEventListener("click", event => {
if (event.target === lightbox) {
closeLightbox();
}
});
document.addEventListener("keydown", event => {
if (event.key === "Escape") {
closeLightbox();
}
});
/* =====================================================
PREVENT BROKEN IMAGE EXPERIENCE
====================================================== */
document.querySelectorAll("img")
.forEach(img => {
img.addEventListener("error", () => {
img.style.background =
"linear-gradient(135deg,#8d1725,#d5a23a)";
img.removeAttribute("src");
});
});
/* =====================================================
CONSOLE
====================================================== */
console.log(
"%c💍 शुभ विवाह!",
"color:#8d1725;font-size:25px;font-weight:bold;"
);
console.log(
`❤️ ${CONFIG.groom} & ${CONFIG.bride}`
);
</script>
</body>
</html>
At the bottom of the file, edit this section:
const CONFIG = {
groom: "प्रबिन",
bride: "प्रियंका",
weddingDate: "2027-01-15T14:00:00",
displayDate: "१५ माघ २०८३",
venue: "काठमाडौं विवाह मण्डप",
address: "काठमाडौं, नेपाल",
mapUrl: "https://maps.google.com/?q=Kathmandu,Nepal",
phone: "+9779800000000",
groomPhoto: "YOUR_GROOM_PHOTO_URL",
bridePhoto: "YOUR_BRIDE_PHOTO_URL"
};