Best Practice To Design Website Footer with HTML and CSS

Most people give very little thought to the website footer. Yet, the footer plays an important role in the overall design and user experience of a website.

The footer is typically the last thing a user sees on a page, so it’s important to make sure it leaves a good impression. A well-designed footer can help improve the overall look and feel of a website.

There are a few things to keep in mind when designing a website footer:

Keep it simple.
- The footer should be kept clean and simple. Avoid adding too much information or too many links.
Make it easy to navigate.
- The footer should be easy to navigate. Links should be clearly labelled and easy to find.
Use whitespace wisely.
- Whitespace can help to break up the footer and make it more readable.
Stay consistent with the rest of the website.
- The footer should be consistent with the overall design of the website. This includes font choices, color schemes, and other visual elements.
Use images sparingly.
- Images can help to break up the footer, but too many can be distracting.
Keep the content updated.
- The footer should be kept up-to-date with the latest information. This includes the copyright date, links to social media accounts, and contact information.
Use Sitemap
- You can add a sitemap to your page footer in two ways. You can either provide multiple links to sections of your website, or you can provide a single link to your XML sitemap.
Use Privacy Policy Link
- If you’re collecting personal data from users, like their email addresses or payment information, then Privacy Policy agreements are mandatory by law.
Make it responsive.
- The footer should be responsive and look good on all devices.
Test it Out
- Before you launch your website, make sure to test out the footer to see how it looks and works on different screen sizes. This will help you identify any problems so that they can be fixed before your site goes live.

Basic Example of Website Footer

A basic example of the simple footer with logo, text, links and copyright section.

HTML Code

<div class="container-fluid footer-bg mt-1" style="background: #0b3c82">
	<div class="footer_panel_box footer_details_section">
		<div class="container hidden-xs">
			<div class="footer_wrap_box_grid">
				<div class="row">
				    <div class="col-md-2">
				        <div class="logo mt-5">
				            <img src="https://techzpad.com/wp-content/uploads/2022/07/cropped-techzpad-logo-1.png" class="w-100">
				        </div>
				    </div>
					<div class="col-md-7">
						<div class="row">
							<div class="col-md-5 footer_grid_list">
								<h4>Team Member</h4>
								<ul class="media_team_list_grid">
									<li>
										<dl class="horizantal_line_sec footer_team_list">
											<dt>CEO</dt>
											<dd>Name</dd>
										</dl>
										<dl class="horizantal_line_sec footer_team_list">
											<dt>Director</dt>
											<dd>Name</dd>
										</dl>
									</li>
									<li>
										<div class="flex row">
											<div class="col-sm-12 sambaddata">
												<h5>Member</h5>
												<p>Member 1</p>
												<p>Member 2</p>
											</div>
										</div>
									</li>
								</ul>
							</div>
							<div class="col-md-7 col-sm-7">
								<div class="footer_grid_list">
									<h4>Address</h4>
									<ul class="media_team_list_grid">
										<li>
											<strong><p>Company Name</p></strong>
											<strong style="display:block"><i class="fa fa-map-marker mr-2"></i>Company Address</strong>
											<span class="kd-icons"><i class="fa fa-phone-square mr-2" aria-hidden="true"></i></span>00000000
											<p style="font-size: 15px;"><i class="fa fa-envelope mr-2"></i> example@email.com</p>
										</li>
									</ul>
								</div>
								<div class="col-md-12 col-sm-12">
									<div class="links_imp">
										<ul class="linkas">
											<li><a href="#">About Us</a></li>
											<li><a href="#">Advertisement</a></li>
				
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-3 footer_grid_list list_link">
						<h4>Quick Links </h4>
						<ul class="media_team_list_grid foot-links">
							<li><a href="https://techzpad.com">Home</a></li>
							<li><a href="#">Privacy Policy</a></li>
							<li><a href="#">Sitemap</a></li>
							<li><a href="#">Term & Condition</a></li>
							<li><a href="#">Link</a></li>
							<li><a href="#">Link</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="container-fluid footer_sec_grid2" style="background: #082b5d">
		<div class="footer_copyright_sec">
			<div class="container">
				<div class="row">
					<div class="col-xs-12 col-sm-12 col-md-6 mt-2 mt-sm-2 text-center text-white">
						<p class="h6">©2022copyright, All Rights Reserved.</p>
					</div>
					<div class="col-xs-12 col-sm-12 col-md-6 mt-2 mt-sm-2 text-center text-white">
						<div class="powred_by">
							Powered By : <a href="https://toplinetech.com.np" target="_blank">TechzPad</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

CSS Code

.footer-text h3{
	color: #fff;
	font-size: 20px;
	font-weight: 500;
	text-align: center;
	border-bottom: 1px #CCC solid;
}
.footer-text p{
	font-size: 16px;
	font-weight: 400;
	color: #FFFFFF;
}
.copyright p, p.brand-url{
	color: #FFFFFF;
	font-size: 17px;
	font-weight: 400;
}
.brand-dtls a{
	color: #FFF;
	font-size: 20px;
	text-decoration: none;
}
.footer_grid_sec_wrap a {
	color: #ffffff;
	text-decoration: none !important;
	background-color: transparent;
}
.powred_by{
	font-size: 18px;
}
.powred_by a {
	font-size: 18px;
	color: #FFF;
	text-decoration: none !important;
}
.footer_details_section {
	color: #fff;
	font-size: 15px;
}
.footer_details_section a {
	color: #eee;
	text-decoration: none;
}
.footer_wrap_box_grid {
	width: 100%;
	display: inline-block;
	padding: 20px 0px;
}
.footer_grid_list h4, .footer_grid_list h5 {
	color: #eee !important;
	font-size: 17px;
	font-weight: 600;
	line-height: 26px;
}
.footer_grid_list ul {
	margin: 0;
	padding: 0;
	padding-left: 0px;
	list-style: none;
}
.media_team_list_grid {
	border-left: 2px solid rgba(255, 255, 255, 0.22);
	padding-left: 10px !important;
}
.footer_grid_list ul {
	list-style: none;
}
.footer_team_list {
	margin: 0 0 5px 0;
}
.footer_team_list dt {
	width: 120px !important;
	text-align: left !important;
	font-size: 15px;
}
.horizantal_line_sec dt {
	float: left;
	width: 160px;
	overflow: hidden;
	clear: left;
	text-align: right;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.footer_team_list dd {

	margin-left: 120px;
	font-size: 15px;
}
.foot-links li {
	width: 130px;
	display: inline-block;
	font-size: 15px;
}
.sambaddata p{
	margin-bottom: 10px;
}
span.small-reg-no{
	display: none;
}
.links_imp ul.linkas{
	list-style: none;
	text-decoration: none;
}
.links_imp ul.linkas li{
	list-style: none;
	display: inline-block;
	padding: 10px 20px;
	border: 1px #FFF solid;
	border-radius: 5px;
	margin-right: 5px;
	cursor: pointer;
}
.links_imp ul.linkas li:hover{
	background: #f37120;
	transition: 0.5s all ease;
}
.links_imp ul.linkas li:hover a{
	color: #222;
}
.first-content p{
	padding: 10px;
}
.second-images img{
	height: 200px;
	width: 100%;
	object-fit: cover;
	display: block;
}