Hello readers, Today in this blog you’ll learn How to create an Responsive Footer HTML CSS . Earlier I have shared a blog on Login Form Design Using Html Css and now it’s time to create a Responsive Footer HTML CSS | Bootstrap Footer.
If you are familiar with HTML CSS & BOOTSTRAP then you can easily create this Footer section Design. Those People who are feeling difficult to understand this, don’t worry You can watch a full video tutorial on this Responsive Footer HTML CSS .
Full Video Tutorial of Responsive Footer HTML CSS
In the video, you’ve seen the Responsive Footer HTML CSS and I hope you’ve understood the basic codes behind creating this program . In This footer you will see Four sections, In the first section you will get to see a logo of the website and the short information of the website and some images will be seen below it.In the second & Third section, you will get to see the link of some important pages of your website, you can go to that page by direct clicking on it. In the fourth section you get to see a newsletter. And the bottom of these sections, you get to see the copyright section of your website.
I have provided the full source code of this program Responsive Footer. Feel free to use the following codes.
You might like this:
- Animated Login Form Using HTML & CSS
- How to Create a Drop Down Menu Using Html & Css
- How to Create a Social Media Login Form
- How create an Complete Responsive Ecommerce Website
Responsive Footer Section | Free Source Code
First of all, you need to create two files one is an HTML file and another is a CSS file, after creating these two files you can easily copy-paste the given codes in your HTML & CSS files. You can also download all source code files directly from the given Download Button.
Before that you have to paste some link inside the head tag of your html file Like This –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footer Template</title>
<!-- Coding With Nick -->
<!-- Google Fonts Cdn -->
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700;800;900&display=swap"
rel="stylesheet">
<!-- Font Awesome Cdn -->
<script src="https://kit.fontawesome.com/e48d166edc.js" crossorigin="anonymous"></script>
<!-- Bootstrap Cdn -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Main Css -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Bootstrap Js Cdn -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"></script>
</body>
</html>
# HTML CODE
First, create a Html file (index.html) and paste the given codes in your HTML file. This code is paste between the <body> </body>tag of your file.
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="footer-about">
<div class="footer-logo">
<a href="#"><img src="img/footer-logo.png" alt=""></a>
</div>
<p>The Customer is at the heart of our unique bussiness model, which include design.</p>
<a href="#"><img src="img/payment.png" alt=""></a>
</div>
</div>
<div class="col-lg-2 offset-lg-1 col-md-3 col-sm-6">
<div class="footer-widget">
<h6>Shopping</h6>
<ul>
<li><a href="#">Clothing Store</a></li>
<li><a href="#">Trending Shoes</a></li>
<li><a href="#">Accessories</a></li>
<li><a href="#">Sale</a></li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<div class="footer-widget">
<h6>Links</h6>
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Payment Methods</a></li>
<li><a href="#">Delivary</a></li>
<li><a href="#">Return & Exchanges</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 offset-lg-1 col-md-6 col-sm-6">
<div class="footer-widget">
<h6>NewsLetter</h6>
<div class="footer-newslatter">
<p>Be the first to know about new arrivals, look books, sales & promos!</p>
<form action="#">
<input type="text" placeholder="Your Email">
<button type="submit"><span><i class="fa fa-envelope"
arial-hidden="true"></i></span></button>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<div class="footer-copyright-text">
<p>Copyright © 2021 All rights reserved | This template is made with <i class="fa fa-heart-o" arial-hidden="true"></i>
by <a href="#">CodingWithNick</a></p>
</div>
</div>
</div>
</div>
</footer># CSS CODE
Second, create a CSS file (style.css) and paste the given codes in your CSS file.
/* Codingwithnick */
html,
body{
height: 100%;
font-family: "Nunito Sans" , sans-serif;
-webkit-font-smoothing: antialiased;
}
p{
font-size: 15px;
font-family: "Nunito Sans" , sans-serif ;
color: #3d3d3d;
font-weight: 400;
line-height: 25px;
margin: 0 0 15px 0;
}
img{
max-width: 100%;
}
a{
text-decoration: none;
}
ul{
padding-left: 0;
}
input:focus{
outline: none;
}
a:hover,
a:focus{
text-decoration: none;
outline: none;
color: #ffffff;
}
.footer{
background: #111111;
padding-top: 70px;
}
.footer-about{
margin-bottom: 30px;
}
.footer-about .footer-logo{
margin-bottom: 30px;
}
.footer-about p{
color: #b7b7b7;
margin-bottom: 30px;
}
.footer-widget{
margin-bottom: 30px;
}
.footer-widget h6{
color: #ffffff;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 20px;
}
.footer-widget ul li{
line-height: 36px;
list-style: none;
}
.footer-widget ul li a{
color: #b7b7b7;
font-size: 15px;
}
.footer-widget ul li a:hover{
color: #e53637;
}
.footer-widget .footer-newslatter p{
color: #b7b7b7;
}
.footer-widget .footer-newslatter form{
position: relative;
}
.footer-widget .footer-newslatter form input{
width: 100%;
font-size: 15px;
color: #ffffff;
background: transparent;
border: none;
padding: 15px 0;
border-bottom: 2px solid #ffffff;
}
.footer-widget .footer-newslatter form input::placeholder{
color: #b7b7b7;
}
.footer-widget .footer-newslatter form button{
color: #b7b7b7;
font-size: 16px;
position: absolute;
right: 5px;
top: 0;
height: 100%;
background: transparent;
border: none;
}
.footer-copyright-text{
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 20px 0;
margin-top: 40px;
}
.footer-copyright-text p{
color: #b7b7b7;
margin-bottom: 0;
}
.footer-copyright-text p i{
color: #e53637;
}
.footer-copyright-text p a{
color: #e53637;
}That’s all, now you’ve successfully Create a Responsive Footer HTML CSS . If your code doesn’t work or you’ve faced any error And problem’s , please download the source code from the given download button
I Hope this blog will be helpful.
Read More –
- How To Create Responsive Image Gallery Using Html & Css
- Responsive Image Slider | With Manual Button & Auto-play – Html Css Javascript
- How create an Online Store Website Using Htm Css JS | Multi Page Website
- Create A Music Player Using Javascript | Javascript Audio Player
- Responsive Navigation Bar Design using HTML and CSS
