Hugging Face's logo

Spaces:
oilbread
/
wedding-jsh
Running

App Files Community
wedding-jsh / index.html
oilbread's picture
oilbread
Update index.html
403539d verified
raw
history blame contribute delete
35.8 kB
<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>์ •์„ฑํ˜„ & ๋‚จ๊ถ์œค์˜ ๊ฒฐํ˜ผํ•ฉ๋‹ˆ๋‹ค</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap');
body {
 font-family: 'Nanum Myeongjo', serif;
 background-color: #faf6f1;
 color: #333;
 overflow-x: hidden;
 }
.hero-image {
 background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://images.unsplash.com/photo-1519225421980-715cb0215aed?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
 background-size: cover;
 background-position: center;
 }
.floral-divider {
 position: relative;
 height: 50px;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23faf6f1" fill-opacity="1" d="M0,160L48,138.7C96,117,192,75,288,80C384,85,480,139,576,165.3C672,192,768,192,864,181.3C960,171,1056,149,1152,133.3C1248,117,1344,107,1392,101.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
 background-repeat: no-repeat;
 background-size: cover;
 }
.animate-fade-in {
 animation: fadeIn 1.5s ease-in-out;
 }
@keyframes fadeIn {
 from { opacity: 0; transform: translateY(20px); }
 to { opacity: 1; transform: translateY(0); }
 }
.countdown-box {
 background: rgba(255, 255, 255, 0.8);
 backdrop-filter: blur(5px);
 }
.map-container {
 height: 300px;
 width: 100%;
 }
.gallery-image {
 transition: all 0.3s ease;
 }
.gallery-image:hover {
 transform: scale(1.03);
 }
.envelope {
 position: relative;
 width: 300px;
 height: 200px;
 background: #f8e8d5;
 border-radius: 5px;
 box-shadow: 0 5px 15px rgba(0,0,0,0.1);
 cursor: pointer;
 transition: all 0.3s ease;
 perspective: 1000px;
 }
.envelope:hover {
 transform: translateY(-5px);
 }
.envelope-flap {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: #e8d5b5;
 border-radius: 5px 5px 0 0;
 transform-origin: top;
 transition: all 0.5s ease;
 z-index: 2;
 }
.envelope.open .envelope-flap {
 transform: rotateX(180deg);
 }
.envelope-body {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: #f8e8d5;
 border-radius: 5px;
 z-index: 1;
 overflow: hidden;
 }
.envelope-content {
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: white;
 transform: translateY(100%);
 transition: all 0.5s ease 0.3s;
 z-index: 0;
 padding: 20px;
 box-sizing: border-box;
 }
.envelope.open .envelope-content {
 transform: translateY(0);
 }
 </style>
</head>
<body class="relative">
 <!-- Navigation -->
 <nav class="fixed top-0 left-0 right-0 z-50 bg-white bg-opacity-90 shadow-sm">
 <div class="container mx-auto px-4 py-3 flex justify-between items-center">
 <div class="text-xl font-bold text-rose-600">์„ฑํ˜„ & ์œค์˜</div>
 <div class="hidden md:flex space-x-6">
 <a href="#main" class="text-gray-700 hover:text-rose-500 transition">๋ฉ”์ธ</a>
 <a href="#about" class="text-gray-700 hover:text-rose-500 transition">์†Œ๊ฐœ</a>
 <a href="#schedule" class="text-gray-700 hover:text-rose-500 transition">์ผ์ •</a>
 <a href="#location" class="text-gray-700 hover:text-rose-500 transition">์˜ค์‹œ๋Š” ๊ธธ</a>
 <a href="#gallery" class="text-gray-700 hover:text-rose-500 transition">๊ฐค๋Ÿฌ๋ฆฌ</a>
 </div>
 <button class="md:hidden text-gray-700">
 <i class="fas fa-bars text-2xl"></i>
 </button>
 </div>
 </nav>
