تحدي المراجعة

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 43 من 76.

التحدي

سهل

في تحدي المراجعة هذا، ستستخدم box-sizing، و border-radius، و overflow، و box-shadow لتنسيق مقالات صحفية. سيختبر هذا قدرتك على التحكم في الأبعاد، والتعامل مع تجاوز المحتوى (overflow)، وتحسين المظهر البصري.

لقد تم تزويدك بمستند HTML يحتوي على قسمين من نوع <div>، يمثل كل منهما مقالاً صحفياً. مهمتك هي تنسيق هذه المقالات باستخدام box-sizing، و border-radius، و overflow، و box-shadow لتحسين مظهرها.

اتبع الخطوات أدناه:

اكتب قاعدة CSS تستهدف جميع أقسام <div>.

اضبط العرض (width) على 280px والارتفاع (height) على 150px.
استخدم box-sizing: border-box; لضمان تضمين الحواف (padding) والحدود (borders) ضمن الحجم الإجمالي.
أضف padding بمقدار 15px داخل كل مقال لإنشاء مساحة حول المحتوى.
ضع حدوداً متصلة (solid border) بعرض 3px ولون رمادي غامق (#444).
قم بتطبيق border-radius بمقدار 10px لتدوير الزوايا.
أضف box-shadow بقيمة 4px 4px 8px rgba(0, 0, 0, 0.2) لإعطاء تأثير ارتفاع بسيط.
اضبط overflow: scroll; حتى يتمكن المستخدمون من التمرير عبر المحتوى الزائد.

جرّب بنفسك

<html>
<head>
    <title>Newspaper Layout Challenge</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="headline">
        <h3>Biggest Tech Breakthrough of 2025!</h3>
        <p>Scientists have unveiled a revolutionary AI model that can predict climate changes with 99% accuracy.  
        This groundbreaking innovation is expected to transform how governments and organizations respond to global  
        warming, extreme weather events, and natural disasters. Experts believe that integrating AI-driven forecasting  
        with existing climate policies will significantly reduce environmental damage over the next decade.</p>
    </div>
    <div class="article">
        <h3>Opinion: The Future of Web Design</h3>
        <p>As CSS evolves, developers are experimenting with more dynamic layouts and interactive user experiences...</p>
    </div>
</body>
</html>