Task 2 food

PHOTO EMBED

Thu Nov 21 2024 05:34:15 GMT+0000 (Coordinated Universal Time)

Saved by @sem 

Task 02

<!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 href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <header class="bg-warning text-center text-white py-4">
        <h1 class="font-weight-bold">ART BOUTIQUE RESTRO</h1>
        <nav>
            <ul class="nav justify-content-center">
                <li class="nav-item">
                    <a class="nav-link text-dark" href="#dishes">Available Dishes</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-dark" href="#reviews">Reviews</a>
                </li>
            </ul>
        </nav>
    </header>

    <main class="container my-5">
        <!-- Dishes Section -->
        <section id="dishes" class="text-center">
            <h2 class="mb-4">Available Dishes</h2>
            <div class="row">
                <div class="col-md-3 col-sm-6 mb-4">
                    <div class="card">
                        <img src="pizza.jpg" class="card-img-top" alt="Non-Veg Pizza">
                        <div class="card-body">
                            <h5 class="card-title">NON-VEG PIZZA</h5>
                            <p class="card-text">Round or square, thick or thin, every pizza is beautiful.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 mb-4">
                    <div class="card">
                        <img src="biryani.jpg" class="card-img-top" alt="Chicken Dum Biryani">
                        <div class="card-body">
                            <h5 class="card-title">CHICKEN DUM BIRYANI</h5>
                            <p class="card-text">A little bit of spice, a whole lot of flavor.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 mb-4">
                    <div class="card">
                        <img src="burger.jpg" class="card-img-top" alt="Veg and Non-Veg Burger">
                        <div class="card-body">
                            <h5 class="card-title">VEG AND NON-VEG BURGER</h5>
                            <p class="card-text">Life is too short to miss out on double cheeseburgers.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 mb-4">
                    <div class="card">
                        <img src="chocolatecake.jpg" class="card-img-top" alt="Chocolate Cakes">
                        <div class="card-body">
                            <h5 class="card-title">CHOCOLATE CAKES</h5>
                            <p class="card-text">Give me more life with a slice of chocolate cake.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Reviews Section -->
        <section id="reviews" class="text-center my-5">
            <h2 class="mb-4">Reviews</h2>
            <div class="row">
                <div class="col-md-4 mb-4">
                    <div class="card p-3 h-100">
                        <blockquote class="blockquote mb-0">
                            <p>"The pizza was incredible! I give the great staff & great pizza five stars!!!"</p>
                            <footer class="blockquote-footer">Shaik Sofiya</footer>
                        </blockquote>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card p-3 h-100">
                        <blockquote class="blockquote mb-0">
                            <p>"A perfect blend of fragrant rice, succulent meat, and aromatic spices, represents the essence of Hyderabadi cuisine."</p>
                            <footer class="blockquote-footer">Yerradi Shruthi</footer>
                        </blockquote>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card p-3 h-100">
                        <blockquote class="blockquote mb-0">
                            <p>"One can choose the best and really big burgers which can fill your stomach."</p>
                            <footer class="blockquote-footer">Asima Shareef</footer>
                        </blockquote>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.6/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
content_copyCOPY