Kartu Undangan Pernikahan

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 75 dari 76.

Tantangan

Mudah

Dalam tantangan ini, kita akan menggunakan CSS untuk menata kartu undangan, dengan fokus pada tata letak, tipografi, dan jarak. Kamu akan menerapkan properti seperti padding, margin, border, dan warna untuk membuat ulang desain yang ditampilkan pada gambar di bawah.

Kamu diberi dokumen HTML yang berisi div dengan class .invitation, heading h2, dan beberapa paragraf. Tugasmu adalah menata undangan pernikahan ini langkah demi langkah menggunakan CSS.

Ikuti instruksi dengan cermat dan terapkan setiap gaya secara berurutan.

Langkah 1: Menata Body

Pilih elemen body.
Atur font family ke "Times New Roman", serif.
Gunakan properti Flexbox untuk memusatkan kartu undangan dengan sempurna.
Atur tinggi ke 100vh.
Atur warna latar belakang yang terang (#f8f5f0).

Langkah 2: Menata Kartu Undangan

Targetkan class .invitation.
Atur warna latar belakang putih (#fff).
Tambahkan border 2px solid gold.
Tambahkan padding (20px).
Atur lebar ke 350px.
Pusatkan teks.
Tambahkan border-radius untuk membulatkan sudut.
Tambahkan bayangan lembut menggunakan box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1).

Langkah 3: Menata Teks

Targetkan elemen h2.
- Atur warna teks ke goldenrod.
- Atur ukuran font ke 22px.
Pilih class .names.
- Gunakan font cursive ("Dancing Script", cursive).
- Atur ukuran font ke 26px.
Targetkan semua elemen p.
- Atur ukuran font ke 18px.
- Ubah warna teks ke #5a4d3f.

Coba sendiri

<html>
    <head>
        <title>Invitation Card</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <div class="invitation">
            <h2>Wedding Invitation</h2>
            <p class="names">Emma & James</p>
            <p class="message">Together with their families, invite you to celebrate their wedding.</p>
            <p class="detail"><strong>Date:</strong> Saturday, June 15, 2025</p>
            <p class="detail"><strong>Time:</strong> 4:00 PM - Reception to follow</p>
            <p class="detail"><strong>Venue:</strong> Rosewood Garden, Lakeview</p>
            <p class="note">Please RSVP by May 20th</p>
            <p class="footer">We look forward to celebrating with you!</p>
        </div>
    </body>
</html>