Footer 1
View Code
<div class="footer1 font-14">
<div class="f1-topbar">
<div class="container">
<!-- Row -->
<div class="row">
<!-- Column -->
<div class="col-md-12" data-aos="fade-right" data-aos-duration="1200">
<nav class="navbar navbar-expand-lg f1-nav"> <a class="navbar-brand hidden-md-up" href="#">Footer Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ft1" aria-controls="ft1" aria-expanded="false" aria-label="Toggle navigation"> <span class="ti-menu"></span> </button>
<div class="collapse navbar-collapse" id="ft1">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About Me</a></li>
<li class="nav-item"><a class="nav-link" href="#">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="#">Work</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link text-dark text-uppercase" href="#"><i class="icon-Mail-Read text-danger font-20 m-r-10"></i>Request a Free Consultation</a></li>
</ul>
</div>
</nav>
</div>
<!-- Column -->
</div>
</div>
</div>
<!-- Row -->
<div class="f1-middle">
<div class="container">
<div class="row">
<!-- Column -->
<div class="col-lg-3 col-md-6">
<a href="#"><img src="../assets/images/logos/blue-logo-text.jpg" alt="wrapkit" /></a>
<p class="m-t-20">You can relay on our amazing features list and also our customer services will be great experience.</p>
<p>our amazing features list and also our customer services is great.</p>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="d-flex no-block m-b-10 m-t-20">
<div class="display-7 m-r-20 align-self-top"><i class="icon-Location-2"></i></div>
<div class="info">
<span class="font-medium text-dark db m-t-5">WrapKit Head Office</span><br/>
<p>134, Cornish Building, Some<br/>
Near by area, New York,<br/>
USA - 34556</p>
</div>
</div>
<div class="d-flex no-block m-b-10">
<div class="display-7 m-r-20 align-self-top"><i class="icon-Phone-2"></i></div>
<div class="info">
<span class="font-medium text-dark 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="icon-Mail"></i></div>
<div class="info">
<a href="#" class="font-medium text-dark db m-t-5">info@wrappixel.com</a>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-6 col-md-12 m-t-5">
<h6 class="font-medium m-t-20">Services we Offer</h6>
<ul class="general-listing two-part with-arrow m-t-10">
<li><a href="#"><i class="fa fa-angle-right"></i> Website Design</a></li>
<li><a href="#"><i class="fa fa-angle-right"></i> Application Development</a></li>
<li><a href="#"><i class="fa fa-angle-right"></i> Mobile Development</a></li>
<li><a href="#"><i class="fa fa-angle-right"></i> Search Engine Optimzation</a></li>
<li><a href="#"><i class="fa fa-angle-right"></i> Digital Marketing</a></li>
<li><a href="#"><i class="fa fa-angle-right"></i> Website Development </a></li>
<li><a href="#"><i class="fa fa-angle-right"></i> eBook Writing </a></li>
<li><a href="#"><i class="fa fa-angle-right"></i> SaaS base Applications</a></li>
<li><a href="#"><i class="fa fa-angle-right"></i> Ruby on Rails Development </a></li>
<li><a href="#"><i class="fa fa-angle-right"></i> Php Development</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Row -->
<div class="f1-bottom-bar">
<div class="container">
<div class="d-flex">
<div class="m-t-10 m-b-10">© All Rights Reserved by WrapPixel.</div>
<div class="links ml-auto m-t-10 m-b-10">
<a href="#" class="link p-10"><i class="fa fa-facebook"></i></a>
<a href="#" class="link p-10"><i class="fa fa-twitter"></i></a>
<a href="#" class="link p-10"><i class="fa fa-linkedin"></i></a>
<a href="#" class="link p-10"><i class="fa fa-pinterest"></i></a>
<a href="#" class="link p-10"><i class="fa fa-instagram"></i></a>
</div>
</div>
</div>
</div>
</div>
.footer1{
.f1-topbar{
border-bottom: 1px dashed $border;
.navbar{
padding: 0px;
.navbar-nav{
.nav-item{
.nav-link{
color:$bodytext;
display: block;
padding: 15px 13px;
}
&:hover .nav-link, &.active .nav-link{
color:$themecolor;
}
}
}
}
}
.f1-middle{
padding: 40px 0;
}
.f1-bottom-bar{
padding:20px 0;
border-top:1px solid $border;
}
}
You can relay on our amazing features list and also our customer services will be great experience.
our amazing features list and also our customer services is great.
WrapKit Head Office
134, Cornish Building, Some
Near by area, New York,
USA - 34556
1 (888) 123 4567
Footer 2
View Code
<div class="footer2 font-14 bg-dark">
<div class="f2-topbar container">
<div class="d-flex">
<a href="#"><img src="../assets/images/logos/blue-logo-text-trans.png" alt="wrapkit" /></a>
<div class="ml-auto align-self-center">
<span class="text-white">WrapKit by WrapPixel</span> © 2017 All rights reserved.
</div>
</div>
</div>
<div class="f2-middle">
<div class="container">
<div class="row">
<!-- Column -->
<div class="col-lg-4 col-md-6">
<p class="p-t-10">Nullam erat ametam arcu lorme pharetra id risus act sectetur ipsum luctus est ullam erat ametam arcu lorme pharetra id us act sectetur ipsum luctus est. </p>
<p>Vestibulum in accumsa maga eds maurise elit tincidunt turpis id semper. </p>
<div class="m-t-20 m-b-30">
<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>
<!-- Column -->
<div class="col-lg-2 col-md-6">
<ul class="general-listing">
<li><a href="#"><i class="fa fa-circle"></i> Home</a></li>
<li><a href="#"><i class="fa fa-circle"></i> Services</a></li>
<li><a href="#"><i class="fa fa-circle"></i> Pricing</a></li>
<li><a href="#"><i class="fa fa-circle"></i> Case Studies</a></li>
<li><a href="#"><i class="fa fa-circle"></i> Blog</a></li>
<li><a href="#"><i class="fa fa-circle"></i> Contact Us </a></li>
</ul>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-3 col-md-6 info-box">
<div class="d-flex no-block">
<div class="display-7 m-r-20 align-self-top"><i class="icon-Location-2"></i></div>
<div class="info">
<p>134, Cornish Building, Some<br/>
Near by area, New York,<br/>
USA - 34556</p>
</div>
</div>
<div class="d-flex no-block">
<div class="display-7 m-r-20 align-self-top"><i class="icon-Over-Time"></i></div>
<div class="info">
<span class="font-medium text-muted db m-t-5">8.00 AM - 6:00PM</span>
</div>
</div>
<div class="d-flex no-block">
<div class="display-7 m-r-20 align-self-top"><i class="icon-Phone-2"></i></div>
<div class="info">
<span class="font-medium text-muted db m-t-5">1 (888) 123 4567</span>
</div>
</div>
<div class="d-flex no-block">
<div class="display-7 m-r-20 align-self-top"><i class="icon-Mail"></i></div>
<div class="info">
<a href="#" class="font-medium text-muted db m-t-5">info@wrappixel.com</a>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="subscribe-box">
<div class="display-4 text-white"><i class="icon-Mail-3"></i></div>
<p>Nullam erat ametam arcuing lorme pharetra id risus act sectetur ipsum luctus est. </p>
<form>
<div class="m-b-20"><input class="form-control" placeholder="enter email"></div>
<button class="btn btn-danger-gradiant">JOIN US</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
.footer2{
padding: 60px 0;
.f2-topbar{
padding-bottom: 20px;
border-bottom: 1px solid $border;
}
.f2-middle{
padding-top:40px;
}
.link{
color:$muted;
padding:10px 15px 10px 0;
}
.general-listing{
li a{
i{
font-size:9px;
margin-right: 10px;
}
}
}
.info-box .d-flex{
padding: 15px 0;
border-bottom: 1px solid $border;
}
.subscribe-box{
background: $border;
padding: 25px;
.form-control{
background: transparent;
padding: 10px 0;
border:0px;
border-bottom: 1px solid $border;
color:$white;
border-radius: 0px;
&:focus{
border-bottom: 1px solid $white;
}
}
}
}
WrapKit by WrapPixel © 2017 All rights reserved.
Nullam erat ametam arcu lorme pharetra id risus act sectetur ipsum luctus est ullam erat ametam arcu lorme pharetra id us act sectetur ipsum luctus est.
Vestibulum in accumsa maga eds maurise elit tincidunt turpis id semper.
134, Cornish Building, Some
Near by area, New York,
USA - 34556
8.00 AM - 6:00PM
1 (888) 123 4567
Nullam erat ametam arcuing lorme pharetra id risus act sectetur ipsum luctus est.
Footer 3
View Code
<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/logos/green-logo.png" alt="wrapkit" /></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">
<h6 class="font-medium text-white">SERVICES</h6>
<ul class="general-listing">
<li><a href="#"><i class="ti-arrow-right"></i> Website Design</a></li>
<li><a href="#"><i class="ti-arrow-right"></i> Mobile App Development</a></li>
<li><a href="#"><i class="ti-arrow-right"></i> Search Engine Optimization</a></li>
<li><a href="#"><i class="ti-arrow-right"></i> Website Development</a></li>
</ul>
</div>
<!-- cOLUMN -->
<!-- cOLUMN -->
<div class="col-lg-3 col-md-6 m-b-30">
<h6 class="font-medium text-white">PROJECTS</h6>
<div class="d-flex no-block align-items-center m-t-20">
<div class="thumb m-r-20"><img src="../assets/images/footer/img1.jpg" alt="wrapkit"/></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/footer/img2.jpg" alt="wrapkit"/></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">
<h6 class="font-medium text-white">BLOG</h6>
<div class="d-flex no-block align-items-center m-t-20">
<div class="thumb m-r-20"><img src="../assets/images/footer/img3.jpg" alt="wrapkit"/></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/footer/img4.jpg" alt="wrapkit"/></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">
<h6 class="font-medium text-white">CONTACT</h6>
<div class="d-flex no-block m-b-10 m-t-20">
<div class="display-7 m-r-20 align-self-top"><i class="icon-Location-2"></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="icon-Phone-2"></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="icon-Mail"></i></div>
<div class="info">
<a href="#" class="link db m-t-5">info@wrappixel.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 2017. All Rights Reserved by WrapPixel.</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;
}
}
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna ad minim.
PROJECTS
BLOG
Footer 4
View Code
<div class="footer4 spacer">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 m-b-30">
<h5 class="m-b-20">Address</h5>
<p>71 Amsteroum Avenue Cronish Night, NY 35098</p>
</div>
<div class="col-lg-3 col-md-6 m-b-30">
<h5 class="m-b-20">Phone</h5>
<p>Reception : +205 123 4567 <br/>Office : +207 235 7890</p>
</div>
<div class="col-lg-3 col-md-6 m-b-30">
<h5 class="m-b-20">Email</h5>
<p>Office : <a href="#" class="link">info@wrappixel.com</a> <br/>Site : <a href="#" class="link">wrapkit@wrappixel.com</a></p>
</div>
<div class="col-lg-3 col-md-6">
<h5 class="m-b-20">Social</h5>
<div class="round-social light">
<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>
</div>
</div>
</div>
<div class="f4-bottom-bar">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-expand-lg h1-nav">
<a class="navbar-brand" href="#"><img src="../assets/images/logos/green-logo.png" alt="wrapkit" width="50" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#header1" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="ti-menu"></span>
</button>
<div class="collapse navbar-collapse" id="header1">
<span class="hidden-lg-down">All Rights Reserved by WrapPixel.</span>
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About Me</a></li>
<li class="nav-item"><a class="nav-link" href="#">Work</a></li>
<li class="nav-item"><a class="nav-link" href="#">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#">Freebies</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
.footer4{
.f4-bottom-bar{
padding-top: 10px;
margin-top: 20px;
border-top: 1px solid $border;
}
}
Footer 5
View Code
<div class="footer5 spacer">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-6 m-b-30">
<ul class="general-listing">
<li><a href="#">Nice big link</a></li>
<li><a href="#">We’re Hiring</a></li>
<li><a href="#">Press Center</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-6 m-b-30">
<ul class="general-listing">
<li><a href="#">We’re Hiring</a></li>
<li><a href="#">Press Center</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Accessibility</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-6 m-b-30">
<div class="d-flex no-block">
<div class="display-7 m-r-20 align-self-top"><i class="icon-Location-2"></i></div>
<div class="info">
<span class="font-medium text-dark db m-t-5">WrapKit Head Office</span><br>
<p>134, Cornish Building,<br>
Near by area, New York,<br>
USA - 34556</p>
</div>
</div>
<div class="d-flex no-block m-b-10">
<div class="display-7 m-r-20 align-self-top"><i class="icon-Phone-2"></i></div>
<div class="info">
<span class="font-medium text-dark 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="icon-Mail"></i></div>
<div class="info">
<a href="#" class="font-medium text-dark db m-t-5">info@wrappixel.com</a>
</div>
</div>
</div>
<div class="col-lg-5 col-md-6 m-b-30">
<h6 class="font-medium m-b-30">Subscribe to Our Newsletter</h6>
<form>
<div class="input-group">
<input type="text" class="form-control " placeholder="Email Id">
<span class="input-group-btn">
<button class="btn btn-danger-gradiant btn-md" type="button">Subscribe</button>
</span>
</div>
</form>
<div class="social-links">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-rss"></i></a>
</div>
<img src="../assets/images/footer/img5.jpg" alt="wrapkit" />
</div>
</div>
</div>
</div>
.footer5{
.form-control{
background: $white;
}
.social-links{
margin: 20px 0;
a{
color:$bodytext;
opacity: 0.5;
padding: 0 15px 0 0;
&:hover{
color:$themecolor;
opacity: 1;
}
}
}
}
WrapKit Head Office
134, Cornish Building,
Near by area, New York,
USA - 34556
1 (888) 123 4567
Subscribe to Our Newsletter
Footer 6
View Code
<footer class="footer6 bg-inverse spacer">
<div class="container">
<div class="row">
<!-- coluumn -->
<div class="col-lg-4">
<div class="d-flex no-block m-b-10 text-white">
<div class="display-7 m-r-20 "><i class="icon-Phone-2"></i></div>
<div class="info">
<span class="db m-t-5">1 (888) 123 4567</span>
</div>
</div>
</div>
<!-- coluumn -->
<!-- coluumn -->
<div class="col-lg-4">
<div class="d-flex no-block m-b-10">
<div class="display-7 m-r-20 text-white"><i class="icon-Mail"></i></div>
<div class="info">
<a href="mailto:info@wrappixel.com" class="db white-link m-t-5">wrapkit@wrappixel.com</a>
</div>
</div>
</div>
<!-- coluumn -->
<!-- coluumn -->
<div class="col-lg-4 ml-auto">
<div class="ml-auto round-social dark">
<a href="#" class=""><i class="fa fa-facebook"></i></a>
<a href="#" class=""><i class="fa fa-twitter"></i></a>
<a href="#" class=""><i class="fa fa-linkedin"></i></a>
<a href="#" class=""><i class="fa fa-pinterest"></i></a>
<a href="#" class=""><i class="fa fa-instagram"></i></a>
</div>
</div>
<div class="col-md-12 b-t m-t-40">
<div class="p-t-20">Copyright 2017. All Rights Reserved by WrapPixel.</div>
</div>
</div>
</div>
</footer>
.footer6{
.round-social{
a {
background:$border;
color:$muted;
width:40px;
height:40px;
line-height:40px;
&:hover{
color:$white;
}
}
}
}