אתגר סיכום

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

אתגר

קל

כעת, לאחר שלמדת טכניקות מיקום שונות ב-CSS, כולל relative, absolute, fixed ו-z-index, הגיע הזמן לבחון את הידע שלך באתגר מקיף. האתגר הזה יעזור לך לבסס את ההבנה שלך כיצד להשתמש במאפיינים האלה יחד כדי ליצור פריסות מורכבות ודינמיות. תיישם את מה שלמדת על כל אחת משיטות המיקום כדי לשחזר עיצוב מסוים.

ניתן לך מסמך HTML עבור אתר של מסעדת פיצה. המשימה שלך היא להשתמש במאפייני המיקום של CSS כדי לעצב את הרכיבים הבאים וליצור פריסה נקייה ומסודרת.

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

עיצוב הכותרת העליונה:
- בחר את הרכיב <header>.
- הגדר את position ל-fixed כך שהכותרת תישאר בראש הדף.
- הגדר את top ל-0, את left ל-0 ואת width ל-100% כדי לוודא שהיא תשתרע על פני כל רוחב הדף.
- השתמש בערך z-index של 10 כדי לוודא שהכותרת תהיה מעל רכיבים אחרים בדף.
עיצוב יחידת התפריט:
- בחר במחלקה .menu.
- הגדר את position ל-relative כדי לאפשר למקם אותה ביחס למיקום הרגיל שלה בזרימת המסמך.
עיצוב תיבת המבצעים:
- בחר במחלקה .promotions.
- הגדר את position ל-absolute כדי למקם אותה ביחס ליחידת .menu.
- הגדר את top ל-100px ואת right ל-20px כדי למקם אותה לכיוון החלק הימני העליון של התפריט.
- השתמש בערך z-index של 5 כדי לוודא שהיא תישאר מתחת לכותרת העליונה אך מעל לתוכן אחר בתפריט.

נסו בעצמכם

<html>
<head>
    <title>Pizza Restaurant</title>
    <style>
        /* Fixed Header */
        header {
            background-color: #ff6f61;
            padding: 20px;
            text-align: center;
            font-size: 24px;
            color: white;
        }
        /* Menu Section (Relative) */
        .menu {
            margin-top: 70px; /* Space for fixed header */
            padding: 20px;
            background-color: #f8f8f8;
            font-size: 18px;
        }
        /* Promotions Box (Absolute) */
        .promotions {
            background-color: #ffdf00;
            padding: 10px;
            font-size: 20px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <!-- כותרת עליונה קבועה -->
    <header>
        Pizza Restaurant
    </header>
    <!-- אזור התפריט -->
    <div class="menu">
        <h2>Our Menu</h2>
        <ul>
            <li>Margherita</li>
            <li>Pepperoni</li>
            <li>Veggie</li>
            <li>Hawaiian</li>
        </ul>       
        <p>Order now and enjoy!</p>
    </div>
    <!-- תיבת מבצעים -->
    <div class="promotions">
        <p>Get 20% off your first order!</p>
    </div>
    <div class="pizza-info">
        <h2>About Pizza</h2>
        <p>Pizza, a dish with origins in Italy, is one of the world's most beloved foods. It was first made in Naples during the 18th century, with the classic Margherita pizza being named after Queen Margherita of Savoy. The traditional pizza is known for its simple ingredients: a thin crust, tomato sauce, mozzarella cheese, and fresh basil.</p>
        <p>Over the years, pizza has evolved into a variety of regional styles, from thin-crust New York-style pizza to deep-dish Chicago pizza. While the toppings have diversified, the tradition of sharing a pizza with family and friends remains an essential part of the pizza experience.</p>
        <p>In Italy, pizza is often enjoyed casually, typically paired with a glass of wine or soda. It is a symbol of Italian culture, and many believe that a good pizza is a representation of the country's culinary expertise and passion for food.</p>
        <p>Pizza's global reach has led to many variations and adaptations in different countries. In Japan, for example, toppings like teriyaki chicken and squid are popular, while in Brazil, green peas and corn are commonly found on pizzas. In the United States, pizza has become a staple of fast food, with different regions offering their unique twists, such as the deep-dish pizza from Chicago and the thin crust of New York City.</p>
    </div>
</body>
</html>