Итоговое испытание

Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 60 из 76.

Задание

Легко

Теперь, когда вы изучили различные методы позиционирования в CSS, включая relative, absolute, fixed и z-index, пришло время проверить ваши знания на практике с помощью комплексного задания. Это испытание поможет вам закрепить понимание того, как использовать эти свойства вместе для создания сложных и динамичных макетов. Вы примените то, что узнали о каждой схеме позиционирования, чтобы воссоздать определенный дизайн.

Вам предоставлен HTML-документ для сайта пиццерии. Ваша задача — использовать свойства позиционирования CSS для стилизации следующих элементов, чтобы создать чистый и организованный макет.

Следуйте инструкциям ниже:

Стилизация заголовка (Header):
- Выберите элемент <header>.
- Установите position в значение fixed, чтобы он оставался в верхней части страницы.
- Установите top в 0, left в 0 и width в 100%, чтобы он растягивался на всю ширину страницы.
- Используйте z-index со значением 10, чтобы заголовок находился поверх других элементов на странице.
Стилизация раздела меню:
- Выберите класс .menu.
- Установите position в значение relative, чтобы его можно было позиционировать относительно его обычного положения в потоке.
Стилизация блока акций (Promotions):
- Выберите класс .promotions.
- Установите position в значение absolute, чтобы разместить его относительно раздела .menu.
- Установите top в 100px и right в 20px, чтобы расположить его в верхней правой части меню.
- Используйте z-index со значением 5, чтобы он оставался ниже заголовка, но выше остального содержимого в меню.

Шпаргалка

Свойства позиционирования CSS позволяют управлять размещением элементов:

Фиксированное позиционирование: Элемент остается на месте при прокрутке

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

Относительное позиционирование: Элемент позиционируется относительно своего обычного положения

.menu {
  position: relative;
}

Абсолютное позиционирование: Элемент позиционируется относительно своего ближайшего позиционированного родителя

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

Z-index: Управляет порядком наложения позиционированных элементов (более высокие значения отображаются сверху)

Попробуйте сами

<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>