Now that we have structured our header section, it's time to move forward to the body. The webpage's body contains our page's main content that we want the audience to look at. It is divided into multiple sections, some of the common ones are as follows:
- Gallery: Contains the images related to your business or the website.
- About: Some brief details about your business or website.
- Features: If you have a software or hardware product, you can include this section to highlight features.
- Testimonials: Some reviews from your customers.
- Services: If you own a business or provide any services, you can add this section to highlight your services.
- Contact: Provide a way for your visitors to contact you.
- Menu: This section will highlight some dishes on our menu.
- Popular: This will highlight some popular dishes with an Add to Cart button for quick buying.
- Customer Reviews: In this section, we will add some reviews.
- About Us: We will talk about our business in this section.
- Contact Us: A form where users can submit their queries.
However, it totally depends upon what sections you include in your webpage. Since we are designing a food-ordering website, we'll add the following sections to our page:
To design this part, first collect some resources. Download some free images of different dishes. I will add some desi items such as Chicken Biryani, Chicken Karahi, Chicken Qorma, Chicken Seekh Kabab, etc. Besides this, we will get the images for other sections while designing them. Make sure to save the images in the same folder as your webpage or add the correct path while defining the src attribute.
Building the Body of the Webpage
Defining the Menu Div
First of all, we will design the Menu section. This div will go after the Hero div we created in the previous lesson. We will assign the classes to each div while defining them.
<!--Menu-->
<div class="section">
<h1 class="heading">Menu</h1>
<!--Menu Items-->
<div class="menu_item">
<!--Item Image-->
<div class="item_img">
</div>
<!--Item Name-->
<div class="item_text">
</div>
<div class="item_img">
</div>
<div class="item_text">
</div>
<div class="item_img">
</div>
<div class="item_text">
</div>
</div>
</div>
Here's is the demonstration of the classes I have assigned to the different divs:
- Section: A reusable class to divide the webpage into multiple sections with similar properties.
- Menu_item: Another reusable class to define multiple menu items.
- Item_img: We'll set the menu item's image with this class.
- Item_text: We'll set the position of the menu item's names with this class.
Adding Content to the Menu Div
Once you have created these sections, add the images and text in the corresponding divs. We will temporarily assign the width and height attributes to the images since image sizes will be handled via CSS.
<!--Menu-->
<div class="section">
<h1 class="heading">Menu</h1>
<!--Menu Items-->
<div class="menu_item">
<!--Item Image-->
<div class="item_img">
<img src="images/Biryani.jpg" width="100px" height="100px"/>
</div>
<!--Item Name-->
<div class="item_text">
<h3>Chicken Biryani</h3>
</div>
<div class="item_img">
<img src="images/Karahi.jpg" width="100px" height="100px"/>
</div>
<div class="item_text">
<h3>Chicken Karahi</h3>
</div>
<div class="item_img">
<img src="images/Qorma.jpg" width="100px" height="100px"/>
</div>
<div class="item_text">
<h3>Chicken Qorma</h3>
</div>
<div class="item_img">
<img src="images/Kababs.jpg" width="100px" height="100px"/>
</div>
<div class="item_text">
<h3>Chicken Seekh Kabab</h3>
</div>
</div>
</div>
Defining the Popular Div
Here, we will add menu items such as popular dishes. Also, we'll define an Add to Cart button for quick buying.
<!--Popular-->
<div class="section">
<h1 class="heading">Popular</h1>
<!--Popular Item-->
<div class="menu_item">
<div class="item_img">
</div>
<div class="item_text">
</div>
<!--Add to Cart-->
<div class="add_to_cart">
</div>
</div>
</div>
<!--Popular Item-->
<div class="menu_item">
<div class="item_img">
</div>
<div class="item_text">
</div>
<!--Add to Cart-->
<div class="add_to_cart">
</div>
</div>
</div>
Adding Content to the Popular Div
Now that we have defined the structure, it's time to add content to the Popular div.
<!--Popular-->
<div class="section">
<h1 class="heading">Popular</h1>
<!--Popular Item-->
<div class="menu_item">
<!--Items-->
<div class="item_img">
<img src="images/Biryani.jpg" width="100px" height="100px"/>
</div>
<div class="item_text">
<h3> Chicken Biryani</h3>
</div>
<!--Add to Cart-->
<div class="add_to_cart">
<button class="nav_btn"> Add to Cart </button>
</div>
</div>
</div>
You can add as many items as you want by copying and pasting the code from <!- - Item--> to the Add to Cart button.
Defining the Customer Reviews Div
Like Menu and Popular divs, we'll reuse the section class to define this div and add content to it.
<div class="section">
<h1 class="heading">Reviews</h1>
<!--Customer Name-->
<div class="review">
<div class="name">
</div>
<!--Review-->
<div class="review_text">
</div>
<!--Stars-->
<div class="review_stars">
</div>
</div>
</div>
Adding Content to the Customer Reviews Div
Add <p> tags for the customer name and review in the corresponding divs. We'll use a static image for the stars under the Stars div.
<!--Customer Reviews-->
<div class="section">
<h1 class="heading">Reviews</h1>
<div class="review">
<!--Customer Name-->
<div class="name">
<p>John Smith</p>
</div>
<!--Review-->
<div class="review_text">
<p> I have never had such an amazing food ever!
</div>
<!--Stars-->
<div class="review_stars">
<img class="stars" src="images/5_stars.svg" width="30px" height="30px"/>
</div>
</div>
</div>
Creating the About Us Div
In this section, we will add some dummy text and an image of a restaurant.
<!--About Us-->
<div class="section">
<h1 class="heading">About Us</h1>
<!--About Us Text-->
<div class="about_text">
</div>
<!--About Us Image-->
<div class="item_img">
</div>
</div>
Adding Content to the About Us Div
Let's generate some Lorem Ipsum text, add it to the text div, and upload a free restaurant image to the image div.
<!--About Us Text-->
<div class="about _text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In massa arcu, rhoncus ut eros dapibus, pretium ornare felis. Aliquam feugiat erat quis nulla sagittis, non dictum diam faucibus. Phasellus bibendum commodo dolor, ut finibus tortor dapibus et. Nullam tincidunt placerat nisi id tempor. Sed dictum justo nec mauris porttitor, a dictum enim accumsan. Quisque malesuada lobortis consequat. Nunc at rhoncus tortor. Cras accumsan tempor dui, at aliquet diam tempus ac. Vivamus consectetur lacinia quam, a consequat velit finibus id. Sed et nunc lectus.</p>
</div>
<!--About Us Image-->
<div class="item_img">
<img src="images/restaurant.jpg" width="200px" height="200px"/>
</div>
</div>
Creating the Contact Us Div
Now, we'll add a Contact Us form to help customers reach out to us if they face any problems.
<!--Contact Us-->
<div class="section">
<h1 class="heading">Contact Us</h1>
<div class="contact_us">
<form>
<label class="lbl">Full Name</label>
<input class="user_input" type="text" placeholder="Enter your full name"/>
<label class="lbl">Email</label>
<input class="user_input" type="email" placeholder="Enter your email"/>
<label class="lbl">Message</label>
<input class="user_input" type="textarea" placeholder="Enter your message"/>
<button class="nav_btn">Submit</button>
</form>
</div>
</div>
We have successfully created the body sections. This is how your final code should look like:
<!DOCTYPE HTML>
<html>
<head>
<title>Bellylicious</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!--main div-->
<div class="container">
<!--Header-->
<div class="header">
<!--Logo-->
<div class="logo"><h1 class="heading">Bellylicious </h1>
</div>
<!--Navigation-->
<div class="nav">
<button class="nav_btn">Home</button>
<button class="nav_btn">Menu </button>
<button class="nav_btn">Order</button>
<button class="nav_btn">About Us</button>
<button class="nav_btn">Contact</button>
</div>
</div>
<!--Hero-->
<div class="hero">
<img class="bg_img" src="images/background_image.jpg" width="1350px" height="300px"/>
<h1 class="hero_text">Bellylicious - Delicious Food Delivered!</h1>
</div>
<!--Menu-->
<div class="section">
<h1 class="heading">Menu</h1>
<!--Menu Items-->
<div class="menu_item">
<!--Item Image-->
<div class="item_img">
<img src="images/Biryani.jpg" width="100px" height="100px"/>
</div>
<!--Item Name-->
<div class="item_text">
<h3>Chicken Biryani</h3>
</div>
<div class="item_img">
<img src="images/Karahi.jpg" width="100px" height="100px"/>
</div>
<div class="item_text">
<h3>Chicken Karahi</h3>
</div>
<div class="item_img">
<img src="images/Qorma.jpg" width="100px" height="100px"/>
</div>
<div class="item_text">
<h3>Chicken Qorma</h3>
</div>
<div class="item_img">
<img src="images/Kababs.jpg" width="100px" height="100px"/>
</div>
<div class="item_text">
<h3>Chicken Seekh Kabab</h3>
</div>
</div>
</div>
<!--Popular-->
<div class="section">
<h1 class="heading">Popular</h1>
<!--Popular Item-->
<div class="menu_item">
<!--Items-->
<div class="item_img">
<img src="images/Biryani.jpg" width="100px" height="100px"/>
</div>
<div class="item_text">
<h3> Chicken Biryani</h3>
</div>
<!--Add to Cart-->
<div class="add_to_cart">
<button class="btn"> Add to Cart </button>
</div>
</div>
</div>
<!--Customer Reviews-->
<div class="section">
<h1 class="heading">Customer Reviews</h1>
<!--Customer Name-->
<div class="name">
<p>John Smith</p>
</div>
<!--Review-->
<div class="item_text">
<p> I have never had such an amazing food ever!
</div>
<!--Stars-->
<div class="item_img">
<img src="images/5_stars.svg" width="30px" height="30px"/>
</div>
</div>
<!--About Us-->
<div class="section">
<h1 class="heading">About Us</h1>
<!--About Us Text-->
<div class="about_text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In massa arcu, rhoncus ut eros dapibus, pretium ornare felis. Aliquam feugiat erat quis nulla sagittis, non dictum diam faucibus. Phasellus bibendum commodo dolor, ut finibus tortor dapibus et. Nullam tincidunt placerat nisi id tempor. Sed dictum justo nec mauris porttitor, a dictum enim accumsan. Quisque malesuada lobortis consequat. Nunc at rhoncus tortor. Cras accumsan tempor dui, at aliquet diam tempus ac. Vivamus consectetur lacinia quam, a consequat velit finibus id. Sed et nunc lectus.</p>
</div>
<!--About Us Image-->
<div class="item_img">
<img src="images/restaurant.jpg" width="200px" height="200px"/>
</div>
</div>
<!--Contact Us-->
<div class="section">
<h1 class="heading">Contact Us</h1>
<div class="contact_us">
<form>
<label class="lbl">Full Name</label>
<input class="user_input" type="text" placeholder="Enter your full name"/>
<label class="lbl">Email</label>
<input class="user_input" type="email" placeholder="Enter your email"/>
<label class="lbl">Message</label>
<input class="user_input" type="textarea" placeholder="Enter your message"/>
<button class="btn">Submit</button>
</form>
</div>
</div>
</div>
</body>
</html>
Here's what our webpage looks like:
