Skip to content

Latest commit

 

History

History
87 lines (81 loc) · 2.11 KB

Breakpoint-1.md

File metadata and controls

87 lines (81 loc) · 2.11 KB
Raw

Simple HTML Page About Food

Below is a simple HTML page about food. This example includes a header, a menu list, and images.

<!DOCTYPE html>
<html>
  <head>
    <title>Food Lover's Paradise</title>
    <!-- Basic CSS for styling -->
    <style>
      /* Add background color to the body */
      body {
        background-color: #f4f4f4;
      }
      /* Style the header */
      header {
        background-color: #50b3a2;
        color: white;
        text-align: center;
        padding: 1em;
      }
      /* Style the main content */
      main {
        padding: 20px;
      }
      /* Style the menu list */
      ul.menu-list {
        list-style-type: none;
        padding: 0;
      }
      ul.menu-list li {
        background-color: #fff;
        margin: 8px 0;
        padding: 10px;
        text-align: center;
      }
      /* Style the images */
      img.food-image {
        width: 100%;
        height: auto;
      }
    </style>
  </head>
  <body>
    <!-- Header Section -->
    <header>
      <h1>Food Lover's Paradise</h1>
    </header>

    <!-- Main Content -->
    <main>
      <!-- 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="menu-list">
          <li>Pizza</li>
          <li>Burgers</li>
          <li>Pasta</li>
          <li>Salads</li>
          <li>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="food-image" />
        <img src="image2.jpg" alt="Food Image 2" class="food-image" />
        <img src="image3.jpg" alt="Food Image 3" class="food-image" />
      </section>
    </main>
  </body>
</html>

This example should help you understand the basics of creating a simple webpage about food using HTML and CSS.