Skip to content

Latest commit

 

History

History
58 lines (52 loc) · 1.84 KB

Breakpoint-2.md

File metadata and controls

58 lines (52 loc) · 1.84 KB

Food Page Redesigned with Bootstrap

Below is the HTML code for the food page, but this time we're using Bootstrap to make it look even better!

<!DOCTYPE html>
<html>
  <head>
    <title>Food Lover's Paradise</title>
    <!-- Include Bootstrap CSS -->
    <link
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <!-- Header Section -->
    <header class="bg-info text-white text-center py-3">
      <h1>Food Lover's Paradise</h1>
    </header>

    <!-- Main Content -->
    <main class="container mt-4">
      <!-- Introduction -->
      <section>
        <h2>Welcome to Food Lover's Paradise!</h2>
        <p>
          Here, we offer a variety of delicious dishes that will satisfy your
          taste buds.
        </p>
      </section>

      <!-- Menu List -->
      <section>
        <h2>Our Menu</h2>
        <ul class="list-group">
          <li class="list-group-item">Pizza</li>
          <li class="list-group-item">Burgers</li>
          <li class="list-group-item">Pasta</li>
          <li class="list-group-item">Salads</li>
          <li class="list-group-item">Desserts</li>
        </ul>
      </section>

      <!-- Food Images -->
      <section>
        <h2>Some of Our Delicious Dishes</h2>
        <!-- Note: Replace 'image1.jpg', 'image2.jpg', etc. with actual image paths -->
        <img src="image1.jpg" alt="Food Image 1" class="img-fluid" />
        <img src="image2.jpg" alt="Food Image 2" class="img-fluid" />
        <img src="image3.jpg" alt="Food Image 3" class="img-fluid" />
      </section>
    </main>
  </body>
</html>

In this example, we've used Bootstrap classes like bg-info, text-white, text-center, py-3, container, mt-4, list-group, list-group-item, and img-fluid to style our page without writing any custom CSS!