<!-- Hero Section -->
 <section id="main" class="hero-image h-screen flex items-center justify-center text-white relative pt-16">
 <div class="absolute inset-0 bg-black bg-opacity-30"></div>
 <div class="text-center z-10 px-4 animate-fade-in">
 <h1 class="text-4xl md:text-6xl font-bold mb-4">์ •์„ฑํ˜„ & ์ œ๊ฐˆ์œค์˜</h1>
 <div class="text-xl md:text-2xl mb-8">2025๋…„ 9์›” 27์ผ ํ† ์š”์ผ ์˜คํ›„ 2์‹œ</div>
 <div class="flex justify-center">
 <div class="countdown-box rounded-lg p-4 shadow-lg">
 <div class="text-gray-800 font-semibold mb-2">๊ฒฐํ˜ผ์‹๊นŒ์ง€</div>
 <div id="countdown" class="flex space-x-2 text-gray-800">
 <div class="text-center">
 <div class="text-2xl font-bold days">00</div>
 <div class="text-xs">์ผ</div>
 </div>
 <div class="text-2xl">:</div>
 <div class="text-center">
 <div class="text-2xl font-bold hours">00</div>
 <div class="text-xs">์‹œ๊ฐ„</div>
 </div>
 <div class="text-2xl">:</div>
 <div class="text-center">
 <div class="text-2xl font-bold minutes">00</div>
 <div class="text-xs">๋ถ„</div>
 </div>
 <div class="text-2xl">:</div>
 <div class="text-center">
 <div class="text-2xl font-bold seconds">00</div>
 <div class="text-xs">์ดˆ</div>
 </div>
 </div>
 </div>
 </div>
 </div>
 <div class="absolute bottom-0 left-0 right-0">
 <div class="floral-divider"></div>
 </div>
 </section>
<!-- Invitation Section -->
 <section class="py-16 bg-rose-50 relative">
 <div class="container mx-auto px-4">
 <div class="flex justify-center mb-12">
 <div class="envelope" id="envelope">
 <div class="envelope-flap"></div>
 <div class="envelope-body"></div>
 <div class="envelope-content">
 <h3 class="text-center text-xl font-bold mb-4">์ฒญ์ฒฉ์žฅ</h3>
 <p class="text-center mb-4">์ •์„ฑํ˜„ ยท ๋งˆ์œค์˜</p>
 <p class="text-center mb-4">2025๋…„ 9์›” 27์ผ ํ† ์š”์ผ ์˜คํ›„ 2์‹œ</p>
 <p class="text-center">์„œ์šธ ๊ฐ•๋™ KDW ์›จ๋”ฉํ™€</p>
 </div>
 </div>
 </div>
 <div class="text-center mb-8">
 <h2 class="text-3xl font-bold text-gray-800 mb-4">์ฒญ์ฒฉ์˜ ๋ง์”€</h2>
 <div class="w-20 h-1 bg-rose-400 mx-auto mb-6"></div>
 <p class="text-gray-700 max-w-2xl mx-auto leading-relaxed">
 ์„œ๋กœ๋ฅผ ์กด์ค‘ํ•˜๋ฉฐ ์‚ฌ๋ž‘ํ•˜๋Š” ๋งˆ์Œ์œผ๋กœ<br>
 ๋‘ ์‚ฌ๋žŒ์ด ํ•˜๋‚˜ ๋˜๋Š” ์ž๋ฆฌ์— ์˜ค์…”์„œ<br>
 ์ถ•๋ณตํ•ด ์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.<br><br>
 ์ •OO ยท ์ดOO์˜ ์žฅ๋‚จ ์„ฑํ˜„<br>
 ์ดOO ยท ๋ฐ•OO์˜ ์ฐจ๋…€ ์œค์˜
 </p>
 </div>
 </div>
 </section>
<!-- Couple Section -->
 <section id="about" class="py-16 bg-white">
 <div class="container mx-auto px-4">
 <div class="text-center mb-12">
 <h2 class="text-3xl font-bold text-gray-800 mb-4">์‹ ๋ž‘ & ์‹ ๋ถ€</h2>
 <div class="w-20 h-1 bg-rose-400 mx-auto"></div>
 </div>
