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

جزء من قسم التنسيق باستخدام 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>