<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Simple clean bootstrap footer design</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<!-- Footer -->
<footer class="pt-5 pb-4" id="contact">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6 mt-2 mb-4">
<h5 class="mb-4 font-weight-bold">ABOUT US</h5>
<p class="mb-4">Etiam laoreet in ex quis efficitur.</p>
<ul class="f-address">
<li>
<div class="row">
<div class="col-1"><i class="fas fa-map-marker"></i></div>
<div class="col-10">
<h6 class="font-weight-bold mb-0">Address:</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</li>
<li>
<div class="row">
<div class="col-1"><i class="far fa-envelope"></i></div>
<div class="col-10">
<h6 class="font-weight-bold mb-0">Have any questions?</h6>
<p><a href="#">
[email protected]</a></p>
</div>
</div>
</li>
<li>
<div class="row">
<div class="col-1"><i class="fas fa-phone-volume"></i></div>
<div class="col-10">
<h6 class="font-weight-bold mb-0">Address:</h6>
<p><a href="#">+XX (0) XX XX-XXXX-XXXX</a></p>
</div>
</div>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 mt-2 mb-4">
<h5 class="mb-4 font-weight-bold">FRESH TWEETS</h5>
<ul class="f-address">
<li>
<div class="row">
<div class="col-1"><i class="fab fa-twitter"></i></div>
<div class="col-10">
<p class="mb-0"><a href="#">@userthemesrel </a> HTML Version Out Now</p>
<label>10 Mins Ago</label>
</div>
</div>
</li>
<li>
<div class="row">
<div class="col-1"><i class="fab fa-twitter"></i></div>
<div class="col-10">
<p class="mb-0"><a href="#">@userthemesrel </a> HTML Version Out Now</p>
<label>10 Mins Ago</label>
</div>
</div>
</li>
<li>
<div class="row">
<div class="col-1"><i class="fab fa-twitter"></i></div>
<div class="col-10">
<p class="mb-0"><a href="#">@userthemesrel </a> HTML Version Out Now</p>
<label>10 Mins Ago</label>
</div>
</div>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 mt-2 mb-4">
<h5 class="mb-4 font-weight-bold">LATEST UPDATES</h5>
<ul class="recent-post">
<li>
<label class="mr-3">28 <br><span>APR</span></label>
<span>Rendomised words which dont look eveable.</span>
</li>
<li>
<label class="mr-3">29 <br><span>APR</span></label>
<span>Rendomised words which dont look eveable.</span>
</li>
<li>
<label class="mr-3">30 <br><span>APR</span></label>
<span>Rendomised words which dont look eveable.</span>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 mt-2 mb-4">
<h5 class="mb-4 font-weight-bold">CONNECT WITH US</h5>
<div class="input-group">
<input type="text" class="form-control" placeholder="Your Email Address">
<span class="input-group-addon" id="basic-addon2"><i class="fas fa-check"></i></span>
</div>
<ul class="social-pet mt-4">
<li><a href="#" title="facebook"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" title="twitter"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" title="google-plus"><i class="fab fa-google-plus-g"></i></a></li>
<li><a href="#" title="instagram"><i class="fab fa-instagram"></i></a></li>
</ul>
</div>
</div>
</div>
</footer>
<!-- Copyright -->
<section class="copyright">
<div class="container">
<div class="row">
<div class="col-md-12 ">
<div class="text-center text-white">
© 2018 Your Company. All Rights Reserved.
</div>
</div>
</div>
</div>
</section>
<!-- partial -->
</body>
</html>
/*=-footer-=*/
footer {
color: #fff;
background-attachment: fixed;
background-color:#222;
background-image: url(https://s7.postimg.org/uyf0oioaz/footer-bg.png);
background-size: cover;
background-position: bottom;
}
footer p {
color: #ccc;
}
footer a {
color: #ccc;
}
.social-pet li {
display: inline-block;
margin-right: 10px;
}
.social-pet li a {
height: 35px;
width: 35px;
border-radius: 50%;
text-align: center;
display: block;
line-height: 35px;
background-color: #3a5a95;
color: #fff;
}
.social-pet li:nth-child(2) a {
background-color: #57aced;
}
.social-pet li:nth-child(3) a {
background-color: #dd4f43;
}
.social-pet li:nth-child(4) a {
background-color: #6b27b2;
}
.social-pet li a:hover {
background-color: #0141a2;
}
.social-pet li a:hover i {
transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
.recent-post li {
display: block;
color: #ccc;
margin-bottom: 25px;
}
.recent-post li label {
float: left;
border: 2px solid #ccc;
padding: 1px 7px;
text-align: center;
}
.recent-post li label span {
color: #fff;
}
footer .input-group-addon {
background-color: #0141a2;
padding: 10px;
}
.f-address li {
display: inline-block;
}
.f-address li i {
color: #2995de;
font-size: 18px;
}
.f-address li a {
color: #ccc;
}
/*=-Copyright-=*/
.copyright {
background-color: #111;
padding: 12px 0;
font-size:14px;
}
nate
hello how can i make the icons go to the desired site?