Web Design Using HTML, BOOTSTRAP and CSS
index.html -
<section class="footer-top">
<div class="containers">
<div class="row">
<div class="col-md-4">
<div class="footer-logo">
<img src="./images/logo-footer.png" alt="Footer-Logo">
</div>
<div class="footer-top-menu">
<ul>
<li>
<i class="fa fa-home"></i>
<span class="heading">Address:</span>
<span class="address">
1702 Los Angeles, California, American.
</span>
</li>
<li>
<i class="fa fa-envelope"></i>
<span class="heading">Mail Us:</span>
<span class="email">
<a href="mailto:example@gmail.com">
example@gmail.com</a>
</span>
</li>
<li>
<i class="fa fa-phone"></i>
<span class="heading">Phone:</span>
<span class="number">
<a href="tel:+1-888-345-6789">1-888-345-6789</a>
</span>
</li>
<li><a href="">
<img src="./images/payment/payment1.png" alt="Payment">
</a></li>
</ul>
</div>
</div>
<div class="col-md-3">
<div class="footer-all-menu">
<h2>My Account</h2>
<ul>
<li><i class="fa fa-circle"></i>
<a href="">Information</a></li>
<li><i class="fa fa-circle"></i>
<a href="">Order History</a></li>
<li><i class="fa fa-circle"></i>
<a href="">Order History</a></li>
<li><i class="fa fa-circle"></i>
<a href="">My Wishlist</a></li>
<li><i class="fa fa-circle"></i>
<a href="">Privacy Policy</a></li>
<li><i class="fa fa-circle"></i>
<a href="">Site Map</a></li>
</ul>
</div>
</div>
<div class="col-md-3">
<div class="footer-all-menu">
<h2>Information</h2>
<ul>
<li><i class="fa fa-circle"></i>
<a href="">Cart</a></li>
<li><i class="fa fa-circle"></i>
<a href="">Product Support</a></li>
<li><i class="fa fa-circle"></i>
<a href="">PC Setup & Support</a></li>
<li><i class="fa fa-circle"></i>
<a href="">Services</a></li>
<li><i class="fa fa-circle"></i>
<a href="">Extended Services Plans</a></li>
</ul>
</div>
</div>
<div class="col-md-2">
<div class="footer-all-menu">
<h2>Our Services</h2>
<ul>
<li><i class="fa fa-circle"></i>
<a href="">About</a></li>
<li><i class="fa fa-circle"></i>
<a href="">Shipping Guide</a></li>
<li><i class="fa fa-circle"></i>
<a href="">Store Location</a></li>
<li><i class="fa fa-circle"></i>
<a href="">Affiliates</a></li>
<li><i class="fa fa-circle"></i>
<a href="">Customer Point Policy</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="footer-middle">
<div class="containers">
<div class="row">
<div class="col-md-4">
<h2>Sign up for our exclusive Newsletter</h2>
</div>
<div class="col-md-4">
<input type="mail" class="input" placeholder="Email Address">
<button type="button" class="btn"><i class="fa fa-location-arrow"></i></button>
</div>
<div class="col-md-4">
<div class="social text-right">
<ul>
<li><a href=""><i class="fa fa-facebook"></i></a></li>
<li><a href=""><i class="fa fa-twitter"></i></a></li>
<li><a href=""><i class="fa fa-pinterest"></i></a></li>
<li><a href=""><i class="fa fa-instagram"></i></a></li>
<li><a href=""><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="containers text-center">
<p>© 2020 HiTheme. Designed by <a href="">
Creative Developer.</a>
All Rights Reserved
</p>
</div>
</footer>
Style.css-
.footer-top{
padding: 50px 0;
background: #111;
}
.footer-top-menu ul{
padding: 0;
margin: 0;
}
.footer-top-menu ul li{
list-style-type: none;
margin-top: 20px;
color: #fff;
}
.footer-top-menu ul li i{
margin-right: 10px;
font-size: 17px;
}
.footer-top-menu ul li .heading{
text-transform: uppercase;
font-weight: 500;
font-size: 14px;
}
.footer-top-menu ul li .address{
color: #ccc;
padding-left: 10px;
font-size: 15px;
}
.footer-top-menu ul li .email a{
padding-left: 10px;
color: #ccc;
text-decoration: underline;
transition: all .3s ease;
font-size: 15px;
}
.footer-top-menu ul li .email a:hover{
color: #ff4000;
}
.footer-top-menu ul li .number a{
color: #ff4000;
font-size: 20px;
font-weight: 700;
padding-left: 10px;
text-decoration: none;
font-size: 20px;
}
.footer-all-menu h2{
color: #ff4000;
font-weight: 600;
font-size: 16px;
text-transform: uppercase;
position: relative;
margin: 0;
}
.footer-all-menu h2::before{
content: "";
width: 50px;
height: 2px;
background: #dbdbdb;
opacity: .1;
position: absolute;
bottom: -19px;
left: 0;
}
.footer-all-menu ul{
margin: 30px 0 0 0;
padding: 0;
}
.footer-all-menu ul li{
list-style-type: none;
margin-top: 8px;
}
.footer-all-menu ul li a{
text-decoration: none;
font-weight: 400;
color: #666;
font-size: 15px;
transition: all ease .3s;
}
.footer-all-menu ul li i{
font-size: 7px;
margin: -2px 10px 0 0;
}
.footer-all-menu ul li a:hover{
margin-left: 10px;
color: #ff4000;
}
.footer-all-menu ul li:hover i{
color: #ff4000;
}
.footer-middle{
padding: 50px 0;
background: #1d1d1d;
}
.footer-middle h2{
font-size: 20px;
color: #fff;
font-weight: 700;
}
.input{
border: 0;
outline: 0;
color: #ccc;
background: #111;
padding: 0 16px;
margin: 0;
min-width: 360px;
height: 45px;
font-size: 14px;
font-style: italic;
border-radius: 20px 0 0 20px;
position: relative;
}
.btn{
color: #fff;
background-color: #111;
height: 45px;
padding: 0 25px;
border-radius: 0 20px 20px 0;
border: none;
outline: none;
position: absolute;
right: 0;
top: 0;
}
.btn:focus, .btn:active{
border: none!important;
outline: none!important;
}
.btn:hover i{
color: #ff4000;
}
.social ul{
padding: 0;
margin: 0;
}
.social ul li{
position: relative;
display: inline-block;
margin-right: 5px;
list-style-type: none;
}
.social ul li a{
width: 45px;
height: 45px;
background-color: rgba(255,255,255,.2);
border-radius: 50%;
display: inline-block;
font-size: 18px;
color: #c9c9c9;
transition: .3s all ease;
}
.social ul li a i{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.social ul li a:hover{
background: #ff4000;
color: #fff;
}
footer{
padding: 20px 0;
background: #111;
}
footer p{
margin: 0;
padding: 0;
color: #ccc;
}
footer p a{
color: #fff;
transition: .3s all ease;
}
footer p a:hover{
color: #ff4000;
text-decoration: none;
}
YouTube -