Learner as if you are a web developer then you must have designed a footer for your website or not then you will interact with some other webpages footer. Have you think what is this, we just see in the last a separate section with short details of the company and with some quick like for rendering on the web page as well as different social links.

10+ HTML CSS Projects For Beginners (Source Code)

But it reflects a greater impact on the end-users as whenever we riched to the destination of something like when we reached to the end part of any webpages of any related stuff then what we used to do as we exit from it but footer doesn’t allow us to do that you provided some quick of the whole webpage if you want to revisit it then you don’t want to scroll the webpage you just need to click on the link you will be redirected to the source.

Something similar, we are going to design by ourselves.

Create Portfolio Website Using HTML and CSS (Source Code)

Hey learners..!

Welcome to our today’s blog with code with random. In this blog, we gonna learn how we can design a Simple Footer Project Using HTML and CSS With Source Code.

I hope you must have got an idea about the project.

Let’s have a look at our project.

Html Footer Source Code:-

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
min-height: 100vh;
display: block;
align-items: center;
justify-content: center;
}
.site-footer {
background-color: #26272b;
padding: 45px 0 20px;
font-size: 15px;
line-height: 24px;
color: #737373;
box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
.site-footer hr {
border-top-color: #bbb;
opacity: 0.5;
}
.site-footer hr.small {
margin: 20px 0;
}
.site-footer h6 {
color: #fff;
font-size: 16px;
text-transform: uppercase;
margin-top: 5px;
letter-spacing: 2px;
}
.site-footer a {
color: #737373;
}
.site-footer a:hover {
color: #fff;
text-decoration: none;
}
.footer-links {
padding-left: 0;
list-style: none;
}
.footer-links li {
display: block;
}
.footer-links a {
color: #737373;
}
.footer-links a:active,
.footer-links a:focus,
.footer-links a:hover {
color: #fff;
text-decoration: none;
}
.site-footer .social-icons {
text-align: right;
}
.site-footer .social-icons a {
width: 40px;
height: 40px;
line-height: 40px;
margin-left: 6px;
margin-right: 0;
border-radius: 100%;
background-color: #33353d;
}
.copyright-text {
margin: 0;
}
@media (max-width: 991px) {
.site-footer [class^="col-"] {
margin-bottom: 30px;
}
}
@media (max-width: 767px) {
.site-footer {
padding-bottom: 0;
}
.site-footer .copyright-text,
.site-footer .social-icons {
text-align: center;
}
}
.social-icons {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.social-icons li {
display: inline-block;
margin-bottom: 4px;
}
.social-icons a {
background-color: #eceeef;
color: #818a91;
font-size: 16px;
display: inline-block;
line-height: 44px;
width: 44px;
height: 44px;
text-align: center;
margin-right: 8px;
border-radius: 100%;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.logo{
color:#eb6857;
}
.social-icons a:active,
.social-icons a:focus,
.social-icons a:hover {
color: #fff;
background-color: #29aafe;
}
.social-icons a.facebook:hover {
background-color: #3b5998;
}
.social-icons a.twitter:hover {
background-color: #00aced;
}
.social-icons a.linkedin:hover {
background-color: #007bb6;
}
.social-icons a.dribbble:hover {
background-color: #ea4c89;
}

Final Output Of Footer Using HTML and CSS With Source Code:-

A live preview of our project is attached below refer to this codepen.