Contoh Coding Website Undangan Wedding HTML, CSS, Bootstrap, dan JavaScript

Membuat Cover Pembuka Undangan

Cover menampilkan nama pasangan, tanggal, nama penerima, dan tombol pembuka:

<section id="cover" class="cover-screen" aria-labelledby="coverTitle">
  <div class="cover-overlay"></div>
  <div class="cover-content text-center">
    <p class="eyebrow text-white-50">The Wedding of</p>
    <h1 id="coverTitle">Ayu <span>&</span> Rama</h1>
    <p class="cover-date">Minggu, 20 Desember 2026</p>
    <div class="guest-box">
      <small>Kepada Yth.</small>
      <strong id="guestName">Bapak/Ibu/Saudara/i</strong>
    </div>
    <button id="openInvitation" class="btn btn-light rounded-pill px-4 py-2">
      Buka Undangan
    </button>
  </div>
</section>

JavaScript membaca nama tamu dari parameter to:

const guest = new URLSearchParams(window.location.search).get('to');
if (guest) document.getElementById('guestName').textContent = guest.slice(0, 80);

Contoh URL:

index.html?to=Keluarga%20Bapak%20Agung

Gunakan textContent, bukan innerHTML, agar nama tamu tidak diperlakukan sebagai markup HTML.