بطاقة دعوة زفاف

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 75 من 76.

التحدي

سهل

في هذا التحدي، سنستخدم CSS لتنسيق بطاقة دعوة، مع التركيز على التخطيط، والطباعة، والتباعد. ستقوم بتطبيق خصائص مثل padding، و margins، و borders، والألوان لإعادة إنشاء التصميم الموضح في الصورة أدناه.

لقد تم تزويدك بمستند HTML يحتوي على div بالفئة .invitation، وعنوان h2، وعدة فقرات. مهمتك هي تنسيق دعوة الزفاف هذه خطوة بخطوة باستخدام CSS.

اتبع التعليمات بعناية وقم بتطبيق كل نمط بالترتيب.

الخطوة 1: تنسيق الجسم (Body)

حدد عنصر body.
اضبط عائلة الخط (font family) على "Times New Roman", serif.
استخدم خصائص Flexbox لتوسيط بطاقة الدعوة تماماً.
اضبط الارتفاع (height) على 100vh.
اضبط لون خلفية فاتح (#f8f5f0).

الخطوة 2: تنسيق بطاقة الدعوة

استهدف الفئة .invitation.
اضبط لون خلفية أبيض (#fff).
أضف إطاراً (border) بقيمة 2px solid gold.
أضف بعض الحشوة (padding) بقيمة 20px.
اضبط العرض (width) على 350px.
قم بتوسيط النص.
أضف border-radius لتدوير الزوايا.
أضف ظلاً ناعماً باستخدام box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1).

الخطوة 3: تنسيق النص

استهدف عناصر h2.
- اضبط لون النص على goldenrod.
- اجعل حجم الخط 22px.
حدد الفئة .names.
- استخدم خطاً مائلاً ("Dancing Script", cursive).
- اضبط حجم الخط على 26px.
استهدف جميع عناصر p.
- اضبط حجم الخط على 18px.
- غير لون النص إلى #5a4d3f.

جرّب بنفسك

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