Wyzwanie podsumowujące

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 60 z 76.

Wyzwanie

Łatwy

Teraz, gdy znasz już różne techniki pozycjonowania w CSS, w tym relative, absolute, fixed i z-index, czas sprawdzić swoją wiedzę w kompleksowym wyzwaniu. Pomoże ci ono utrwalić wiedzę o tym, jak używać tych właściwości razem, aby tworzyć złożone i dynamiczne układy. Wykorzystasz to, czego nauczyłeś się o poszczególnych schematach pozycjonowania, aby odtworzyć konkretny projekt.

Otrzymujesz dokument HTML witryny pizzerii. Twoim zadaniem jest użycie właściwości pozycjonowania CSS do stylizacji poniższych elementów, aby utworzyć przejrzysty i uporządkowany układ.

Wykonaj poniższe kroki:

Stylizacja nagłówka:
- Wybierz element <header>.
- Ustaw pozycję na fixed, aby nagłówek pozostawał u góry strony.
- Ustaw top na 0, left na 0, a width na 100%, aby nagłówek zajmował całą szerokość strony.
- Użyj wartości z-index równej 10, aby nagłówek znajdował się nad innymi elementami strony.
Stylizacja sekcji menu:
- Wybierz klasę .menu.
- Ustaw pozycję na relative, aby umożliwić pozycjonowanie elementu względem jego normalnej pozycji w przepływie dokumentu.
Stylizacja pola promocji:
- Wybierz klasę .promotions.
- Ustaw pozycję na absolute, aby umieścić pole względem sekcji .menu.
- Ustaw top na 100px i right na 20px, aby umieścić je w górnej prawej części menu.
- Użyj wartości z-index równej 5, aby pole pozostawało pod nagłówkiem, ale nad pozostałą zawartością menu.

Spróbuj swoich sił

<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>
    <!-- Przyklejony nagłówek -->
    <header>
        Pizza Restaurant
    </header>
    <!-- Sekcja menu -->
    <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>
    <!-- Ramka z promocjami -->
    <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>