אתגר סיכום

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

אתגר

קל

באתגר החזרה הזה, תשתמשו ב־box-sizing, border-radius, overflow, and box-shadow כדי לעצב כתבות בעיתון. האתגר יבחן את היכולת שלכם לשלוט בממדים, לטפל בתוכן גליש, ולשפר את המראה החזותי.

ניתן לכם מסמך HTML עם שתי חלוקות <div>, שכל אחת מהן מייצגת כתבה בעיתון. המשימה שלכם היא לעצב את הכתבות באמצעות box-sizing, border-radius, overflow, and box-shadow כדי לשפר את המראה שלהן.

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

כתבו כלל CSS שיחול על כל החלוקות מסוג <div>.

הגדירו את הרוחב ל־280px ואת הגובה ל־150px.
השתמשו ב־box-sizing: border-box; כדי לוודא שהריפוד והגבולות נכללים בגודל הכולל.
הוסיפו ריפוד של 15px בתוך כל כתבה כדי ליצור מרווח מסביב לתוכן.
הגדירו גבול רציף ברוחב 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>