<div class="flex flex-col md:flex-row items-center justify-center gap-12 mb-16">
 <div class="text-center">
 <div class="w-48 h-48 rounded-full overflow-hidden mx-auto mb-6 border-4 border-rose-200">
 <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80"
alt="์‹ ๋ž‘" class="w-full h-full object-cover">
 </div>
 <h3 class="text-xl font-bold text-gray-800 mb-2">์ •์„ฑํ˜„</h3>
 <p class="text-gray-600">1995๋…„ 5์›” 15์ผ</p>
 <p class="text-gray-600 mt-2">์‚ผ์„ฑ์ „์ž ๊ฐœ๋ฐœํŒ€</p>
 <div class="flex justify-center space-x-4 mt-4">
 <a href="#" class="text-rose-500 hover:text-rose-700"><i class="fab fa-instagram"></i></a>
 <a href="#" class="text-rose-500 hover:text-rose-700"><i class="fab fa-facebook"></i></a>
 </div>
 </div>
<div class="text-center text-4xl text-rose-500 font-serif">&</div>
<div class="text-center">
 <div class="w-48 h-48 rounded-full overflow-hidden mx-auto mb-6 border-4 border-rose-200">
 <img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80"
alt="์‹ ๋ถ€" class="w-full h-full object-cover">
 </div>
 <h3 class="text-xl font-bold text-gray-800 mb-2">๋ฌด์Šจ์œค์˜</h3>
 <p class="text-gray-600">1996๋…„ 8์›” 22์ผ</p>
 <p class="text-gray-600 mt-2">๋„ค์ด๋ฒ„ ๋””์ž์ธํŒ€</p>
 <div class="flex justify-center space-x-4 mt-4">
 <a href="#" class="text-rose-500 hover:text-rose-700"><i class="fab fa-instagram"></i></a>
 <a href="#" class="text-rose-500 hover:text-rose-700"><i class="fab fa-facebook"></i></a>
 </div>
 </div>
 </div>
