Desafio de Recapitulação

Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 60 de 76.

Desafio

Fácil

Agora que você aprendeu várias técnicas de posicionamento em CSS, incluindo relative, absolute, fixed e z-index, é hora de colocar seu conhecimento à prova com um desafio abrangente. Este desafio ajudará você a consolidar seu entendimento sobre como usar essas propriedades juntas para criar layouts complexos e dinâmicos. Você aplicará o que aprendeu sobre cada esquema de posicionamento para recriar um design específico.

Você recebeu um documento HTML para o site de uma pizzaria. Sua tarefa é usar as propriedades de posicionamento CSS para estilizar os seguintes elementos e criar um layout limpo e organizado.

Siga os passos abaixo:

Estilização do Cabeçalho:
- Alvo o elemento <header>.
- Defina a position como fixed para que ele permaneça no topo da página.
- Defina o top como 0, left como 0 e width como 100% para garantir que ele abranja toda a largura da página.
- Use um z-index de 10 para garantir que o cabeçalho esteja acima de outros elementos na página.
Estilização da Seção do Menu:
- Alvo a classe .menu.
- Defina a position como relative para permitir que ela seja posicionada em relação à sua posição normal no fluxo.
Estilização da Caixa de Promoções:
- Alvo a classe .promotions.
- Defina a position como absolute para posicioná-la em relação à seção .menu.
- Defina top como 100px e right como 20px para posicioná-la no canto superior direito do menu.
- Use um z-index de 5 para garantir que ela permaneça abaixo do cabeçalho, mas acima de outros conteúdos no menu.

Folha de consulta

As propriedades de posicionamento CSS permitem que você controle o posicionamento dos elementos:

Posicionamento fixo (Fixed): O elemento permanece no lugar ao rolar a página

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

Posicionamento relativo (Relative): O elemento é posicionado em relação à sua posição normal

.menu {
  position: relative;
}

Posicionamento absoluto (Absolute): O elemento é posicionado em relação ao seu ancestral posicionado mais próximo

.promotions {
  position: absolute;
  top: 100px;
  right: 20px;
  z-index: 5;
}

Z-index: Controla a ordem de empilhamento de elementos posicionados (valores mais altos aparecem no topo)

Experimente você mesmo

<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>
    <!-- Cabeçalho Fixo -->
    <header>
        Pizza Restaurant
    </header>
    <!-- Seção do 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>
    <!-- Caixa de Promoções -->
    <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>