Assignment Solution

Simple Restaurant Web Page

Copy the code below into a Notepad File and save the file as VU_ID.html
Solution Code (paste into your editor)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Delish Dine Restaurant</title>

  <!-- Internal CSS (required) -->
  <style>
    /* Page layout */
    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      background: linear-gradient(180deg, #fffef6 0%, #f7fbff 100%); /* two background tones */
      color: #222; /* primary text color */
      line-height: 1.5;
    }

    .container {
      max-width: 900px;
      margin: 30px auto; /* center page */
      padding: 20px;
      background: #ffffffcc;
      border-radius: 10px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    }

    /* Header */
    header {
      text-align: center;
      padding: 12px 10px;
    }

    h1 {
      margin: 6px 0;
      font-size: 2.2rem;
      color: #b22222; /* heading color (red-ish) */
      letter-spacing: 0.5px;
    }

    h2.tagline {
      margin: 0;
      font-size: 1rem;
      color: #555;
      font-weight: 400;
    }

    hr.styled {
      border: 0;
      height: 6px;
      background: linear-gradient(90deg, #ff9a76, #ffd36e);
      margin: 18px auto;
      border-radius: 6px;
      width: 60%;
    }

    p.description {
      text-align: center;
      color: #333;
      margin: 14px auto 20px;
      max-width: 760px;
    }

    /* Menu table */
    section.menu {
      margin-top: 10px;
    }

    table.menu-table {
      width: 100%;
      border-collapse: collapse;
      margin: 8px 0 18px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    }

    table.menu-table th,
    table.menu-table td {
      padding: 10px 12px;
      border: 1px solid #e6e6e6;
      text-align: left;
    }

    table.menu-table thead th {
      background: #ffefe6;
      color: #8b3a2a;
      font-weight: 600;
    }

    table.menu-table tbody tr:nth-child(even) {
      background: #fffaf5;
    }

    .price {
      text-align: right;
      font-weight: 600;
      color: #1a5a7a;
    }

    /* Offers / Services */
    .offers {
      margin: 22px 0;
      padding: 12px;
      border-radius: 8px;
      background: linear-gradient(180deg, #e8f7ff 0%, #ffffff 100%);
      border: 1px solid #d7eefc;
    }

    .offers h3 {
      margin-top: 0;
      color: #0b66a3;
    }

    .offers ul {
      margin: 10px 0 0 18px;
      padding: 0;
    }

    .offers li {
      margin: 8px 0;
      padding: 8px;
      background: #ffffff;
      border-left: 4px solid #ffd36e;
      border-radius: 4px;
    }

    /* Contact form */
    .contact {
      margin-top: 18px;
      padding: 14px;
      border-radius: 8px;
      background: #fffefc;
      border: 1px solid #f0e6dd;
    }

    .contact label {
      display: block;
      margin: 8px 0 4px;
      font-weight: 600;
      color: #333;
    }

    .contact input[type="text"],
    .contact input[type="email"],
    .contact textarea {
      width: 100%;
      padding: 10px;
      border: 1px solid #dcdcdc;
      border-radius: 6px;
      box-sizing: border-box;
      font-size: 0.95rem;
    }

    .contact textarea {
      min-height: 100px;
      resize: vertical;
    }

    .contact button {
      margin-top: 10px;
      padding: 10px 16px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 700;
      background: linear-gradient(90deg,#ff9a76,#ff6b6b);
      color: white;
    }

    .contact button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 14px rgba(255,107,107,0.22);
    }

    /* Links and hover effects */
    a {
      color: #0b66a3; /* link color */
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
      color: #ff6b6b; /* hover color */
    }

    /* Small responsive tweaks */
    @media (max-width: 600px) {
      h1 { font-size: 1.6rem; }
      .container { margin: 12px; padding: 12px; }
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- Header -->
    <header>
      <h1>Delish Dine Restaurant</h1>
      <h2 class="tagline">Taste the joy — fresh, warm & homemade</h2>
      <hr class="styled" />
      <p class="description">
        Delish Dine is a friendly neighbourhood restaurant offering a comfortable atmosphere,
        seasonal specials, and dishes prepared from fresh ingredients. We serve a balanced menu
        with starters, satisfying mains, and delightful desserts — perfect for family dinners and
        small gatherings.
      </p>
    </header>

    <!-- Menu Section -->
    <section class="menu" aria-labelledby="menu-heading">
      <h3 id="menu-heading">Menu</h3>

      <table class="menu-table" aria-describedby="menu-description">
        <thead>
          <tr>
            <th>Dish Name</th>
            <th>Type</th>
            <th class="price">Price (PKR)</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Garlic Bread with Herb Dip</td>
            <td>Starter</td>
            <td class="price">350</td>
          </tr>
          <tr>
            <td>Classic Chicken Biryani</td>
            <td>Main</td>
            <td class="price">650</td>
          </tr>
          <tr>
            <td>Grilled Vegetable Pasta</td>
            <td>Main</td>
            <td class="price">520</td>
          </tr>
          <tr>
            <td>Chocolate Lava Cake</td>
            <td>Dessert</td>
            <td class="price">290</td>
          </tr>
          <tr>
            <td>Fresh Garden Salad</td>
            <td>Starter</td>
            <td class="price">280</td>
          </tr>
        </tbody>
      </table>

      <p id="menu-description" style="font-size:0.95rem; color:#555;">
        All prices are approximate and subject to change. Ask our staff about today's chef specials.
      </p>
    </section>

    <!-- Offers / Services -->
    <section class="offers" aria-labelledby="offers-heading">
      <h3 id="offers-heading">Offers & Services</h3>
      <div>
        <ul>
          <li>Happy Hour: 2-for-1 on selected beverages (4pm–6pm).</li>
          <li>Family Combo: Discounted price for meals ordered for 4 or more people.</li>
          <li>Free home delivery within 5 km on orders above PKR 1,200.</li>
          <li>Vegetarian & kids-friendly menu options available on request.</li>
        </ul>
      </div>
    </section>

    <!-- Contact Section -->
    <section class="contact" aria-labelledby="contact-heading">
      <h3 id="contact-heading">Contact Us</h3>

      <form action="#" method="post" onsubmit="alert('Form submission simulated — this is a sample page.'); return false;">
        <label for="name">Name</label>
        <input type="text" id="name" name="name" placeholder="Your full name" required />

        <label for="email">Email</label>
        <input type="email" id="email" name="email" placeholder="you@example.com" required />

        <label for="message">Message</label>
        <textarea id="message" name="message" placeholder="Write your question or feedback" required></textarea>

        <button type="submit">Send Message</button>
      </form>

      <p style="margin-top:10px; font-size:0.95rem;">
        Prefer calling? <a href="tel:+923001234567">Call us</a> or <a href="#reserve" title="Reserve a table">reserve a table</a>.
      </p>
    </section>
  </div>
</body>
</html>
Note: This content is shared for educational guidance only. Use it to get an idea and prepare your own assignment in your own words.