Task 01 food

PHOTO EMBED

Thu Nov 21 2024 05:33:46 GMT+0000 (Coordinated Universal Time)

Saved by @sem 

Task 01.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Art Boutique Restro</title>
    <link rel="stylesheet" href="food.css">
</head>
<body>
    <header>
        <h1>ART BOUTIQUE RESTRO</h1>
        <nav>
            <ul>
                <li><a href="#dishes">Available Dishes</a></li>
                <li><a href="#reviews">Reviews</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="dishes" class="grid-container">
            <div class="grid-item">
                <img src="pizza.jpg" alt="Non-Veg Pizza">
                <h2>NON-VEG PIZZA</h2>
                <p>Round or square, thick or thin, every pizza is beautiful.</p>
            </div>
            <div class="grid-item">
                <img src="biryani.jpg" alt="Chicken Dum Biryani">
                <h2>CHICKEN DUM BIRYANI</h2>
                <p>A little bit of spice, a whole lot of flavor.</p>
            </div>
            <div class="grid-item">
                <img src="burger.jpg" alt="Veg and Non-Veg Burger">
                <h2>VEG AND NON-VEG BURGER</h2>
                <p>Life is too short to miss out on double cheeseburgers.</p>
            </div>
            <div class="grid-item">
                <img src="chocolatecake.jpg" alt="Chocolate Cakes">
                <h2>CHOCOLATE CAKES</h2>
                <p>Give me more life with a slice of chocolate cake.</p>
            </div>
        </section>
        <section id="reviews" class="flex-container">
            <h1>REVIEWS</h1>
            <div class="flex-item">
                <blockquote>"The pizza was incredible! Five stars!!!" <footer>- Shaik Sofiya</footer></blockquote>
            </div>
            <div class="flex-item">
                <blockquote>"A perfect blend of fragrant rice and spices." <footer>- Yerradi Shruthi</footer></blockquote>
            </div>
            <div class="flex-item">
                <blockquote>"Big burgers that can fill your stomach." <footer>- Asima Shareef</footer></blockquote>
            </div>
        </section>
    </main>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Times New Roman', Times, serif;
    color: black;
    background-color: white;
}

header {
    background: #c0b857;
    color: #fff;
    text-align: center;
    padding: 1rem;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
    animation: fadeIn 2s ease-in;
}

.grid-item {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    text-align: center;
}

.grid-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.flex-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 20px;
}

.flex-item {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin: 10px;
    text-align: center;
    transition: transform 0.3s ease;
}

blockquote footer {
    text-align: right;
    font-size: 0.9rem;
    color: #555;
}

.grid-item:hover, .flex-item:hover {
    transform: scale(1.05);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
content_copyCOPY