Tutorial: Membuat Web Undangan Pernikahan Digital Sendiri (Gratis & Elegan)
Di era digital ini, undangan fisik mulai beralih ke undangan berbasis web. Selain hemat kertas (ramah lingkungan), undangan web mudah disebarkan lewat WhatsApp.
Dalam tutorial ini, kita akan membuat Landing Page undangan pernikahan yang cantik menggunakan HTML dan Tailwind CSS. Kita akan fokus pada desain yang responsif (bagus di HP) dan tipografi yang elegan.
Fitur yang Akan Kita Buat
-
Hero Section: Tampilan awal dengan nama mempelai dan animasi halus.
-
Detail Mempelai: Foto dan nama pasangan.
-
Waktu & Lokasi: Informasi acara yang jelas.
-
RSVP Form: Formulir konfirmasi kehadiran sederhana.
-
Navigasi Musik: Ikon musik (opsional/dekoratif).
Langkah 1: Struktur Dasar & Font Cantik
Rahasia undangan yang elegan ada pada pemilihan font. Kita akan menggunakan Google Fonts:
-
Great Vibes: Untuk nama mempelai (tulisan sambung/kursive).
-
Cormorant Garamond: Untuk teks tubuh yang klasik dan mewah.
Tambahkan ini di <head>:
<link href="[https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Great+Vibes&display=swap](https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Great+Vibes&display=swap)" rel="stylesheet">
<script src="[https://cdn.tailwindcss.com](https://cdn.tailwindcss.com)"></script>
Kita juga perlu mengkonfigurasi Tailwind agar menggunakan font tersebut. Tambahkan script konfigurasi di dalam <head>:
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
script: ['"Great Vibes"', 'cursive'],
serif: ['"Cormorant Garamond"', 'serif'],
},
colors: {
wedding: {
50: '#fdf2f8',
100: '#fce7f3',
800: '#9d174d', // Warna tema utama (Pink Tua)
}
}
}
}
}
</script>
Langkah 2: Hero Section (Tampilan Awal)
Bagian ini adalah yang pertama dilihat tamu. Kita buat memenuhi layar (min-h-screen) dengan teks di tengah.
<section class="min-h-screen flex flex-col justify-center items-center text-center bg-wedding-50 p-6">
<p class="font-serif text-gray-600 mb-4">The Wedding of</p>
<h1 class="font-script text-6xl md:text-8xl text-wedding-800 mb-4">Rizky & Aisyah</h1>
<p class="font-serif text-xl text-gray-600">Minggu, 28 Desember 2025</p>
</section>
Langkah 3: Detail Acara (Grid Layout)
Untuk detail waktu dan tempat, kita gunakan Grid atau Flexbox agar rapi.
Gunakan class bg-white shadow-xl rounded-2xl untuk membuat kotak informasi yang menonjol dari latar belakang (konsep kartu).
Langkah 4: Galeri & Mempelai
Tampilkan foto mempelai dengan bingkai bulat (rounded-full) atau kotak dengan sudut tumpul (rounded-xl). Pastikan gambar responsif dengan w-32 h-32 object-cover.
Langkah 5: Ucapan & Doa (RSVP)
Buat form sederhana menggunakan elemen <input> dan <textarea> yang sudah di-styling dengan Tailwind (mirip dengan tutorial login sebelumnya, tapi dengan tema warna yang lebih lembut).
Tips Tambahan
-
Gambar: Gunakan gambar berkualitas tinggi tapi ukuran file kecil (kompres dulu) agar loading cepat.
-
Animasi: Gunakan
aos(Animate On Scroll) atau CSS sederhana untuk efek muncul perlahan saat discroll. -
Musik: Hati-hati dengan autoplay musik, browser modern sering memblokirnya. Sebaiknya sediakan tombol "Buka Undangan" untuk memicu musik.
Kode Lengkap (Siap Copy-Paste)
Berikut adalah kode lengkap untuk undangan pernikahan dengan format layar mobile (seperti aplikasi). Anda bisa menyalinnya ke dalam file bernama index.html.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Wedding of Rizky & Aisyah</title>
<!-- Tailwind CSS -->
<script src="[https://cdn.tailwindcss.com](https://cdn.tailwindcss.com)"></script>
<!-- Google Fonts -->
<link rel="preconnect" href="[https://fonts.googleapis.com](https://fonts.googleapis.com)">
<link rel="preconnect" href="[https://fonts.gstatic.com](https://fonts.gstatic.com)" crossorigin>
<link href="[https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Great+Vibes&display=swap](https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Great+Vibes&display=swap)" rel="stylesheet">
<!-- Konfigurasi Tema Kustom -->
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
'script': ['"Great Vibes"', 'cursive'],
'serif': ['"Cormorant Garamond"', 'serif'],
},
colors: {
'rose-gold': '#b76e79',
'dusty-pink': '#d6aeb5',
'sage': '#9caf88',
},
}
}
}
</script>
<style>
html { scroll-behavior: smooth; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.fade-in-up {
animation: fadeInUp 1s ease-out forwards;
opacity: 0;
transform: translateY(20px);
}
@keyframes fadeInUp {
to { opacity: 1; transform: translateY(0); }
}
.delay-300 { animation-delay: 300ms; }
.delay-500 { animation-delay: 500ms; }
.delay-700 { animation-delay: 700ms; }
</style>
</head>
<body class="font-serif text-slate-700 antialiased bg-gray-100 md:bg-slate-800 min-h-screen flex justify-center">
<!-- Mobile Frame Wrapper -->
<div class="w-full max-w-md bg-white min-h-screen shadow-2xl relative overflow-x-hidden">
<!-- Navbar / Musik Control -->
<div class="absolute bottom-6 right-6 z-50 fixed">
<button id="musicBtn" class="bg-rose-gold text-white p-3 rounded-full shadow-lg hover:bg-rose-700 transition animate-bounce ring-2 ring-white">
<svg xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>
</button>
</div>
<!-- HERO SECTION -->
<header class="h-screen flex flex-col justify-center items-center text-center p-6 relative overflow-hidden bg-[url('[https://images.unsplash.com/photo-1519225421980-715cb0202128?q=80&w=2000&auto=format&fit=crop](https://images.unsplash.com/photo-1519225421980-715cb0202128?q=80&w=2000&auto=format&fit=crop)')] bg-cover bg-center">
<div class="absolute inset-0 bg-white/60 backdrop-blur-[1px]"></div>
<div class="relative z-10 w-full">
<p class="text-sm tracking-[0.3em] uppercase mb-6 text-slate-600 fade-in-up">The Wedding of</p>
<h1 class="font-script text-6xl text-rose-gold mb-4 fade-in-up delay-300 leading-tight">Rizky <br>&<br> Aisyah</h1>
<div class="h-px w-16 bg-slate-400 mx-auto my-6 fade-in-up delay-500"></div>
<p class="text-lg font-bold text-slate-700 fade-in-up delay-500">Minggu, 28 Desember 2025</p>
<div class="mt-10 fade-in-up delay-700 animate-pulse">
<a href="#mempelai" class="flex flex-col items-center gap-2 text-slate-600 text-sm">
<span>Buka Undangan</span>
<svg xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</a>
</div>
</div>
</header>
<!-- AYAT / QUOTE SECTION -->
<section class="py-12 px-6 bg-white text-center">
<svg class="w-6 h-6 mx-auto text-rose-gold mb-4" viewBox="0 0 24 24" fill="currentColor"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
<p class="italic text-sm text-slate-600 leading-relaxed font-serif">
"Dan di antara tanda-tanda (kebesaran)-Nya ialah Dia menciptakan pasangan-pasangan untukmu dari jenismu sendiri, agar kamu cenderung dan merasa tenteram kepadanya..."
</p>
<p class="mt-3 text-xs font-bold text-rose-gold tracking-widest uppercase">— QS. Ar-Rum: 21</p>
</section>
<!-- MEMPELAI SECTION -->
<section id="mempelai" class="py-16 px-6 bg-rose-50/50">
<div class="text-center space-y-12">
<h2 class="font-script text-4xl text-rose-gold">Mempelai</h2>
<!-- Pria -->
<div class="space-y-4">
<div class="w-40 h-40 mx-auto rounded-full overflow-hidden border-4 border-white shadow-lg transform hover:scale-105 transition duration-500">
<img src="[https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=1887&auto=format&fit=crop](https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=1887&auto=format&fit=crop)" alt="Rizky" class="w-full h-full object-cover">
</div>
<div>
<h3 class="font-script text-3xl text-slate-800">Rizky Pratama</h3>
<p class="text-xs text-slate-500 uppercase tracking-wide mt-1">Putra Bpk. Ahmad & Ibu Siti</p>
</div>
</div>
<div class="text-4xl text-rose-gold font-script">&</div>
<!-- Wanita -->
<div class="space-y-4">
<div class="w-40 h-40 mx-auto rounded-full overflow-hidden border-4 border-white shadow-lg transform hover:scale-105 transition duration-500">
<img src="[https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=1888&auto=format&fit=crop](https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=1888&auto=format&fit=crop)" alt="Aisyah" class="w-full h-full object-cover">
</div>
<div>
<h3 class="font-script text-3xl text-slate-800">Aisyah Putri</h3>
<p class="text-xs text-slate-500 uppercase tracking-wide mt-1">Putri Bpk. Budi & Ibu Wati</p>
</div>
</div>
</div>
</section>
<!-- ACARA SECTION -->
<section class="py-16 px-6 bg-white">
<div class="text-center mb-10">
<h2 class="font-script text-4xl text-rose-gold mb-2">Save The Date</h2>
<p class="text-slate-500 text-sm">Kami menantikan kehadiran Anda</p>
</div>
<div class="space-y-6">
<!-- Akad -->
<div class="bg-slate-50 p-6 rounded-2xl border border-slate-100 shadow-sm relative overflow-hidden group">
<div class="absolute top-0 left-0 w-1 h-full bg-rose-gold"></div>
<h3 class="text-xl font-bold text-slate-800 mb-3">Akad Nikah</h3>
<div class="flex items-start gap-3 text-slate-600 text-sm mb-2">
<span>08:00 - 10:00 WIB</span>
</div>
<div class="flex items-start gap-3 text-slate-600 text-sm">
<span>Masjid Agung Al-Hikmah<br><span class="text-xs text-slate-400">Jl. Merdeka No. 123</span></span>
</div>
</div>
<!-- Resepsi -->
<div class="bg-slate-50 p-6 rounded-2xl border border-slate-100 shadow-sm relative overflow-hidden group">
<div class="absolute top-0 left-0 w-1 h-full bg-slate-800"></div>
<h3 class="text-xl font-bold text-slate-800 mb-3">Resepsi</h3>
<div class="flex items-start gap-3 text-slate-600 text-sm mb-2">
<span>11:00 - 14:00 WIB</span>
</div>
<div class="flex items-start gap-3 text-slate-600 text-sm">
<span>Grand Ballroom Hotel Bintang<br><span class="text-xs text-slate-400">Jl. Sudirman Kav. 50</span></span>
</div>
</div>
</div>
</section>
<!-- RSVP SECTION -->
<section class="py-16 px-6 bg-[url('[https://img.freepik.com/free-photo/pastel-pink-brush-stroke-textured-background_53876-108399.jpg](https://img.freepik.com/free-photo/pastel-pink-brush-stroke-textured-background_53876-108399.jpg)')] bg-cover bg-center text-center">
<div class="bg-white/95 backdrop-blur-sm p-6 rounded-2xl shadow-xl border border-white">
<h2 class="font-script text-3xl text-rose-gold mb-2">RSVP</h2>
<p class="text-slate-500 text-xs mb-6 uppercase tracking-wider">Konfirmasi Kehadiran</p>
<form class="space-y-4 text-left">
<input type="text" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-lg text-sm focus:ring-1 focus:ring-rose-gold outline-none" placeholder="Nama Lengkap">
<select class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-lg text-sm focus:ring-1 focus:ring-rose-gold outline-none text-slate-600">
<option>Hadir - 1 Orang</option>
<option>Hadir - 2 Orang</option>
<option>Maaf, Tidak Bisa Hadir</option>
</select>
<button type="button" onclick="alert('Terima kasih! Konfirmasi Anda telah terkirim.')" class="w-full bg-rose-gold text-white py-3 rounded-lg font-bold hover:bg-rose-700 transition shadow-md text-sm uppercase tracking-wide">
Kirim Pesan
</button>
</form>
</div>
</section>
<!-- FOOTER -->
<footer class="bg-slate-800 text-white py-10 px-6 text-center">
<h2 class="font-script text-4xl mb-6">Rizky & Aisyah</h2>
<p class="text-slate-400 text-xs leading-relaxed mb-8">Terima kasih atas doa dan restu<br>Bapak/Ibu/Saudara/i sekalian.</p>
<div class="border-t border-slate-700 pt-6 text-[10px] text-slate-500 uppercase tracking-widest">
<p>Digital Invitation Template</p>
</div>
</footer>
</div>
<script>
const musicBtn = document.getElementById('musicBtn');
let isPlaying = false;
musicBtn.addEventListener('click', () => {
isPlaying = !isPlaying;
if(isPlaying) {
musicBtn.classList.remove('bg-rose-gold');
musicBtn.classList.add('bg-green-500');
alert('Musik dimainkan (simulasi)');
} else {
musicBtn.classList.add('bg-rose-gold');
musicBtn.classList.remove('bg-green-500');
alert('Musik dijeda');
}
});
</script>
</body>
</html>