Restaurant Home Page Enhancement

Business Scenario

The client is impressed with the first version of the BiteBox homepage developed in LAB-01. However, they believe the homepage still lacks sufficient information to build customer trust and encourage visitors to explore the restaurant further.

To make the homepage more engaging, the client has requested additional content that introduces the restaurant, highlights its values, and provides important customer information.

As a Frontend Developer, your responsibility is to enhance the existing BiteBox homepage by adding meaningful sections without changing the existing webpage structure.

By the end of this lab, the homepage should give visitors a clearer view of the restaurant with a tidy HTML layout.

Pre-Lab Preparation

Module: HTML Foundations: From Web Basics to Page Content

1) Navigating the world of Web

2) Getting Started With HTML

3) Text, Headings, and Basic Content Tags

git pull origin branchName

Git Pull

Task 1: Enhance the Homepage with the Restaurant Story

Insert a horizontal rule after about section and below the horizontal rule, create a new section heading and add the following paragraph below the heading.

1


<hr>

<h2> Our Story </h2>

<p>

  BiteBox started with a simple mission—to serve fresh, delicious meals 
  prepared with quality ingredients and delivered with exceptional 
  service. Every meal is crafted with care to bring happiness to our 
  customers.
  
</p>

Check the output

2

Insert a horizontal rule after Our Story section and below the horizontal rule, create a new section heading as Chef's message and add the following message below the heading.

1

Task 2: Enhance the Homepage with Chef's message


<hr>
<h2> Chef's Message </h2>
<p>
<em>
Every dish at BiteBox is prepared with fresh ingredients, authentic recipes,
and a passion for delivering memorable dining experiences.
</em>
</p>

Check the output

2

Insert a horizontal rule below Todays Featured Dishes and below the horizontal rule, create a new section Today's Special Offer and display the promotional offer

1

Task 3: Add Today's Special Offer


<hr>

<h2> Today's Special Offer </h2>

<p>

Get <strong>20% OFF</strong> on all Combo Meals.

</p>

Display offer validity

2


<hr>

<h2> Today's Special Offer </h2>

<p> Get <strong>20% OFF</strong> on all Combo Meals. </p>

<p>

Offer Valid Till

31<sup>st</sup> July

</p>

Check the output

3

Insert a horizontal rule below Special Offers section and below the horizontal rule, create a new section Contact Information and add the following information

1

Task 3: Add Contact Information

<hr>
<h2> Contact Information </h2>
<p>

Phone : +91 98765 43210
<br>
Email : contact@bitebox.com
<br>
Location : Pune, Maharashtra

</p>

Check the output

2

Insert a horizontal rule below Contact Information and below the horizontal rule, create a new section Customer Notice and add the notice

1

Task 4: Add Customer Notice

<hr>
<h2> Customer Notice </h2>
<p>
  
<mark>
Free home delivery is available on orders above ₹499.
</mark>
  
</p>

Add one more notice

2

<hr>

<h2> Customer Notice </h2>

<p> 
  
<mark> Free home delivery is available on orders above ₹499. </mark> 
  
</p>

<p>
Delivery services are available from 10:00 AM to 11:00 PM.
</p>

Check the Output

3

Final Code

4

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BiteBox</title>
</head>

<body>
    <!-- Restaurant Name -->
    <h1><mark>BiteBox</mark></h1>

    <!-- Welcome Section -->
    <h2>Welcome to BiteBox</h2>
    <p>
        <strong>Fresh Food</strong>
        •
        <em>Fast Delivery</em>
    </p>

 <!-- About section -->
    <hr>
    <h2>About BiteBox</h2>
    <p>
        BiteBox is your one-stop destination for delicious meals prepared using fresh 
        ingredients and delivered quickly to your doorstep.
    </p>

    <!--Restaurant Story -->

    <hr>
    <h2> Our Story </h2>

    <p>
        BiteBox started with a simple mission—to serve fresh, delicious meals
        prepared with quality ingredients and delivered with exceptional
        service. Every meal is crafted with care to bring happiness to our
        customers.
    </p>

    <!-- Chef's Message-->
    <hr>
    <h2> Chef's Message </h2>
    <p>
        <em>
            Every dish at BiteBox is prepared with fresh ingredients,authentic recipes,
            and a passion for delivering memorable dining experiences.
        </em>
    </p>

<!--Todays Featured Dishes -->
    <hr>
    <h2>Today's Featured Dishes</h2>

    <p>Pizza</p>

    <p>Burger</p>

    <p>Pasta</p>


    <!--Todays Special Offers -->
    <hr>
    <h2> Today's Special Offer </h2>

    <p> Get <strong>20% OFF</strong> on all Combo Meals. </p>

    <p>

        Offer Valid Till

        31<sup>st</sup> July

    </p>


    <!--Contact Information-->
    <hr>
    <h2> Contact Information </h2>
   
 <p>
   
        Phone : +91 98765 43210
   
        <br>
   
        Email : contact@bitebox.com
   
        <br>
   
        Location : Pune, Maharashtra
   
    </p>


    <!-- Customer Notice -->
    <hr>

    <h2> Customer Notice </h2>

    <p>
        <mark> Free home delivery is available on orders above ₹499. </mark>
    </p>

    <p>
        Delivery services are available from 10:00 AM to 11:00 PM.
    </p>

    <hr>

  
  <h2>Opening Hours</h2>

    <p>
        Monday - Sunday
        <br>
        10:00 AM - 11:00 PM
    </p>

    <hr>

    <p>
        © 2026 BiteBox
    </p>

    <hr>



</body>

</html>

Final Output

5

 

Great job!

You have successfully enhanced the BiteBox homepage by adding the restaurant story, chef's message, special offers, contact information, and customer notices.

Checkpoint

   Git Push

git push origin branchName

Next-Lab Preparation

Before attempting this lab, learners should have completed:

  • LAB-01 – BiteBox Landing Page

  • LAB-02 – Restaurant Home Page Enhancemen.

Web Design - Lab 2

By Content ITV

Web Design - Lab 2

  • 8

More from Content ITV