Tantangan Kilas Balik

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 60 dari 76.

Tantangan

Mudah

Sekarang setelah kamu mempelajari berbagai teknik penentuan posisi di CSS, termasuk relative, absolute, fixed, dan z-index, saatnya menguji pengetahuanmu dengan tantangan menyeluruh. Tantangan ini akan membantumu memperkuat pemahaman tentang cara menggunakan properti-properti ini secara bersamaan untuk membuat tata letak yang kompleks dan dinamis. Kamu akan menerapkan hal-hal yang telah dipelajari tentang setiap skema penentuan posisi untuk membuat ulang desain tertentu.

Kamu diberikan dokumen HTML untuk situs web restoran pizza. Tugasmu adalah menggunakan properti penentuan posisi CSS untuk menata elemen-elemen berikut agar menghasilkan tata letak yang rapi dan teratur.

Ikuti langkah-langkah berikut:

Penataan Header:
- Targetkan elemen <header>.
- Atur position ke fixed agar elemen tetap berada di bagian atas halaman.
- Atur top ke 0, left ke 0, dan width ke 100% untuk memastikan elemen membentang selebar halaman.
- Gunakan z-index sebesar 10 untuk memastikan header berada di atas elemen lain di halaman.
Penataan Bagian Menu:
- Targetkan class .menu.
- Atur position ke relative agar elemen dapat diposisikan relatif terhadap posisi normalnya dalam alur dokumen.
Penataan Kotak Promosi:
- Targetkan class .promotions.
- Atur position ke absolute untuk menempatkannya relatif terhadap bagian .menu.
- Atur top ke 100px dan right ke 20px untuk menempatkannya di bagian kanan atas menu.
- Gunakan z-index sebesar 5 untuk memastikan elemen tetap berada di bawah header, tetapi di atas konten lain dalam menu.

Coba sendiri

<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 Tetap -->
    <header>
        Pizza Restaurant
    </header>
    <!-- Bagian 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>
    <!-- Kotak Promosi -->
    <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>