Part 3: Cara Menambahkan Foto Pasangan dan Detail Acara pada Web Pernikahan Online
Pada Part 2, kita telah menambahkan CSS internal untuk mempercantik tampilan halaman undangan pernikahan. Sekarang, di Part 3 kita akan menambahkan foto pasangan dan detail acara pernikahan agar undangan terlihat lebih lengkap dan nyata.
Apa yang Akan Dibuat?
- Menampilkan foto pasangan dalam bentuk lingkaran (round avatar).
- Menambahkan blok informasi detail acara (tanggal, waktu, tempat).
- CSS sederhana agar foto dan detail tampil rapi dan elegan.
Langkah 1: Siapkan Foto Pasangan
Siapkan foto pasangan pengantin dengan ukuran yang tidak terlalu besar (contoh: 600×400 piksel). Simpan file foto di folder project yang sama dengan index.html. Misalnya, beri nama file pasangan.jpg.
Langkah 2: Tambahkan Kode HTML Foto dan Detail Acara
Edit file index.html dan tambahkan kode berikut di dalam tag <body> setelah paragraf undangan:
<div class="container">
<h1>Selamat Datang di Undangan Pernikahan Kami</h1>
<p>Halo, Anda diundang untuk menghadiri pernikahan <b>Andi & Siti</b>!</p>
<!-- Foto Pasangan -->
<img src="pasangan.jpg" alt="Foto Andi dan Siti" class="foto-pasangan">
<!-- Detail Acara -->
<div class="detail-acara">
<h2>Detail Acara</h2>
<p><strong>Tanggal:</strong> Minggu, 25 Agustus 2024</p>
<p><strong>Waktu:</strong> Pukul 10.00 WIB</p>
<p><strong>Tempat:</strong> Gedung Serbaguna Pringsewu</p>
</div>
</div>
Langkah 3: Tambahkan CSS Internal untuk Foto dan Detail Acara
Masih di dalam tag <style> pada bagian <head>, tambahkan kode CSS berikut:
/* Foto Pasangan */
.foto-pasangan {
width: 100%;
max-width: 300px;
border-radius: 50%;
margin-top: 20px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
/* Detail Acara */
.detail-acara {
margin-top: 30px;
background: #fdf2f8;
padding: 15px;
border-radius: 10px;
}
.detail-acara h2 {
color: #b56576;
margin-bottom: 10px;
}
💡 Penjelasan: Kelas .foto-pasangan membuat foto menjadi bulat (radius 50%) dan memiliki bayangan agar tampil menonjol. Blok .detail-acara diberi latar lembut dan sudut membulat supaya informasi mudah dibaca.
Langkah 4: Simpan dan Lihat Hasilnya
Simpan file (Ctrl + S) lalu buka kembali di browser. Kini halaman undangan pernikahan sudah menampilkan foto pasangan berbentuk lingkaran yang cantik, serta detail acara yang jelas dan rapi.
Penjelasan Kode
<img src="pasangan.jpg">— Menampilkan foto pasangan dari file lokal..foto-pasangan— Mengubah foto menjadi bentuk lingkaran dan menambah efek bayangan..detail-acara— Membuat kotak info acara dengan background lembut dan tipografi yang rapi.
Di Part 4, kita akan menambahkan tombol interaktif seperti RSVP dan tautan Google Maps lokasi acara menggunakan JavaScript sederhana.