Sfida di ripasso

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 60 di 76.

Sfida

Facile

Ora che hai imparato diverse tecniche di posizionamento in CSS, tra cui relative, absolute, fixed e z-index, è il momento di mettere alla prova le tue conoscenze con una sfida completa. Questa sfida ti aiuterà a consolidare la comprensione di come usare insieme queste proprietà per creare layout complessi e dinamici. Metterai in pratica ciò che hai imparato su ciascun metodo di posizionamento per ricreare un design specifico.

Ti viene fornito un documento HTML per il sito web di una pizzeria. Il tuo compito è usare le proprietà di posizionamento CSS per definire lo stile dei seguenti elementi e creare un layout pulito e organizzato.

Segui i passaggi qui sotto:

Stile dell'intestazione:
- Seleziona l'elemento <header>.
- Imposta position su fixed in modo che rimanga nella parte superiore della pagina.
- Imposta top su 0, left su 0 e width su 100% per assicurarti che occupi l'intera larghezza della pagina.
- Usa z-index pari a 10 per assicurarti che l'intestazione si trovi sopra gli altri elementi della pagina.
Stile della sezione del menu:
- Seleziona la classe .menu.
- Imposta position su relative per consentire il posizionamento rispetto alla sua posizione normale nel flusso.
Stile del riquadro delle promozioni:
- Seleziona la classe .promotions.
- Imposta position su absolute per posizionarlo rispetto alla sezione .menu.
- Imposta top su 100px e right su 20px per posizionarlo verso l'angolo in alto a destra del menu.
- Usa z-index pari a 5 per assicurarti che rimanga sotto l'intestazione ma sopra gli altri contenuti del menu.

Provalo tu

<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>
    <!-- Intestazione fissa -->
    <header>
        Pizza Restaurant
    </header>
    <!-- Sezione del 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>
    <!-- Riquadro delle promozioni -->
    <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>