قائمة الأفلام

جزء من قسم Styling with 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>