רשימת סרטים

חלק מהיחידה עיצוב באמצעות 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>