Footer Light
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In leo tortor, pulvinar vitae dui eu, imperdiet eleifend est. Proin tempus urna elit, et tristique felis luctus quis.
Code Snippet For Footer
<section class = "container-fluid wdpk-footer mt-5">
<div class = "row">
<div class = "container">
<div class = "row">
<div class = "col wdpk-footer-column">
<h6 class = "wdpk-footer-heading">Our Services</h6>
<div class = "wdpk-footer-list">
<a href = "#" class = "wdpk-footer-list-link">
Web Design
</a>
<a href = "#" class = "wdpk-footer-list-link">
Logo Design
</a>
<a href = "#" class = "wdpk-footer-list-link">
Web Development
</a>
<a href = "#" class = "wdpk-footer-list-link">
Mobile Apps
</a>
<a href = "#" class = "wdpk-footer-list-link">
WordPress
</a>
<a href = "#" class = "wdpk-footer-list-link">
User Experience
</a>
</div>
</div>
<div class = "col wdpk-footer-column">
<h6 class = "wdpk-footer-heading">Support </h6>
<div class = "wdpk-footer-list">
<a href = "#" class = "wdpk-footer-list-link">
Forum
</a>
<a href = "#" class = "wdpk-footer-list-link">
Knowledgebase
</a>
<a href = "#" class = "wdpk-footer-list-link">
Raise Ticket
</a>
<a href = "#" class = "wdpk-footer-list-link">
Live Chat
</a>
<a href = "#" class = "wdpk-footer-list-link">
FAQ's
</a>
<a href = "#" class = "wdpk-footer-list-link">
Phone Support
</a>
</div>
</div>
<div class = "col wdpk-footer-column">
<h6 class = "wdpk-footer-heading">About Us</h6>
<div class = "wdpk-footer-list">
<a href = "#" class = "wdpk-footer-list-link">
Company
</a>
<a href = "#" class = "wdpk-footer-list-link">
Legacy
</a>
<a href = "#" class = "wdpk-footer-list-link">
Out Team
</a>
<a href = "#" class = "wdpk-footer-list-link">
Our Clients
</a>
<a href = "#" class = "wdpk-footer-list-link">
Locations
</a>
<a href = "#" class = "wdpk-footer-list-link">
Management
</a>
</div>
</div>
<div class = "col-5 wdpk-footer-column">
<h6 class = "wdpk-footer-heading">Contact Us</h6>
<form class="wdpk-from">
<div class="form-row">
<div class="form-group col-12">
<label for="inputName">Name</label>
<input type="text" class="form-control" id="inputName" placeholder="Email" data-kwimpalastatus="alive" data-kwimpalaid="1565179097108-5">
</div>
<div class="form-group col-12">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email" data-kwimpalastatus="alive" data-kwimpalaid="1565179097108-5">
</div>
</div>
<button type="submit" class="btn btn-primary">Contact Us</button>
</form>
</div>
</div>
</div>
</div>
</section>
<section class = "container-fluid wdpk-footer-copyright">
<div class = "row">
<div class = "container">
<div class = "row">
<div class = "col wdpk-footer-column d-flex">
<span class = "align-self-center">
© 2019 WoodPecker® HTML Template. All Rights Reserved
</span>
</div>
<div class = "col wdpk-footer-column wdpk-footer-social">
<!-- Social Item for footer -->
<a href = "#" class = "wdpk-footer-social-wrap">
<div class = "wdpk-footer-social-item">
<i class = "fab fa fa-facebook"></i>
</div>
</a>
<!-- /Social Item for footer -->
<!-- Social Item for footer -->
<a href = "#" class = "wdpk-footer-social-wrap">
<div class = "wdpk-footer-social-item">
<i class = "fab fa fa-twitter"></i>
</div>
</a>
<!-- /Social Item for footer -->
<!-- Social Item for footer -->
<a href = "#" class = "wdpk-footer-social-wrap">
<div class = "wdpk-footer-social-item">
<i class = "fab fa fa-google-plus"></i>
</div>
</a>
<!-- /Social Item for footer -->
<!-- Social Item for footer -->
<a href = "#" class = "wdpk-footer-social-wrap">
<div class = "wdpk-footer-social-item">
<i class = "fab fa fa-behance"></i>
</div>
</a>
<!-- /Social Item for footer -->
<!-- Social Item for footer -->
<a href = "#" class = "wdpk-footer-social-wrap">
<div class = "wdpk-footer-social-item">
<i class = "fab fa fa-youtube"></i>
</div>
</a>
<!-- /Social Item for footer -->
<!-- Social Item for footer -->
<a href = "#" class = "wdpk-footer-social-wrap">
<div class = "wdpk-footer-social-item">
<i class = "fab fa fa-vimeo"></i>
</div>
</a>
<!-- /Social Item for footer -->
<!-- Social Item for footer -->
<a href = "#" class = "wdpk-footer-social-wrap">
<div class = "wdpk-footer-social-item">
<i class = "fab fa fa-linkedin"></i>
</div>
</a>
<!-- /Social Item for footer -->
<!-- Social Item for footer -->
<a href = "#" class = "wdpk-footer-social-wrap">
<div class = "wdpk-footer-social-item">
<i class = "fab fa fa-pinterest"></i>
</div>
</a>
<!-- /Social Item for footer -->
<!-- Social Item for footer -->
<a href = "#" class = "wdpk-footer-social-wrap">
<div class = "wdpk-footer-social-item">
<i class = "fab fa fa-rss"></i>
</div>
</a>
<!-- /Social Item for footer -->
</div>
</div>
</div>
</div>
</section>
$wdpk-primary-color: #0056c6 !default;
$wdpk-gray-100: #f8f9fa !default;
$wdpk-gray-200: #e9ecef !default;
$wdpk-gray-300: #dee2e6 !default;
$wdpk-gray-600: #6c757d !default;
$wdpk-gray-700: #495057 !default;
$wdpk-gray-800: #343a40 !default;
$wdpk-footer-color: $wdpk-gray-600 !default;
$wdpk-footer-hover-color: $wdpk-primary-color !default;
$wdpk-footer-heading-color: $wdpk-gray-800 !default;
$wdpk-footer-list-separators: true !default;
$wdpk-footer-list-separators-color: rgba(0, 0, 0, 0.1) !default;
$wdpk-footer-social-icon-color: $wdpk-gray-600 !default;
$wdpk-footer-social-icon-hover-color: $wdpk-gray-800 !default;
$wdpk-footer-copyright-bg: $wdpk-gray-300 !default;
$wdpk-footer-bg-map: (
backgroundType: color,
gradientType: linear,
color1: $wdpk-gray-100,
color2: $wdpk-gray-100,
degree: 0deg,
backgroundImage: url(/woodpecker-html/assets/images/page-title.jpg),
backgroundRepeat: none,
backgroundHorPos: top,
backgroundVerPos: center,
backgroundSize: cover
) !default;
