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>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter