How to Create Responsive Footer Using html and Css
<footer class="footer">
<div class="container-custome">
<div class="row-custome">
<div class="footer-col-custome">
<h5>About Company</h5>
<img src="https://codekarnedo.com/malinLogo.png" class="logo" height="40">
<p class="text-white">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="footer-col-custome">
<h5>Quick Link</h5>
<ul class="ul-custome">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Privacy policy</a></li>
</ul>
</div>
<div class="footer-col-custome">
<h5>Get help</h5>
<ul class="ul-custome">
<li><a href="#">FAQ</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">Shipping</a></li>
<li><a href="#">Payment options</a></li>
<li><a href="#">Order status</a></li>
</ul>
</div>
<div class="footer-col-custome">
<h5>Follow us</h5>
<div class="social-links">
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<hr />
<div class="footer-end">© Copyright 2024 CKD. All Rights Reserved. </div>
<hr />
</div>
</footer>
.container-custome {
width: 95%;
margin: auto;
}
.row-custome {
display: flex;
flex-wrap: wrap;
}
.logo {
background-color: #000;
padding: 5px 10px;
box-shadow: 0 0 1px #000;
border-radius: 20px 0;
}
ul.ul-custome li {
color: #fff;
list-style-type: none;
margin-left: -40px;
}
.footer {
background-color: #3f4247;
padding: 15px;
}
.footer-col-custome {
width: 22%;
padding: 0 15px;
}
.footer-col-custome h5 {
font-size: 18px;
color: #fff;
text-transform: capitalize;
margin-bottom: 35px;
font-weight: 500;
position: relative;
}
.footer-col-custome h5::before {
content: "";
position: absolute;
left: 0;
bottom: -10px;
background-color: #ff5d7d;
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer-col-custome ul li:not(:last-child) {
margin-bottom: 10px;
}
.footer-col-custome ul li a {
font-size: 16px;
text-transform: capitalize;
text-decoration: none;
font-weight: 300;
color: #ccc;
display: block;
transition: 0.2s;
}
.footer-col-custome ul li a:hover {
color: #fff;
padding-left: 8px;
}
.footer-col-custome .social-links a {
display: inline-block;
height: 39px;
width: 39px;
background-color: rgba(255, 255, 255, 0.2);
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
rotate: 360deg;
color: #fff;
transition: 0.5s;
}
.footer-col-custome .social-links a:hover {
color: #24262b;
background-color: #fff;
rotate: 0deg;
}
.text-white {
color: #ccc;
}
.footer-end {
color: #ccc;
font-size: 16px;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
@media only screen and (max-width: 767px) {
.footer-col-custome {
width: 100%;
margin-bottom: 30px;
}
.container-custome {
width: 100%;
margin: auto;
}
}
empty
Comments (2 )
1
19 Jun 20241.
1
19 Jun 20241.