<div class="max-w-3xl mx-auto bg-rose-50 p-8 rounded-lg">
 <h3 class="text-xl font-bold text-center text-gray-800 mb-6">์šฐ๋ฆฌ์˜ ์ด์•ผ๊ธฐ</h3>
 <div class="flex flex-col space-y-6">
 <div class="flex items-start">
 <div class="bg-rose-500 text-white rounded-full w-10 h-10 flex items-center justify-center flex-shrink-0 mr-4">1</div>
 <div>
 <h4 class="font-semibold text-gray-800">์ฒซ ๋งŒ๋‚จ</h4>
 <p class="text-gray-600 mt-1">2018๋…„ ๋ด„, ๊ณตํ†ต ์นœ๊ตฌ์˜ ์ƒ์ผ ํŒŒํ‹ฐ์—์„œ ์ฒ˜์Œ ๋งŒ๋‚ฌ์Šต๋‹ˆ๋‹ค. ๋ฏผ์ˆ˜๋Š” ์ง€์€์˜ ๋ฐ์€ ์›ƒ์Œ์— ๋ฐ˜ํ–ˆ๊ณ , ์ง€์€์€ ๋ฏผ์ˆ˜์˜ ๋”ฐ๋œปํ•œ ์„ฑํ’ˆ์— ๋Œ๋ ธ์Šต๋‹ˆ๋‹ค.</p>
 </div>
 </div>
 <div class="flex items-start">
 <div class="bg-rose-500 text-white rounded-full w-10 h-10 flex items-center justify-center flex-shrink-0 mr-4">2</div>
 <div>
 <h4 class="font-semibold text-gray-800">์ฒซ ๋ฐ์ดํŠธ</h4>
 <p class="text-gray-600 mt-1">ํ•œ๊ฐ•์—์„œ ์ž์ „๊ฑฐ๋ฅผ ํƒ€๋ฉฐ ์„œ๋กœ๋ฅผ ์•Œ์•„๊ฐ€๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์กŒ์Šต๋‹ˆ๋‹ค. ์ €๋…์—๋Š” ์ž‘์€ ์ดํƒˆ๋ฆฌ์•ˆ ๋ ˆ์Šคํ† ๋ž‘์—์„œ ์‹์‚ฌ๋ฅผ ํ•˜๋ฉฐ ๊ธด ๋Œ€ํ™”๋ฅผ ๋‚˜๋ˆ„์—ˆ์Šต๋‹ˆ๋‹ค.</p>
 </div>
 </div>
 <div class="flex items-start">
 <div class="bg-rose-500 text-white rounded-full w-10 h-10 flex items-center justify-center flex-shrink-0 mr-4">3</div>
 <div>
 <h4 class="font-semibold text-gray-800">ํ”„๋กœํฌ์ฆˆ</h4>
 <p class="text-gray-600 mt-1">2022๋…„ ๊ฐ€์„, ์ œ์ฃผ๋„์—์„œ ๋ฏผ์ˆ˜๊ฐ€ ์ค€๋น„ํ•œ ๊นœ์ง ํ”„๋กœํฌ์ฆˆ. ์ผ์ถœ์„ ๋ณด๋Ÿฌ ๊ฐ„ ์ƒˆ๋ฒฝ ํ•ด๋ณ€์—์„œ ๋ฐ˜์ง€์™€ ํ•จ๊ป˜ ํ‰์ƒ์„ ํ•จ๊ป˜ํ•˜์ž๊ณ  ๊ณ ๋ฐฑํ–ˆ์Šต๋‹ˆ๋‹ค.</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Schedule Section -->
 <section id="schedule" class="py-16 bg-rose-50">
 <div class="container mx-auto px-4">
 <div class="text-center mb-12">
 <h2 class="text-3xl font-bold text-gray-800 mb-4">๊ฒฐํ˜ผ์‹ ์ผ์ •</h2>
 <div class="w-20 h-1 bg-rose-400 mx-auto"></div>
 </div>
<div class="max-w-3xl mx-auto">
 <div class="bg-white rounded-lg shadow-md overflow-hidden">
 <div class="p-6 border-b border-gray-200">
 <h3 class="text-xl font-bold text-gray-800 mb-2">2025๋…„ 9์›” 27์ผ ํ† ์š”์ผ</h3>
 <p class="text-gray-600">์„œ์šธ ๊ฐ•๋™ KDW์›จ๋”ฉํ™€</p>
 </div>
<div class="divide-y divide-gray-200">
 <div class="p-6 flex items-start">
 <div class="bg-rose-100 text-rose-600 rounded-full w-10 h-10 flex items-center justify-center flex-shrink-0 mr-4">
 <i class="far fa-clock"></i>
 </div>
 <div>
 <h4 class="font-semibold text-gray-800">13:00</h4>
 <p class="text-gray-600 mt-1">ํ•˜๊ฐ ์ž…์žฅ</p>
 </div>
 </div>
<div class="p-6 flex items-start">
 <div class="bg-rose-100 text-rose-600 rounded-full w-10 h-10 flex items-center justify-center flex-shrink-0 mr-4">
 <i class="fas fa-heart"></i>
 </div>
 <div>
 <h4 class="font-semibold text-gray-800">14:00</h4>
 <p class="text-gray-600 mt-1">๋ณธ์‹ ์‹œ์ž‘</p>
 </div>
 </div>
<div class="p-6 flex items-start">
 <div class="bg-rose-100 text-rose-600 rounded-full w-10 h-10 flex items-center justify-center flex-shrink-0 mr-4">
 <i class="fas fa-camera"></i>
 </div>
 <div>
 <h4 class="font-semibold text-gray-800">15:00</h4>
 <p class="text-gray-600 mt-1">๊ธฐ๋…์‚ฌ์ง„ ์ดฌ์˜</p>
 </div>
 </div>
