<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
<!-- Footer Start -->
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="footer-blog">
<h3>From Blog</h3>
<div>
<a href="">Lorem ipsum dolor sit amet</a>
<p><i class="fa fa-time"></i>01-Jan-2045</p>
</div>
<div>
<a href="">Lorem ipsum dolor sit amet elit</a>
<p><i class="fa fa-time"></i>01-Jan-2045</p>
</div>
<div>
<a href="">Lorem ipsum dolor sit</a>
<p><i class="fa fa-time"></i>01-Jan-2045</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="footer-insta">
<h3>From Instagram</h3>
<a href=""><img src="https://demo.htmlcodex.com/917/bootstrap-footer-templates/img/img-1.jpg" alt="Image"></a>
<a href=""><img src="https://demo.htmlcodex.com/917/bootstrap-footer-templates/img/img-2.jpg" alt="Image"></a>
<a href=""><img src="https://demo.htmlcodex.com/917/bootstrap-footer-templates/img/img-3.jpg" alt="Image"></a>
<a href=""><img src="https://demo.htmlcodex.com/917/bootstrap-footer-templates/img/img-4.jpg" alt="Image"></a>
<a href=""><img src="https://demo.htmlcodex.com/917/bootstrap-footer-templates/img/img-5.jpg" alt="Image"></a>
<a href=""><img src="https://demo.htmlcodex.com/917/bootstrap-footer-templates/img/img-6.jpg" alt="Image"></a>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="footer-tags">
<h3>Tags Widget</h3>
<a href="">lorem</a>
<a href="">ipsum</a>
<a href="">dolor</a>
<a href="">sit</a>
<a href="">amet</a>
<a href="">faucibus</a>
<a href="">augue</a>
<a href="">rutrum</a>
<a href="">turpis</a>
<a href="">semper</a>
<a href="">lacinia</a>
<a href="">diam</a>
<a href="">velit</a>
<a href="">egestas</a>
<a href="">auctor</a>
<a href="">varius</a>
<a href="">metus</a>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="footer-newsletter">
<h3>Newsletter</h3>
<div class="form">
<input class="form-control" placeholder="Your Name">
<input class="form-control" placeholder="Your Email">
<button class="btn">Subscribe</button>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="footer-contact">
<div class="row align-items-center">
<div class="col-md-4">
<h4>Call Now</h4>
<p>+123 456 7890</p>
</div>
<div class="col-md-4">
<h4>Email Us</h4>
<p>info@example.com</p>
</div>
<div class="col-md-4">
<h4>Get in Touch</h4>
<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-youtube"></i></a>
<a href=""><i class="fab fa-instagram"></i></a>
<a href=""><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
</div>
<div class="copyright">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6">
<div class="copy-text">
<p>© <a href="#">Your Site Name</a>. All Rights Reserved.</p>
</div>
</div>
<div class="col-md-6">
<div class="copy-menu">
<a href="">Terms</a>
<a href="">Privacy</a>
<a href="https://htmlcodex.com">Author</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer End -->
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: #ffffff;
}
a {
transition: .3s;
}
a:hover,
a:active,
a:focus {
outline: none;
text-decoration: none;
}
.footer {
position: relative;
padding-top: 45px;
background: #121518;
}
.footer .footer-blog,
.footer .footer-insta,
.footer .footer-tags,
.footer .footer-newsletter {
position: relative;
margin-bottom: 45px;
}
.footer .footer-blog h3,
.footer .footer-insta h3,
.footer .footer-tags h3,
.footer .footer-newsletter h3 {
position: relative;
margin-bottom: 20px;
padding-bottom: 10px;
font-size: 18px;
font-weight: 400;
color: #ffffff;
}
.footer .footer-blog h3::after,
.footer .footer-insta h3::after,
.footer .footer-tags h3::after,
.footer .footer-newsletter h3::after {
position: absolute;
content: "";
width: 50px;
height: 2px;
left: 0;
bottom: 0;
background: #ffffff;
}
.footer .footer-blog div {
position: relative;
padding-left: 15px;
}
.footer .footer-blog div::before {
position: absolute;
content: "\f105";
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: #cccccc;
left: 0;
}
.footer .footer-blog div a {
display: block;
margin-bottom: 5px;
font-size: 16px;
color: #cccccc;
}
.footer .footer-blog div a:hover {
color: #0085ff;
}
.footer .footer-blog div p {
padding-left: 20px;
color: #757575;
font-size: 13px;
font-weight: 600;
letter-spacing: 1px;
}
.footer .footer-blog div p::before {
position: absolute;
content: "\f017";
font-family: "Font Awesome 5 Free";
font-weight: 400;
color: #757575;
left: 15px;
}
.footer .footer-insta {
float: left;
font-size: 0;
}
.footer .footer-insta a {
padding: 0 5px 5px 0;
display: block;
width: 33.33%;
float: left;
}
.footer .footer-insta a img {
width: 100%;
}
.footer .footer-tags {
font-size: 0;
}
.footer .footer-tags a {
display: inline-block;
margin: 0 5px 5px 0;
padding: 3px 8px;
font-size: 14px;
color: #dddddd;
text-transform: capitalize;
border: 1px solid #dddddd;
}
.footer .footer-tags a:hover {
color: #ffffff;
background: #0085ff;
border-color: #0085ff;
}
.footer .footer-newsletter .form {
position: relative;
width: 100%;
}
.footer .footer-newsletter input {
height: 45px;
border: 1px solid #dddddd;
border-radius: 0;
background: #121518;
margin-bottom: 15px;
}
.footer .footer-newsletter .btn {
display: block;
width: 100%;
height: 45px;
padding: 8px 20px;
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
color: #dddddd;
background: #000000;
border-radius: 0;
border: 1px solid #dddddd;
transition: .3s;
}
.footer .footer-newsletter .btn:hover {
color: #ffffff;
background: #0085ff;
border-color: #0085ff;
}
.footer .footer-newsletter .btn:focus {
box-shadow: none;
}
.footer .footer-contact {
position: relative;
padding: 25px 0;
text-align: center;
border-top: 1px solid rgba(256, 256, 256, .1);
}
.footer .footer-contact h4 {
position: relative;
margin-bottom: 10px;
font-size: 18px;
font-weight: 600;
letter-spacing: 1px;
color: #ffffff;
}
.footer .footer-contact p {
margin: 0;
font-size: 16px;
color: #999999;
}
.footer .footer-contact a {
display: inline-block;
}
.footer .footer-contact a i {
margin-right: 10px;
font-size: 18px;
color: #999999;
}
.footer .footer-contact a:last-child i {
margin: 0;
}
.footer .footer-contact a:hover i {
color: #0085ff;
}
@media (max-width: 767.98px) {
.footer .footer-contact .col-md-4 {
margin-bottom: 25px;
}
.footer .footer-contact .col-md-4:last-child {
margin: 0;
}
}
.footer .copyright {
position: relative;
padding: 25px 0;
background: #000000;
}
.footer .copyright .copy-text p {
margin: 0;
font-size: 16px;
font-weight: 400;
color: #999999;
}
.footer .copyright .copy-text p a {
color: #dddddd;
}
.footer .copyright .copy-text p a:hover {
color: #0085ff;
}
.footer .copyright .copy-menu {
position: relative;
font-size: 0;
text-align: right;
}
.footer .copyright .copy-menu a {
color: #999999;
font-size: 16px;
font-weight: 400;
margin-right: 15px;
padding-right: 15px;
border-right: 1px solid rgba(255, 255, 255, .3);
}
.footer .copyright .copy-menu a:hover {
color: #0085ff;
}
.footer .copyright .copy-menu a:last-child {
margin-right: 0;
padding-right: 0;
border-right: none;
}
@media (max-width: 767.98px) {
.footer .copyright .copy-text,
.footer .copyright .copy-menu {
text-align: center;
}
.footer .copyright .copy-text p {
margin-bottom: 5px;
}
}
