אתגר סיכום

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

אתגר

קל

באתגר החזרה הזה תשתמשו ב-width, height, margin, padding, and borders כדי לעצב תיבות מידע על ספרים. האתגר יבחן את יכולתכם לבנות מבנה לתוכן, ליצור ריווח ולהוסיף גבולות לפריסה נקייה.

ניתן לכם מסמך HTML עם שלושה אזורי div, שבכל אחד מהם מופיעים שם הספר, המחבר ותיאור קצר. המשימה שלכם היא לעצב את התיבות האלה באמצעות width, height, margin, padding, and borders.

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

כתבו כלל CSS באמצעות בורר מחלקה, שיבחר את כל הרכיבים עם המחלקה "book".
הגדירו את ה-width של כל תיבת ספר ל-350px ואת ה-height ל-150px.
הוסיפו padding של 15px בתוך כל תיבת ספר כדי ליצור מרווח סביב התוכן.
הגדירו לכל תיבת ספר גבול אחיד ברוחב 3px ובצבע שחור.
הוסיפו margin של 20px בין תיבות הספרים כדי ליצור ביניהן מרווח.

נסו בעצמכם

<html>
<head>
    <title>Book collection</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="book">
        <h3>Harry Potter and the Sorcerer's Stone</h3>
        <p>Author: J.K. Rowling</p>
        <p>Description: A young wizard's journey to defeat a dark wizard.</p>
    </div>

    <div class="book">
        <h3>The Great Gatsby</h3>
        <p>Author: F. Scott Fitzgerald</p>
        <p>Description: A tragic story of wealth, love, and betrayal in the 1920s.</p>
    </div>

    <div class="book">
        <h3>1984</h3>
        <p>Author: George Orwell</p>
        <p>Description: A dystopian novel about totalitarianism and surveillance.</p>
    </div>
</body>
</html>