<div class="p-6 flex items-start">
 <div class="bg-rose-100 text-rose-600 rounded-full w-10 h-10 flex items-center justify-center flex-shrink-0 mr-4">
 <i class="fas fa-utensils"></i>
 </div>
 <div>
 <h4 class="font-semibold text-gray-800">16:00</h4>
 <p class="text-gray-600 mt-1">์›จ๋”ฉํ”ผ๋กœ์—ฐ</p>
 </div>
 </div>
 </div>
 </div>
<div class="mt-8 bg-white rounded-lg shadow-md p-6">
 <h3 class="text-xl font-bold text-gray-800 mb-4">์ฐธ์„ ์—ฌ๋ถ€ ์•Œ๋ ค์ฃผ์„ธ์š”</h3>
 <form>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
 <div>
 <label class="block text-gray-700 mb-2">์ด๋ฆ„</label>
 <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-rose-500">
 </div>
 <div>
 <label class="block text-gray-700 mb-2">์ฐธ์„ ์ธ์›</label>
 <select class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-rose-500">
 <option>1๋ช…</option>
 <option>2๋ช…</option>
 <option>3๋ช…</option>
 <option>4๋ช… ์ด์ƒ</option>
 </select>
 </div>
 </div>
 <div class="mb-4">
 <label class="block text-gray-700 mb-2">์ฐธ์„ ์—ฌ๋ถ€</label>
 <div class="flex space-x-4">
 <label class="inline-flex items-center">
 <input type="radio" name="attendance" class="text-rose-500" checked>
 <span class="ml-2">์ฐธ์„ํ•ฉ๋‹ˆ๋‹ค</span>
 </label>
 <label class="inline-flex items-center">
 <input type="radio" name="attendance" class="text-rose-500">
 <span class="ml-2">๋ถˆ์ฐธํ•ฉ๋‹ˆ๋‹ค</span>
 </label>
 </div>
 </div>
 <div class="mb-4">
 <label class="block text-gray-700 mb-2">๋ฉ”์‹œ์ง€ (์„ ํƒ)</label>
 <textarea class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-rose-500" rows="3"></textarea>
 </div>
 <button type="submit" class="w-full bg-rose-500 text-white py-2 px-4 rounded-md hover:bg-rose-600 transition">ํ™•์ธ ์ „์†ก</button>
 </form>
 </div>
 </div>
 </div>
 </section>
<!-- Location Section -->
 <section id="location" class="py-16 bg-white">
 <div class="container mx-auto px-4">
 <div class="text-center mb-12">
 <h2 class="text-3xl font-bold text-gray-800 mb-4">์˜ค์‹œ๋Š” ๊ธธ</h2>
 <div class="w-20 h-1 bg-rose-400 mx-auto"></div>
 </div>
<div class="max-w-4xl mx-auto">
 <div class="bg-gray-100 rounded-lg overflow-hidden shadow-md">
 <div class="map-container" id="map">
 <!-- Map will be inserted here by JavaScript -->
 <img src="https://maps.googleapis.com/maps/api/staticmap?center=37.5665,126.9780&zoom=15&size=800x300&maptype=roadmap&markers=color:red%7C37.5665,126.9780&key=YOUR_API_KEY"
alt="Wedding Location Map" class="w-full h-full object-cover">
 </div>
<div class="p-6">
 <h3 class="text-xl font-bold text-gray-800 mb-2">์„œ์šธ ๊ฐ•๋™ KDW ์›จ๋”ฉํ™€</h3>
 <p class="text-gray-600 mb-4">์„œ์šธํŠน๋ณ„์‹œ ๊ฐ•๋‚จ๊ตฌ ํ…Œํ—ค๋ž€๋กœ 123</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 <div class="bg-white p-4 rounded-lg shadow-sm">
 <div class="text-rose-500 mb-2"><i class="fas fa-subway"></i></div>
 <h4 class="font-semibold text-gray-800 mb-1">์ง€ํ•˜์ฒ </h4>
 <p class="text-gray-600 text-sm">2ํ˜ธ์„  ๊ฐ•๋‚จ์—ญ 5๋ฒˆ ์ถœ๊ตฌ ๋„๋ณด 5๋ถ„</p>
 </div>
