Footer Responsive | Responsive Footer Html Css – Codewithrandom







Footer Responsive | Responsive Footer Html Css – Codewithrandom

Welcome🎉 to Code With Random blog. In this blog, we learn how to create a Footer Responsive. We use HTML & CSS ,bootstrap  for Footer Responsive. Hope you enjoy our blog so let’s start with a basic HTML& bootstrap structure for the Footer Responsive. 

HTML&Bootstrap code

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<footer class="section bg-footer">
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="">
<h6 class="footer-heading text-uppercase text-white">Information</h6>
<ul class="list-unstyled footer-link mt-4">
<li><a href="">Pages</a></li>
<li><a href="">Our Team</a></li>
<li><a href="">Feuchers</a></li>
<li><a href="">Pricing</a></li>
</ul>
</div>
</div>
<div class="col-lg-3">
<div class="">
<h6 class="footer-heading text-uppercase text-white">Ressources</h6>
<ul class="list-unstyled footer-link mt-4">
<li><a href="">Monitoring Grader </a></li>
<li><a href="">Video Tutorial</a></li>
<li><a href="">Term &amp; Service</a></li>
<li><a href="">Zeeko API</a></li>
</ul>
</div>
</div>
<div class="col-lg-2">
<div class="">
<h6 class="footer-heading text-uppercase text-white">Help</h6>
<ul class="list-unstyled footer-link mt-4">
<li><a href="">Sign Up </a></li>
<li><a href="">Login</a></li>
<li><a href="">Terms of Services</a></li>
<li><a href="">Privacy Policy</a></li>
</ul>
</div>
</div>
<div class="col-lg-4">
<div class="">
<h6 class="footer-heading text-uppercase text-white">Contact Us</h6>
<p class="contact-info mt-4">Contact us if need help withanything</p>
<p class="contact-info">+01 123-456-7890</p>
<div class="mt-5">
<ul class="list-inline">
<li class="list-inline-item"><a href="#"><i class="fab facebook footer-social-icon fa-facebook-f"></i></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab twitter footer-social-icon fa-twitter"></i></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab google footer-social-icon fa-google"></i></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab apple footer-social-icon fa-apple"></i></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-5">
<p class="footer-alt mb-0 f-14">2019 © Anup, All Rights Reserved</p>
</div>
</footer>

There is all HTML&Bootstrap code for the Footer Responsive. Now, you can see output without CSS, then we write CSS for the Footer Responsive.

Output

Footer Responsive | Responsive Footer Html Css - Codewithrandom

CSS

 .bg-footer {  
background-color: #33383c;
padding: 50px 0 30px;
}
.footer-heading {
letter-spacing: 2px;
}
.footer-link a {
color: #acacac;
line-height: 40px;
font-size: 14px;
transition: all 0.5s;
}
.footer-link a:hover {
color: #1bbc9b;
}
.contact-info {
color: #acacac;
font-size: 14px;
}
.footer-social-icon {
font-size: 15px;
height: 34px;
width: 34px;
line-height: 34px;
border-radius: 3px;
text-align: center;
display: inline-block;
}
.facebook {
background-color: #4e71a8;
color: #ffffff;
}
.twitter {
background-color: #55acee;
color: #ffffff;
}
.google {
background-color: #d6492f;
color: #ffffff;
}
.apple {
background-color: #424041;
color: #ffffff;
}
.footer-alt {
color: #acacac;
}
.footer-heading {
position: relative;
padding-bottom: 12px;
}
.footer-heading:after {
content: '';
width: 25px;
border-bottom: 1px solid #FFF;
position: absolute;
left: 0;
bottom: 0;
display: block;
border-bottom: 1px solid #1bbc9b;
}

Now we have completed our CSS section,  Here is our final updated output CSS.

Final Output

Footer Responsive | Responsive Footer Html Css - Codewithrandom

Footer Responsive | Responsive Footer Html Css - Codewithrandom

Footer Responsive | Responsive Footer Html Css - Codewithrandom

Now we have completed our CSS section,  Here is our updated output with CSSHope you like the Footer Responsive, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

This post teaches us how to create a Footer Responsive using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

code by – Baahubali

Check out more…..



Share on:

0 thoughts on “Footer Responsive | Responsive Footer Html Css – Codewithrandom”

Leave a Comment