Tekrar Mücadelesi

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 60 / 76.

Görev

Kolay

Artık CSS'te relative, absolute, fixed ve z-index dahil olmak üzere çeşitli konumlandırma tekniklerini öğrendiğinize göre, bilginizi kapsamlı bir meydan okumayla sınamanın zamanı geldi. Bu meydan okuma, karmaşık ve dinamik düzenler oluşturmak için bu özellikleri birlikte nasıl kullanacağınızı anlamanızı pekiştirmenize yardımcı olacak. Belirli bir tasarımı yeniden oluşturmak için her bir konumlandırma düzeni hakkında öğrendiklerinizi uygulayacaksınız.

Size bir pizza restoranı web sitesi için bir HTML belgesi veriliyor. Göreviniz, temiz ve düzenli bir düzen oluşturmak için aşağıdaki öğeleri CSS konumlandırma özelliklerini kullanarak biçimlendirmektir.

Aşağıdaki adımları izleyin:

Üst Bilgi Biçimlendirmesi:
- <header> öğesini hedefleyin.
- position değerini fixed olarak ayarlayarak sayfanın üst kısmında kalmasını sağlayın.
- top değerini 0, left değerini 0 ve width değerini 100% olarak ayarlayarak sayfanın tamamının genişliğini kapladığından emin olun.
- Üst bilginin sayfadaki diğer öğelerin üzerinde olmasını sağlamak için z-index değerini 10 olarak kullanın.
Menü Bölümü Biçimlendirmesi:
- .menu sınıfını hedefleyin.
- position değerini relative olarak ayarlayarak normal akıştaki normal konumuna göre konumlandırılmasına izin verin.
Promosyon Kutusu Biçimlendirmesi:
- .promotions sınıfını hedefleyin.
- .menu bölümüne göre konumlandırmak için position değerini absolute olarak ayarlayın.
- top değerini 100px ve right değerini 20px olarak ayarlayın.
- Üst bilginin altında, ancak menüdeki diğer içeriğin üzerinde kalmasını sağlamak için z-index değerini 5 olarak kullanın.

Kendin dene

<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>
    <!-- Sabit Başlık -->
    <header>
        Pizza Restaurant
    </header>
    <!-- Menü Bölümü -->
    <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>
    <!-- Promosyonlar Kutusu -->
    <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>