<div class="bg-white p-4 rounded-lg shadow-sm">
 <div class="text-rose-500 mb-2"><i class="fas fa-bus"></i></div>
 <h4 class="font-semibold text-gray-800 mb-1">๋ฒ„์Šค</h4>
 <p class="text-gray-600 text-sm">146, 340, 341, 360, 740๋ฒˆ ๋ฒ„์Šค ํ•˜์ฐจ</p>
 </div>
<div class="bg-white p-4 rounded-lg shadow-sm">
 <div class="text-rose-500 mb-2"><i class="fas fa-car"></i></div>
 <h4 class="font-semibold text-gray-800 mb-1">์ž๊ฐ€์šฉ</h4>
 <p class="text-gray-600 text-sm">ํ˜ธํ…” ์ง€ํ•˜ 3์ธต ์ฃผ์ฐจ์žฅ ์ด์šฉ ๊ฐ€๋Šฅ</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Gallery Section -->
 <section id="gallery" class="py-16 bg-rose-50">
 <div class="container mx-auto px-4">
 <div class="text-center mb-12">
 <h2 class="text-3xl font-bold text-gray-800 mb-4">์šฐ๋ฆฌ์˜ ์ˆœ๊ฐ„๋“ค</h2>
 <div class="w-20 h-1 bg-rose-400 mx-auto"></div>
 </div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
 <div class="gallery-image overflow-hidden rounded-lg shadow-md">
 <img src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
alt="Gallery Image 1" class="w-full h-48 md:h-64 object-cover hover:scale-105 transition-transform duration-300">
 </div>
 <div class="gallery-image overflow-hidden rounded-lg shadow-md">
 <img src="https://images.unsplash.com/photo-1515934751635-c81c6bc9a2d8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
alt="Gallery Image 2" class="w-full h-48 md:h-64 object-cover hover:scale-105 transition-transform duration-300">
 </div>
 <div class="gallery-image overflow-hidden rounded-lg shadow-md">
 <img src="https://images.unsplash.com/photo-1518621736915-f3b1c41bfd00?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80"
alt="Gallery Image 3" class="w-full h-48 md:h-64 object-cover hover:scale-105 transition-transform duration-300">
 </div>
 <div class="gallery-image overflow-hidden rounded-lg shadow-md">
 <img src="https://images.unsplash.com/photo-1523438885200-e635ba2c371e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80"
alt="Gallery Image 4" class="w-full h-48 md:h-64 object-cover hover:scale-105 transition-transform duration-300">
 </div>
 <div class="gallery-image overflow-hidden rounded-lg shadow-md">
 <img src="https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80"
alt="Gallery Image 5" class="w-full h-48 md:h-64 object-cover hover:scale-105 transition-transform duration-300">
 </div>
 <div class="gallery-image overflow-hidden rounded-lg shadow-md">
 <img src="https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80"
alt="Gallery Image 6" class="w-full h-48 md:h-64 object-cover hover:scale-105 transition-transform duration-300">
 </div>
 <div class="gallery-image overflow-hidden rounded-lg shadow-md">
 <img src="https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80"
alt="Gallery Image 7" class="w-full h-48 md:h-64 object-cover hover:scale-105 transition-transform duration-300">
 </div>
 <div class="gallery-image overflow-hidden rounded-lg shadow-md">
 <img src="https://images.unsplash.com/photo-1518621736915-f3b1c41bfd00?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80"
alt="Gallery Image 8" class="w-full h-48 md:h-64 object-cover hover:scale-105 transition-transform duration-300">
 </div>
 </div>
