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

Membuat Cerita dan Galeri Responsif

Cerita disusun sebagai timeline sederhana agar mudah dipindai. Galeri menggunakan CSS Grid:

.gallery-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  grid-template-rows: 480px;
  gap: 16px;
}

.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Pada mobile, media query mengubah susunan menjadi satu atau dua kolom. Gunakan foto yang sudah dikompresi ke WebP agar halaman tidak terlalu berat.