<div class="footer3 bg-dark font-14">
<div class="f3-topbar container">
<div class="d-flex">
<div class="d-flex no-block align-items-center">
<a href="#" class="m-r-20"><img src="assets/images/logo.png" alt="Sapid" /></a>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br/>tempor incididunt ut labore et dolore magna ad minim.</span>
</div>
<div class="ml-auto no-shrink align-self-center">
<form>
<div class="input-group">
<input type="text" class="form-control form-control-dark form-control-lg" placeholder="Sign up for updates">
<span class="input-group-btn">
<button class="btn btn-danger-gradiant btn-md" type="button">Go!</button>
</span>
</div>
</form>
</div>
</div>
</div>
<div class="f3-middle container">
<!-- Row -->
<div class="row">
<!-- cOLUMN -->
<div class="col-lg-3 col-md-6 m-b-30">
<p class="font-medium text-white">SERVICES</p>
<ul class="general-listing">
<li><a href="#"><i class="mdi mdi-arrow-right-thick m-l-5"></i> Website Design</a></li>
<li><a href="#"><i class="mdi mdi-arrow-right-thick m-l-5"></i> Mobile App Development</a></li>
<li><a href="#"><i class="mdi mdi-arrow-right-thick m-l-5"></i> Search Engine Optimization</a></li>
<li><a href="#"><i class="mdi mdi-arrow-right-thick m-l-5"></i> Website Development</a></li>
</ul>
</div>
<!-- cOLUMN -->
<!-- cOLUMN -->
<div class="col-lg-3 col-md-6 m-b-30">
<p class="font-medium text-white">PROJECTS</p>
<div class="d-flex no-block align-items-center m-t-20">
<div class="thumb m-r-20"><img src="assets/images/logo.png" alt="Sapid"/></div>
<div class="btext"><a href="#" class="link">Hotel nira inn got bigger heding you ever seen.</a></div>
</div>
<div class="d-flex no-block align-items-center m-t-20">
<div class="thumb m-r-20"><img src="assets/images/logo.png" alt="Sapid"/></div>
<div class="btext"><a href="#" class="link">Hotel nira inn got bigger heding you ever seen.</a></div>
</div>
</div>
<!-- cOLUMN -->
<!-- cOLUMN -->
<div class="col-lg-3 col-md-6 m-b-30">
<p class="font-medium text-white">BLOG</p>
<div class="d-flex no-block align-items-center m-t-20">
<div class="thumb m-r-20"><img src="assets/images/logo.png" alt="Sapid"/></div>
<div class="btext"><a href="#" class="link">Hotel nira inn got bigger heding you ever seen.</a></div>
</div>
<div class="d-flex no-block align-items-center m-t-20">
<div class="thumb m-r-20"><img src="assets/images/logo.png" alt="Sapid"/></div>
<div class="btext"><a href="#" class="link">Hotel nira inn got bigger heding you ever seen.</a></div>
</div>
</div>
<!-- cOLUMN -->
<!-- cOLUMN -->
<div class="col-lg-3 col-md-6 m-b-30">
<p class="font-medium text-white">CONTACT</p>
<div class="d-flex no-block m-b-10 m-t-20">
<div class="display-7 m-r-20 align-self-top"><i class="mdi mdi-map-marker-multiple-outline"></i></div>
<div class="info">
<p> 321 Name of Street Avenue,<br/> Country</p>
</div>
</div>
<div class="d-flex no-block m-b-10">
<div class="display-7 m-r-20 align-self-top"><i class="mdi mdi-phone-voip"></i></div>
<div class="info">
<span class=" db m-t-5">1 (888) 123 4567</span>
</div>
</div>
<div class="d-flex no-block m-b-30">
<div class="display-7 m-r-20 align-self-top"><i class="mdi mdi-email-edit-outline"></i></div>
<div class="info">
<a href="#" class="link db m-t-5">info@example.com</a>
</div>
</div>
</div>
<!-- cOLUMN -->
</div>
<!-- Row -->
</div>
<div class="f3-bottom-bar">
<div class="container">
<div class="d-flex">
<span class="m-t-10 m-b-10">Copyright 2018. All Rights Reserved by Sapid.</span>
<div class="ml-auto m-t-10 m-b-10">
<a href="#" class="link"><i class="fa fa-facebook"></i></a>
<a href="#" class="link"><i class="fa fa-twitter"></i></a>
<a href="#" class="link"><i class="fa fa-linkedin"></i></a>
<a href="#" class="link"><i class="fa fa-pinterest"></i></a>
<a href="#" class="link"><i class="fa fa-instagram"></i></a>
</div>
</div>
</div>
</div>
</div>
.footer3{
padding-top: 50px;
.f3-topbar{
padding-bottom: 20px;
border-bottom: 1px solid $border;
.input-group{
.form-control{
font-size:16px;
}
.btn{
padding: 15px 20px;
}
}
}
.f3-middle{
padding-top:40px;
}
.general-listing{
li:hover {
a, i{
color:$white;
}
}
}
.link{
color:$bodytext;
&:hover{
color:$white;
}
}
.f3-bottom-bar{
background: rgba(0, 0, 0, 0.1);
padding: 20px 0;
.link{
padding: 0 12px;
}
}
}