<div class="text-center mt-8">
 <button class="bg-rose-500 text-white px-6 py-2 rounded-md hover:bg-rose-600 transition">
 ๋” ๋ณด๊ธฐ <i class="fas fa-chevron-down ml-2"></i>
 </button>
 </div>
 </div>
 </section>
<!-- Gift Section -->
 <section class="py-16 bg-white">
 <div class="container mx-auto px-4">
 <div class="text-center mb-12">
 <h2 class="text-3xl font-bold text-gray-800 mb-4">๋งˆ์Œ ์ „ํ•˜์‹ค ๊ณณ</h2>
 <div class="w-20 h-1 bg-rose-400 mx-auto"></div>
 </div>
<div class="max-w-3xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
 <div class="bg-rose-50 p-6 rounded-lg shadow-sm">
 <h3 class="text-xl font-bold text-gray-800 mb-4 text-center">์‹ ๋ž‘ ์ธก</h3>
 <div class="space-y-4">
 <div>
 <h4 class="font-semibold text-gray-800">์ž„ํ•˜์‹</h4>
 <p class="text-gray-600">๋†ํ˜‘์€ํ–‰ 356-0979-9146-13</p>
 </div>
 <div>
 <h4 class="font-semibold text-gray-800">์ž„ํ•˜์‹</h4>
 <p class="text-gray-600">๋†ํ˜‘์€ํ–‰ 356-0979-9146-13</p>
 </div>
 <div>
 <h4 class="font-semibold text-gray-800">์‹ ๋ž‘ ๊น€๋ฏผ์ˆ˜</h4>
 <p class="text-gray-600">๋†ํ˜‘์€ํ–‰ 356-0979-9146-13</p>
 </div>
 </div>
 </div>
<div class="bg-rose-50 p-6 rounded-lg shadow-sm">
 <h3 class="text-xl font-bold text-gray-800 mb-4 text-center">์‹ ๋ถ€ ์ธก</h3>
 <div class="space-y-4">
 <div>
 <h4 class="font-semibold text-gray-800">์ž„ํ•˜์‹</h4>
 <p class="text-gray-600">๋†ํ˜‘์€ํ–‰ 356-0979-9146-13</p>
 </div>
 <div>
 <h4 class="font-semibold text-gray-800">์ž„ํ•˜์‹</h4>
 <p class="text-gray-600">๋†ํ˜‘์€ํ–‰ 356-0979-9146-13</p>
 </div>
 <div>
 <h4 class="font-semibold text-gray-800">์ž„ํ•˜์‹</h4>
 <p class="text-gray-600">๋†ํ˜‘์€ํ–‰ 356-0979-9146-13</p>
 </div>
 </div>
 </div>
 </div>
<div class="mt-8 bg-rose-50 p-6 rounded-lg">
 <h3 class="text-xl font-bold text-center text-gray-800 mb-4">์ถ•ํ•˜ ๋ฉ”์‹œ์ง€</h3>
 <form>
 <div class="mb-4">
 <label class="block text-gray-700 mb-2">์ด๋ฆ„</label>
 <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-rose-500">
 </div>
 <div class="mb-4">
 <label class="block text-gray-700 mb-2">๊ด€๊ณ„</label>
 <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-rose-500">
 </div>
 <div class="mb-4">
 <label class="block text-gray-700 mb-2">๋ฉ”์‹œ์ง€</label>
 <textarea class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-rose-500" rows="4"></textarea>
 </div>
 <button type="submit" class="w-full bg-rose-500 text-white py-2 px-4 rounded-md hover:bg-rose-600 transition">๋ฉ”์‹œ์ง€ ์ „์†ก</button>
 </form>
 </div>
 </div>
 </div>
 </section>
<!-- Footer -->
 <footer class="bg-gray-900 text-white py-8">
 <div class="container mx-auto px-4">
 <div class="text-center mb-6">
 <h2 class="text-2xl font-bold mb-2">์ •์„ฑํ˜„ & ๊น€์œค์˜</h2>
 <p class="text-gray-400">2025๋…„ 9์›” 27์ผ ํ† ์š”์ผ ์˜คํ›„ 2์‹œ</p>
 </div>
