"Lawn Service Footer"
Bootstrap 3.3.0 Snippet by MikeClark

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <footer class="footer"> <div class="main-footer" data-pg-collapsed> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-3"> <div class="widget w-footer widget_black_studio_tinymce"> <h6 class="widget-title"><span class="light">About</span> Us</h6> <div class="textwidget">The Landscaper is a WordPress theme build for Lawn, Landscaping Companies, Groundskeepers, Landscape Architects, Gardening Shops, Florists, Small or Big Gardener Companies. and other lawn and landscaping related services. <div class="col-xs-12 appoint"> <a href="#" class="btn btn-primary" target="_blank">Make An Appointment Now</a> </div> </div> </div> </div> <div class="col-xs-12 col-md-3"> <div class="widget w-footer widget_nav_menu"> <h6 class="widget-title"><span class="light">Extra</span> Navigation</h6> <div class="menu-footer-menu-container"> <ul id="menu-footer-menu" class="menu"> <li id="menu-item-6694" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6694"> <a href="https://demos.qreativethemes.com/thelandscaper/shortcodes/">Shortcodes</a> </li> <li id="menu-item-6696" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6696"> <a href="http://www.qreativethemes.com/docs/thelandscaper">Documentation</a> </li> <li id="menu-item-6692" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6692"> <a href="https://demos.qreativethemes.com/thelandscaper/make-an-appointment/">Make an Appointment</a> </li> <li id="menu-item-6695" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6695"> <a href="https://demos.qreativethemes.com/thelandscaper/case-study/">Case Study</a> </li> <li id="menu-item-6691" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6691"> <a href="https://demos.qreativethemes.com/thelandscaper/frequently-asked-questions/">Frequently Asked Questions</a> </li> <li id="menu-item-6693" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6693"> <a href="https://demos.qreativethemes.com/thelandscaper/prices-and-delivery/">Prices & Delivery</a> </li> </ul> </div> </div> </div> <div class="col-xs-12 col-md-3"> <div class="widget w-footer widget_nav_menu"> <h6 class="widget-title"><span class="light">Our</span> Services</h6> <div class="menu-services-menu-container"> <ul id="menu-services-menu" class="menu"> <li id="menu-item-6684" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6684"> <a href="https://demos.qreativethemes.com/thelandscaper/services/">See all Services</a> </li> <li id="menu-item-6685" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6685"> <a href="https://demos.qreativethemes.com/thelandscaper/services/irrigation-and-drainage/">Irrigation & Drainage</a> </li> <li id="menu-item-6686" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6686"> <a href="https://demos.qreativethemes.com/thelandscaper/services/lawn-and-garden-care/">Lawn & Garden Care</a> </li> <li id="menu-item-6687" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6687"> <a href="https://demos.qreativethemes.com/thelandscaper/services/planting-and-removal/">Planting & Removal</a> </li> <li id="menu-item-6688" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6688"> <a href="https://demos.qreativethemes.com/thelandscaper/services/snow-and-ice-removal/">Snow & Ice Removal</a> </li> <li id="menu-item-6689" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6689"> <a href="https://demos.qreativethemes.com/thelandscaper/services/spring-and-fall-cleanup/">Spring & Fall Cleanup</a> </li> <li id="menu-item-6690" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6690"> <a href="https://demos.qreativethemes.com/thelandscaper/services/stone-and-hardscaping/">Stone & Hardscaping</a> </li> </ul> </div> </div> </div> <div class="col-xs-12 col-md-3"> <div class="widget w-footer widget-opening-hours"> <h6 class="widget-title"><span class="light">Working</span> Hours</h6> <div class="opening-times"> <ul> <li class="weekday">Monday <span class="right">8:00am-5:00pm</span> </li> <li class="weekday">Tuesday <span class="right">8:00am-5:00pm</span> </li> <li class="weekday">Wednesday <span class="right">8:00am-5:00pm</span> </li> <li class="weekday">Thursday <span class="right">8:00am-5:00pm</span> </li> <li class="weekday">Friday <span class="right">8:00am-5:00pm</span> </li> <li class="weekday">Saturday <span class="right">8:00am-5:00pm</span> </li> <li class="weekday today">Sunday <span class="right label">CLOSED</span> </li> </ul> </div> </div> </div> </div> </div> </div> <div class="bottom-footer" data-pg-collapsed> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-4"> <div class="bottom-left"> <p>© 2017 <a href="http://themeforest.net/user/qreativethemes/portfolio?ref=QreativeThemes" target="_blank">Mike Clark</a></p> </div> </div> <div class="col-xs-12 col-md-4"> <div class="bottom-middle"> <p><a href="http://facebook.com/qreativethemes" target="_blank"><i class="fa fa-facebook-square"></i></a><a href="http://twitter.com/qreativethemes" target="_blank"><i class="fa fa-twitter-square"></i></a><a href="https://demos.qreativethemes.com/thelandscaper/#"><i class="fa fa-linkedin-square"></i></a><a href="https://demos.qreativethemes.com/thelandscaper/#"><i class="fa fa-youtube-square"></i></a></p> </div> </div> <div class="col-xs-12 col-md-4"> <div class="bottom-right"> <p>For emergency tree removal <i class="fa fa-phone"></i> 123-777-456</p> </div> </div> </div> </div> </div> </footer>
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); h6 { font-size:1.5rem; text-decoration: underline; } .footer { font-family: "Roboto", sans-serif; line-height: 1.6; background-color:#216910; color:#ACFF99; font-size:1.2rem; } .footer ul { list-style-type:none; } .footer a { color:#fff; } .footer a:hover { color:#fff; } .footer .widget_nav_menu ul li::before { position: relative; padding-right: 20px; content: "\f178"; font-family: "FontAwesome"; /* color: rgba(255, 255, 255, 0.15); */ font-size: 12px; } .appoint { margin:2rem 0 2rem 0; } .bottom-footer .fa { font-size:2.5rem; padding:.7rem; }

Related: See More


Questions / Comments: