Düğün Davetiyesi

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 75 / 76.

Görev

Kolay

Bu meydan okumada, düzen, tipografi ve boşluklara odaklanarak bir davetiye kartını şekillendirmek için CSS kullanacağız. Aşağıdaki resimde gösterilen tasarımı yeniden oluşturmak için dolgu (padding), kenar boşlukları (margins), kenarlıklar (borders) ve renkler gibi özellikleri uygulayacaksınız.

Size .invitation sınıfına sahip bir div, bir h2 başlığı ve birkaç paragraf içeren bir HTML belgesi verilmiştir. Göreviniz, bu düğün davetiyesini CSS kullanarak adım adım stilize etmektir.

Talimatları dikkatlice izleyin ve her stili sırasıyla uygulayın.

Adım 1: Gövdeyi (Body) Stilize Edin

body öğesini seçin.
Yazı tipi ailesini (font family) "Times New Roman", serif olarak ayarlayın.
Davetiye kartını mükemmel bir şekilde ortalamak için Flexbox özelliklerini kullanın.
Yüksekliği 100vh olarak ayarlayın.
Açık bir arka plan rengi (#f8f5f0) ayarlayın.

Adım 2: Davetiye Kartını Stilize Edin

.invitation sınıfını hedefleyin.
Beyaz bir arka plan rengi (#fff) ayarlayın.
2px solid gold bir kenarlık ekleyin.
Biraz dolgu (20px) ekleyin.
Genişliği 350px olarak ayarlayın.
Metni ortalayın.
Köşeleri yuvarlamak için bir border-radius ekleyin.
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1) kullanarak yumuşak bir gölge ekleyin.

Adım 3: Metni Stilize Edin

h2 öğelerini hedefleyin.
- Metin rengini goldenrod olarak ayarlayın.
- Yazı tipi boyutunu 22px yapın.
.names sınıfını seçin.
- El yazısı bir yazı tipi ("Dancing Script", cursive) kullanın.
- Yazı tipi boyutunu 26px olarak ayarlayın.
Tüm p öğelerini hedefleyin.
- Yazı tipi boyutunu 18px olarak ayarlayın.
- Metin rengini #5a4d3f olarak değiştirin.

Kendin dene

<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>