Düğün Davetiyesi

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 75 / 76.

Görev

Kolay

Bu meydan okumada, yerleşim, tipografi ve boşluklara odaklanarak bir davetiye kartını biçimlendirmek için CSS kullanacağız. Aşağıdaki görselde gösterilen tasarımı yeniden oluşturmak için padding, margin, border ve renkler gibi özellikleri uygulayacaksın.

Sana div sınıfı .invitation olan bir HTML belgesi, bir h2 başlığı ve birkaç paragraf veriliyor. Görevin, bu düğün davetiyesini CSS kullanarak adım adım biçimlendirmek.

Talimatları dikkatlice takip et ve her stili sırayla uygula.

1. Adım: Body'yi Biçimlendirme

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

2. Adım: Davetiye Kartını Biçimlendirme

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

3. Adım: Metni Biçimlendirme

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

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>