How to Make Responsive Footer Design Using Html & CSS Only
Hello friends welcome to M-softtech. Today i will teach you how to make Responsive Footer Design Using Html & CSS Only.
What is a website footer?
A website Footer is the strip of content located at the very bottom of a webpage, and is often repeated on every page of a website. Your website’s header, on the other hand, is the section that appears on the top fold of a website.
While your homepage design is often what provides visitors with a first impression of your site, your footer is likely to be the last thing people see. With the right content and design, it can craft a positive and lasting impression, while helping you achieve your website’s main objectives.
This strategic spot is the ideal place to add a final CTA (call-to-action), encouraging site visitors to get in touch or subscribe to your mailing list. Your footer can serve as a secondary website menu, making sure that visitors haven’t missed out on any crucial information and guiding them to your various pages with clear navigation. In addition, you can choose to highlight certain elements, such as awards you’ve won, testimonials or your social accounts.
Lastly, your footer provides you with an organized place in which to include basic information like terms and conditions, privacy policy and other legal issues. With all these formalities placed in one location, you’ll be able to dedicate the rest of your site to creating an engaging user experience and attracting new customers.
Best practices for website footer design
As you’ll see in the website footer examples below, footers do vary in size. However, most of them are fairly small and only contain the most pertinent information.
Anyone who’s designed a mobile website before will tell you that a small piece of real estate doesn’t necessarily mean a simpler design process. Limited space means that you have to carefully consider the importance of each element you’re including, in order to utilize the space in the best way possible.
Here are the most important points to consider when designing your website’s footer:
HTML Source Code
<!DOCTYPE html> <html> <head> <title>Website Footer Design</title> <link rel="stylesheet" type="text/css" href="css/style.css"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Saira:wght@500;600;700&display=swap" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <footer> <br/><br/> <div class="container"> <div class="col-3"> <h1 class="logo">M-<span>SoftTech</span></h1> <p>Diam dolor diam ipsum sit. Aliqu diam amet diam et eos. Clita erat ipsum et lorem et sit, sed stet lorem sit clita</p> <div class="social"> <a class="social-btn"><i class="fab fa-twitter"></i></a> <a class="social-btn"><i class="fab fa-facebook"></i></a> <a class="social-btn"><i class="fab fa-youtube"></i></a> <a class="social-btn"><i class="fab fa-linkedin-in"></i></a> </div> </div> <div class="col-3"> <h5>Address</h5> <p><i class="fa fa-map-marker-alt me-3"></i>6743 Street, New York, USA</p> <p><i class="fa fa-phone-alt me-3"></i>+012-3434-43443</p> <p><i class="fa fa-envelope me-3"></i>+012-3434-43443</p> </div> <div class="col-3"> <h5>Quick Links</h5> <a class="btn btn-link">About Us</a> <a class="btn btn-link">Contact Us</a> <a class="btn btn-link">Our Services</a> <a class="btn btn-link">Term & Condition</a> <a class="btn btn-link">Support</a> </div> <div class="col-3"> <h5>Newsletter</h5> <p>Dolor amet sit justo amet elitr clita ipsum elitr est.</p> <div style="width: 400px; position: relative;"> <input class="input" type="text" placeholder="Your Email"/> <button type="button" class="signbtn">SignUp</button> </div> </div> <div class="clearfix"></div> </div> <br/><br/> <div class="container-fluid"> <div class="container"> <div class="col-6"> <p>@<a href="">https://m-softtech.in</a>, All Right Reserved.</p> </div> <div class="col-6"> <p class="footb">Design By <a href="#">M-SoftTech</a></p> </div> <div class="clearfix"></div> </div> </div> <br/><br/> </footer> </body> </html>
CSS Source Code
:root{
--dark:#001D23;
--orange:#FF6F0F;
--white:#fff;
--light:rgba(255,255,255,0.5);
}
body{
height: 100vh;
margin: 0px;
padding: 0px;
font-family: "Saira", sans-serif;
overflow:hidden;
}
footer{
background-color: var(--dark);
height: 470px;
width: 100%;
position: absolute;
bottom: 0;
}
.container{
width: 1380px;
max-width: 100%;
margin: 0 auto;
box-sizing: border-box;
}
.col-3{width: 25%; float: left;}
.col-6{width: 50%; float: left;}
.clearfix{clear: both;}
.container-fluid{
padding: 25px 0;
font-size: 15px;
border-top: 1px solid rgba(256,256,256,.1);
}
.logo{color: var(--orange);}
.logo span{color: var(--white);}
.btn-square{
width: 38px;
height: 38px;
}
.social{margin-top:20px; }
p{
color: var(--light);
font-family: system-ui!important;
width: 300px;
}
p a{color: var(--white); text-decoration: none;}
.social-btn i{
width: 38px;
height: 38px;
text-align: center;
border: 1px solid var(--light);
line-height: 40px;
color: var(--light);
border-radius: 5px;
}
.social-btn i:hover{
color: var(--white);
border: 1px solid var(--white);
}
h5{
color: var(--white);
font-size: 20px;
font-weight: 600;
}
.me-3{margin-right: 1rem!important;}
footer .btn.btn-link{
display: block;
text-decoration: none;
margin-bottom: 5px;
padding: 0;
text-align: left;
font-family: system-ui!important;
line-height: 28px;
color: var(--light);
font-weight: normal;
text-transform: capitalize;
transition: .3s;
}
footer .btn.btn-link::before{
position: relative;
content: "\f105";
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: rgba(255, 255,255, 0.5);
margin-right: 10px;
}
footer .btn.btn-link:hover{
color: var(--white);
letter-spacing: 1px;
box-shadow: none;
}
.input{
width: 280px;
background-color: var(--white);
padding: 15px;
border-radius: 5px;
font-size: 18px;
position: relative;
outline: none;
}
.input:focus{
color: #787878;
background-color: white;
border-color: #ffb787;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(255,111,15,0.25);
}
.signbtn{
position: absolute;
right: 95px;
top: 7px;
padding: 10px 20px;
background-color: var(--orange);
color: var(--white);
border-radius: 5px;
border: 1px solid var(--orange);
font-size: 16px;
transition: .5s;
}
.signbtn:active:focus{box-shadow: 0 0 0 0.25rem rgba(217,94,13,0.5);}
.signbtn:hover{
color: var(--orange);
background: transparent;
}
.design{text-align: right;}
.footb{float: right;}
@media only screen and (max-width: 600px){
body{overflow: scroll;}
.col-3{width: 100%;}
.col-6{width: 100%;}
footer{
width: 100%;
height: auto;
position: relative;
}
.container{padding: 20px;}
.signbtn{right: 98px;}
.design{text-align: center;}
.footb{float: none; text-align: left;}
}If you enjoyed reading this post and have found it useful for you, then please give a share with your friends, and follow me to get updates on my upcoming posts.
if you have any confusion Comment below or you can contact us by filling out our contact us.
YOU MIGHT ALSO LIKE
How To Create A Website Using HTML And CSS Step By Step Website Tutorial
How to make a dashboard Design Using html CSS
If you have any problem to understand this code you can watch also video tutorial
