כרטיס הזמנה לחתונה

חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 75 מתוך 76.

אתגר

קל

באתגר הזה נשתמש ב-CSS כדי לעצב כרטיס הזמנה, תוך התמקדות בפריסה, בטיפוגרפיה ובריווח. תחילו מאפיינים כמו ריפוד, שוליים, גבולות וצבעים כדי ליצור מחדש את העיצוב שמוצג בתמונה שלהלן.

ניתן לכם מסמך HTML שמכיל div עם המחלקה .invitation, כותרת h2 וכמה פסקאות. המשימה שלכם היא לעצב את הזמנת החתונה הזו שלב אחר שלב באמצעות CSS.

פעלו לפי ההוראות בקפידה והחילו כל סגנון לפי הסדר.

שלב 1: עיצוב גוף המסמך

בחרו את הרכיב body.
הגדירו את משפחת הגופנים ל-"Times New Roman", serif.
השתמשו במאפייני Flexbox כדי למרכז את כרטיס ההזמנה באופן מושלם.
הגדירו את הגובה ל-100vh.
הגדירו צבע רקע בהיר (#f8f5f0).

שלב 2: עיצוב כרטיס ההזמנה

בחרו את המחלקה .invitation.
הגדירו צבע רקע לבן (#fff).
הוסיפו גבול 2px solid gold.
הוסיפו ריפוד (20px).
הגדירו את הרוחב ל-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>