<div class="flex justify-center space-x-6 mb-6">
 <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a>
 <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
 <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-kakao"></i></a>
 </div>
<div class="text-center text-gray-400 text-sm">
 <p>๋ฌธ์˜: ์‹ ๋ž‘ 010-1234-5678 / ์‹ ๋ถ€ 010-9876-5432</p>
 <p class="mt-2">ยฉ 2023 Minsoo & Jieun Wedding. All rights reserved.</p>
 </div>
 </div>
 </footer>
<!-- Floating Action Button -->
 <div class="fixed bottom-6 right-6 z-50">
 <div class="relative group">
 <button id="fab" class="bg-rose-500 text-white w-14 h-14 rounded-full shadow-lg flex items-center justify-center hover:bg-rose-600 transition">
 <i class="fas fa-heart text-xl"></i>
 </button>
 <div class="absolute bottom-full right-0 mb-2 hidden group-hover:block bg-white shadow-md rounded-md p-2 w-40">
 <a href="#main" class="block px-3 py-2 text-gray-800 hover:bg-rose-50 rounded">๋ฉ”์ธ์œผ๋กœ</a>
 <a href="#schedule" class="block px-3 py-2 text-gray-800 hover:bg-rose-50 rounded">์ผ์ • ํ™•์ธ</a>
 <a href="#location" class="block px-3 py-2 text-gray-800 hover:bg-rose-50 rounded">์˜ค์‹œ๋Š” ๊ธธ</a>
 </div>
 </div>
 </div>
<script>
 // Countdown Timer
 function updateCountdown() {
 const weddingDate = new Date("September 27, 2025 14:00:00").getTime();
 const now = new Date().getTime();
 const distance = weddingDate - now;
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.querySelector(".days").textContent = days.toString().padStart(2, '0');
 document.querySelector(".hours").textContent = hours.toString().padStart(2, '0');
 document.querySelector(".minutes").textContent = minutes.toString().padStart(2, '0');
 document.querySelector(".seconds").textContent = seconds.toString().padStart(2, '0');
if (distance < 0) {
 clearInterval(countdownInterval);
 document.getElementById("countdown").innerHTML = "<div class='text-xl font-bold'>๊ฒฐํ˜ผ์‹์ด ์ง„ํ–‰ ์ค‘์ž…๋‹ˆ๋‹ค!</div>";
 }
 }
updateCountdown();
 const countdownInterval = setInterval(updateCountdown, 1000);
// Envelope Animation
 const envelope = document.getElementById('envelope');
 if (envelope) {
 envelope.addEventListener('click', function() {
 this.classList.toggle('open');
 });
 }
// Smooth Scrolling for Anchor Links
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 anchor.addEventListener('click', function(e) {
 e.preventDefault();
const targetId = this.getAttribute('href');
 if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
 if (targetElement) {
 window.scrollTo({
 top: targetElement.offsetTop - 80,
 behavior: 'smooth'
 });
 }
 });
 });
// Mobile Menu Toggle (would need implementation)
 // Form Submission Handling (would need backend integration)
// Gallery Lightbox (would need implementation)
 const galleryImages = document.querySelectorAll('.gallery-image img');
 galleryImages.forEach(img => {
 img.addEventListener('click', function() {
 // In a real implementation, this would open a lightbox
 alert('๋” ํฐ ์ด๋ฏธ์ง€๋กœ ๋ณด๊ธฐ ๊ธฐ๋Šฅ์ด ์—ฌ๊ธฐ์— ๊ตฌํ˜„๋ฉ๋‹ˆ๋‹ค.');
 });
 });
// Google Maps API would be initialized here with a real API key
 // For demo purposes, we're using a static image
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - ๐Ÿงฌ <a href="https://enzostvs-deepsite.hf.space?remix=oilbread/wedding-jsh" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>