HTML

Posted on 4/14/2025 9:06:21 AM by Admin

Creating a Webpage in HTML - Footer

Now that the body of our webpage is complete, let's create a footer. The footer is the last section of any webpage and remains constant throughout the website. We usually place quick links, opt-in forms, and copyright statements in the footer, but you can add anything you prefer.

We will add an email opt-in form, our logo, social media icons, and the copyright statement to our web page's footer. Let's start designing it.

Creating the Footer of the Webpage

First, we'll define the footer div and divide it into 4 sections for brand, opt-in form, social media icons, and the copyright statement.

Defining the Footer Div



<!--Footer-->
		<div class="footer">
			
			<!--Brand Section-->
			<div class="footer_section">
				
			</div>
			<!--Opt-in form-->
			<div class="footer_section">
			
			</div>
			<!--Social Icons-->
			<div class="footer_section">
			
			</div>
			<!--Copyright-->
			<div class="footer_section">
			
			</div>
		</div>

Adding Content in the Footer

Let's add the content in the corresponding sections within the footer. 



<!--Footer-->
		<div class="footer">
			
			<!--Brand Section-->
			<div class="footer_section">
				<div class="logo">
					<h1>Bellylicious</h1>
					<h2>Delicious Food Delivered</h2>
				</div>
			</div>
			<!--Opt-in form-->
			<div class="footer_section">
				<form class="opt_in">
					<label class="opt_in_lbl">Enter you email to receive promotional offers</label>
					<input type="text" class="user_input" placeholder="Enter your email"/>
					<button class="nav_btn">Submit</button>
				</form>
			</div>
			<!--Social Icons-->
			<div class="footer_section">
				<div class="icons">
					<img class="icon_img" src="images/Whatsapp.svg" width="100px" height="100px"/>
				</div>
				<div class="icons">
					<img class="icon_img" src="images/Facebook.svg" width="100px" height="100px"/>
				</div>
				<div class="icons">
					<img class="icon_img" src="images/Instagram.svg" width="100px" height="100px"/>
				</div>
				<div class="icons">
					<img class="icon_img" src="images/Linkedin.svg"width="100px" height="100px"/>
				</div>
			</div>
			<!--Copyright-->
			<div class="footer_section">
				<p class="opt_in_lbl">Copyright © 2025 Bellylicious.com. All rights reserved.</p>
			</div>
		</div>

Good to Know: To add the copyright symbol via HTML, we use © or © code.

Our footer is complete. Your code should look as follows right now:



<!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">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="nav_btn">Submit</button>
				</form>
			</div>
		</div>
		
		<!--Footer-->
		<div class="footer">
			<!--Brand Section-->
			<div class="footer_section">
				<div class="logo">
					<h1>Bellylicious</h1>
					<h2>Delicious Food Delivered</h2>
				</div>
			</div>
			<!--Opt-in form-->
			<div class="footer_section">
				<form class="opt_in">
					<label class="opt_in_lbl">Enter you email to receive promotional offers</label>
					<input type="text" class="user_input" placeholder="Enter your email"/>
					<button class="nav_btn">Submit</button>
				</form>
			</div>
			<!--Social Icons-->
			<div class="footer_section">
				<div class="icons">
					<img class="icon_img" src="images/Whatsapp.svg" width="100px" height="100px"/>
				</div>
				<div class="icons">
					<img class="icon_img" src="images/Facebook.svg" width="100px" height="100px"/>
				</div>
				<div class="icons">
					<img class="icon_img" src="images/Instagram.svg" width="100px" height="100px"/>
				</div>
				<div class="icons">
					<img class="icon_img" src="images/Linkedin.svg"width="100px" height="100px"/>
				</div>
			</div>
			<!--Copyright-->
			<div class="footer_section">
				<p class="opt_in_lbl">Copyright © 2025 Bellylicious.com. All rights reserved.</p>
			</div>
		</div>
	
	</div>
	</body>
</html>

This is what our webpage looks like yet:

Bellylicious home page
Bellylicious Home Page

The structure of our web page is ready to be styled with CSS. In the next lesson, we will learn some of the best webpage refining practices.


Like0
unlike0
Refining the webpages
Refining the webpages
Read More
Previous Next