רשימת סרטים

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

אתגר

קל

עצבו ארבעה כרטיסי סרטים וסדרו אותם בעמודה. העיצוב הסופי ייראה דומה לתמונה שלמטה, אבל אתם מוזמנים לבחור צבעים משלכם.

פעלו לפי השלבים הבאים:

השתמשו ב-display: flex; flex-direction: column; כדי לסדר את כרטיסי הסרטים בעמודה.
השתמשו ב-justify-content: center; כדי למרכז את העמודה אנכית.
השתמשו ב-align-items: center; כדי ליישר את הכרטיסים כראוי.
עצבו כל כרטיס סרט בגודל קבוע ובצבעים רכים.
הוסיפו margin-bottom ו-padding לכל תיבת סרט כדי ליצור מרווחים ביניהן ולשפר את הקריאות.
החילו box-sizing: border-box כדי למנוע בעיות מרווח לא רצויות.
השתמשו ב-overflow: auto כדי לטפל בטקסט נוסף בתוך הכרטיסים.

אתם מוזמנים להוסיף box-shadow, border-radius, font-family, ולבחור צבע גופן אחר לכותרת כדי לשדרג את העיצוב ולהפוך אותו למושך יותר מבחינה חזותית.

נסו בעצמכם

<html>
    <head>
        <title>Movies</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <div class="movies">
            <div class="movie">
                <h2>King Kong (2005)</h2>
                <p>A filmmaker and his crew travel to Skull Island, where they encounter King Kong.</p>
            </div>
            <div class="movie">
                <h2>Inception (2010)</h2>
                <p>A thief who enters dreams to steal secrets faces his toughest mission yet.</p>
            </div>
            <div class="movie">
                <h2>The Matrix (1999)</h2>
                <p>A hacker learns the truth about reality and joins the fight against machines.</p>
            </div>
            <div class="movie">
                <h2>Casablanca (1942)</h2>
                <p>A nightclub owner is reunited with his lost love during World War II.</p>
            </div>
        </div>
    </body>
</html>