Once your header and body are done, you are ready to start working on the footer. Currently, our footer looks extremely unattractive and messy. To make it interactive, we have to apply CSS to it. Although it sits at the end of the webpage, it serves an important role in helping visitors navigate your site. Therefore, it's time to make it meaningful.
Styling the Footer Div
The first div has the class "footer" in the footer section, which contains all the other elements. Let's apply the formatting to this div:
.footer{
width: 100%;
height: 100vh;
background-color: rgba(0,0,0,0.8);
margin-top: 0;
float: left;
border-bottom: 1px solid white;
}
If you notice, we have added the same properties as the section class inside the footer class. Hence, you can reuse the section class for the footer as well. We have defined a new class here just for convenience.
Dividing the Footer into Sections
We have 3 sections inside our footer: the brand and opt-in form, social icons, and copyright statement. Let's divide the footer into these sections:
.footer_section{
width: 33%;
height: 100%;
float: left;
margin-left: 2px;
background-color: rgba(0,0,0,0.4);
border-radius: 5px;
}
Styling Branding Section
Moving the Opt-in Form
Please note that I have removed the separate opt-in section from HTML and moved the opt-in form inside the branding section.
Here's the new branding section:
<!--Brand Section-->
<div class="footer_section">
<div class="logo">
<h1>Bellylicious</h1>
<h2>Delicious Food Delivered!</h2>
</div>
<!--Opt in Form-->
<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>
Applying a New Class to the <h2> Element
Assign the heading_2 class to the <h2> element in the Branding section to apply formatting:
<div class="logo">
<h1>Bellylicious</h1>
<h2 class="heading_2">Delicious Food Delivered!</h2>
</div>
Here's what heading_2 class does:
.heading_2{
color: white;
margin-left: 0;
margin-top: 5px;
font-size: 18px;
}
Formatting the Opt-in Form
Define the opt_in class:
.opt-in{
width: 350px;
height: 120px;
margin-top: 490px;
margin-left: 50px;
}
This sets the width and height of the opt-in form.
We cannot reuse any other classes for the opt-in label. Therefore, define the opt_in_lbl class:
.opt_in_lbl{
color: white;
font-size: 18px;
}
For the input field and submit button, we have reused the user_input and nav_btn classes with the following inline CSS:
<input type="text" class="user_input" style="margin-left: 0px; width: 250px; height: 20px;" placeholder="Enter your email"/>
<button class="nav_btn" style="width: 100px; height: 30px; float: right; margin-right: 95px;">Submit</button>
Here's how our footer looks so far:
Formatting the Icons Section
Now, we have to set the social media icons properly in the divs. We have 4 icons, so let's first give these icons equal width and height and display them horizontally. To do so, we will use the display property:
Do you know?
The display property is used to change an inline element to a block and vice versa.
The following is the icons class:
.icons{
display: inline;
margin-top: 480px;
float: left;
margin-left: 15px;
}
We do not need to define the width and height of this div since its content automatically determines it.
For the 1st icon, I have added some inline CSS as well to move the icons towards the center of the div:
<div class="icons" style="margin-left: 40px;">
Setting the Icon Images
We have defined the icon images inside HTML, so we only need to define their width and height:
.icon_img{
width:80px;
height: 80px;
}
Let's also add a hover effect on icon images to make it more interactive:
.icon_img:hover{
width: 85px;
height: 85px;
}
Our social media icons section is complete and looks as follows yet:
Styling the Copyright Statement
Last, but not least, it's time to design the copyright section. We want our copyright statement to appear at the bottom and in white font. We have already applied the opt_in_lbl class to it, so half of our work is already done. We only need to add some inline CSS to move it to the bottom:
<!--Copyright-->
<div class="footer_section">
<p class="opt_in_lbl" style="margin-top: 580px; float: right; font-size: 16px;">Copyright © 2025 Bellylicious.com. All rights reserved.</p>
</div>
Once you have applied the above formatting, your footer should look as follows:
Final HTML Code
Here is the final HTML code:
<!DOCTYPE HTML>
<html>
<head>
<title>Bellylicious</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" type="text/css" rel="stylesheet"/>
</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">
<a href="#"><button class="nav_btn">Home</button></a>
<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 src="images/background_image.jpg" width="1350" height="300" alt="Background image for hero section"/>-->
<h1 class="hero_text">Bellylicious - Delicious Food Delivered!</h1>
<button class="nav_btn" style="width: 150px; height:80px; margin-top: 50px; margin-left:300px; float: left;">Menu</button>
<button class="nav_btn" style="width: 150px; height:80px; margin-top: 50px; margin-left: 5px; float: left;">Order Now</button>
</div>
<!--Menu-->
<div class="section">
<h1 class="hero_text" style="margin-top: 50px; margin-left: 600px;">Menu</h1>
<!--Menu Items-->
<div class="menu_item">
<!--Item Image-->
<div class="item_img">
<img class="menu_img" src="images/Biryani.jpg" width="100" height="100" alt="Chicken Biryani"/>
</div>
<!--Item Name-->
<div class="item_text">
<h3>Chicken Biryani</h3>
</div>
</div>
<div class="menu_item">
<div class="item_img">
<img class="menu_img" src="images/Karahi.jpg" width="100" height="100" alt="Chicken Karahi"/>
</div>
<div class="item_text">
<h3>Chicken Karahi</h3>
</div>
</div>
<div class="menu_item">
<div class="item_img">
<img class="menu_img" src="images/Qorma.jpg" width="100" height="100" alt="Chicken Qorma"/>
</div>
<div class="item_text">
<h3>Chicken Qorma</h3>
</div>
</div>
<div class="menu_item">
<div class="item_img">
<img class="menu_img" src="images/Kababs.jpg" width="100" height="100" alt="Chicken Seekh Kababs"/>
</div>
<div class="item_text">
<h3>Chicken Seekh Kabab</h3>
</div>
</div>
</div>
<!--Popular-->
<div class="section">
<!--Popular Item-->
<h1 class="hero_text" style="margin-top: 50px; margin-left: 600px;">Popular</h1>
<div class="menu_item" style="height:450px; margin-left: 350px;">
<!--Items-->
<div class="item_img">
<img class="menu_img" src="images/Biryani.jpg" width="100" height="100" alt="Chicken Biryani"/>
</div>
<div class="item_text">
<h3> Chicken Biryani</h3>
</div>
<!--Add to Cart-->
<div class="add_to_cart">
<button class="nav_btn" style="width: 150px; height:30px; margin-left: 60px;"> Add to Cart </button>
</div>
</div>
<div class="menu_item" style="height:450px; margin-left: 30px;">
<!--Items-->
<div class="item_img">
<img class="menu_img" src="images/Kababs.jpg" width="100" height="100" alt="Chicken Biryani"/>
</div>
<div class="item_text">
<h3> Chicken Seekh Kabab</h3>
</div>
<!--Add to Cart-->
<div class="add_to_cart">
<button class="nav_btn" style="width: 150px; height:30px; margin-left: 60px;"> Add to Cart </button>
</div>
</div>
</div>
<!--Customer Reviews-->
<div class="section">
<h1 class="hero_text" style="margin-top: 50px; margin-left: 600px;">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="30" height="30" alt="Customer review"/>
</div>
</div>
</div>
<!--About Us-->
<div class="section">
<h1 class="hero_text" style="margin-top: 50px; margin-left: 600px;">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" style="width:500px; height:400px; margin-left: 100px; margin-top: 10px; border-radius: 10px;" alt="Restaurant interior"/>
</div>
</div>
<!--Contact Us-->
<div class="section">
<h1 class="hero_text" style="margin-top: 50px; margin-left: 600px;">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>
<textarea class="user_input" style="width: 400px; height: 100px; margin-left: 100px;"></textarea>
<button class="nav_btn" style="margin-left:250px">Submit</button>
</form>
</div>
</div>
<!--Footer-->
<div class="footer">
<!--Brand Section-->
<div class="footer_section">
<div class="logo">
<h1>Bellylicious</h1>
<h2 class="heading_2">Delicious Food Delivered!</h2>
</div>
<!--Opt in Form-->
<form class="opt-in">
<label class="opt_in_lbl">Enter you email to receive promotional offers:</label>
<input type="text" class="user_input" style="margin-left: 0px; width: 250px; height: 20px;" placeholder="Enter your email"/>
<button class="nav_btn" style="width: 100px; height: 30px; float: right; margin-right: 95px;">Submit</button>
</form>
</div>
<!--Social Icons-->
<div class="footer_section">
<div class="icons" style="margin-left: 40px;">
<img class="icon_img" src="images/Whatsapp.svg" width="100" height="100" alt="Whatsapp icon"/>
</div>
<div class="icons">
<img class="icon_img" src="images/Facebook.svg" width="100" height="100" alt="Facebook icon"/>
</div>
<div class="icons">
<img class="icon_img" src="images/Instagram.svg" width="100" height="100" alt="Instagram icon"/>
</div>
<div class="icons">
<img class="icon_img" src="images/Linkedin.svg" width="100" height="100" alt="LinkedIn icon"/>
</div>
</div>
<!--Copyright-->
<div class="footer_section">
<p class="opt_in_lbl" style="margin-top: 580px; float: right; font-size: 16px;">Copyright © 2025 Bellylicious.com. All rights reserved.</p>
</div>
</div>
</div>
</body>
</html>
Final CSS Code
Here is the final CSS code:
body{
margin:0;
padding:0;
}
.container{
width: 100%;
height: auto;
margin-top:0;
}
.header{
width: 100%;
height: 100px;
background-color: rgba(0,0,0,0.8);
margin: 0px;
color: white;
}
.logo{
width: 200px;
height: 80px;
margin-top: 10px;
margin-left: 50px;
float: left;
color: white;
/*background-color:red; */
}
.nav{
width: 600px;
height: 80px;
margin-top: 10px;
margin-right: 50px;
float: right;
/*background-color: red; */
}
.heading{
margin-left: 20px;
}
.nav_btn{
width: 19%;
height: 70px;
margin-top: 5px;
margin-left: 2px;
background-color: rgba(0,0,0,0.3);
border: 1px solid white;
border-radius: 5px;
color: white;
font-size: 16px;
}
.nav_btn:hover{
background-color: white;
color: black;
font-weight: bold;
border-color: black;
transition: 1s;
}
.hero{
width: 100%;
height: 88vh;
/*background-color: red;*/
margin-top:0;
float: left;
background-image: url("images/background_image.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.hero_text{
color: white;
margin-top: 200px;
margin-left: 200px;
}
.section{
width: 100%;
height: 100vh;
background-color: rgba(0,0,0,0.8);
margin-top: 0;
float: left;
border-bottom: 1px solid white;
}
.menu_item{
width: 23%;
height:400px;
background-color: rgba(0,0,0,0.4);
float: left;
margin-left: 20px;
border-radius: 5px;
}
.item_img{
width: 270px;
height: 300px;
margin-top: 30px;
margin-left: 20px;
}
.item_text{
width: 270px;
height: 40px;
text-align: center;
margin-left: 20px;
color: white;
font-size: 20px;
}
.menu_img{
width: 100%;
height:100%;
border: 1px solid black;
border-radius: 10px;
}
.menu_item:hover{
border: 3px solid white;
}
.add_to_cart{
width: 270px;
height: 40px;
margin-left: 20px;
}
.review{
width: 90%;
height: 450px;
margin-left: 70px;
background-color: rgba(0,0,0,0.4);
border-radius: 5px;
}
.name{
color: white;
width: 100%;
height: 80px;
text-align: center;
font-size: 48px;
font-style: italic;
margin-top: 20px;
margin-bottom: 60px;
float: left;
}
.review_text{
width: 100%;
height: 200px;
text-align: center;
font-size: 36px;
color: white;
}
.review_stars{
width: 100%;
height: 100px;
margin-top: -200px;
}
.stars{
width: 1200px;
height: 200px;
}
.about_text{
width: 500px;
height: 400px;
float: right;
margin-right: 80px;
font-size: 24px;
color: white;
line-height: 35px;
text-align: left;
}
.contact_us{
width: 600px;
height: 450px;
background-color: rgba(0,0,0,0.4);
margin-left: 380px;
color: white;
font-size: 24px;
border-radius: 5px;
}
form{
width: 100%;
height: 100%;
}
.lbl{
margin-left: 250px;
margin-top: 20px;
display: inline-block;
}
.user_input{
width: 200px;
height: 40px;
display: block;
margin-left: 200px;
margin-top: 10px;
font-size: 18px;
}
.footer{
width: 100%;
height: 100vh;
background-color: rgba(0,0,0,0.8);
margin-top: 0;
float: left;
border-bottom: 1px solid white;
}
.footer_section{
width: 33%;
height: 100%;
float: left;
margin-left: 2px;
background-color: rgba(0,0,0,0.4);
border-radius: 5px;
}
.heading_2{
color: white;
margin-left: 0;
margin-top: 5px;
font-size: 18px;
}
.opt-in{
width: 350px;
height: 120px;
margin-top: 490px;
margin-left: 50px;
}
.opt_in_lbl{
color: white;
font-size: 18px;
}
.icons{
display: inline;
margin-top: 480px;
float: left;
margin-left: 15px;
}
.icon_img{
width:80px;
height: 80px;
}
.icon_img:hover{
width: 85px;
height: 85px;
}
Final Webpage Image
Here's the final look of our webpage:
Wrap Up
Our webpage is complete now. We have successfully created and designed the Bellylicious home page with a header and hero, 5 body sections, and a footer. Our webpage looks pretty good, and you can make it better by adding more formatting. Feel free to play around with this page and try making more pages with what you have learned in this basic HTML and CSS tutorial. The next step in your web development journey is JQuery. Once you have practiced HTML and CSS properly, continue with the JQuery tutorial to make your webpage more interactive and interesting.