Footers
F5
Demo
Code Only (Without ACF Integration)
HTML
<!-- F5 Footer ------------------------------------------------------------->
<footer id="colophon" class="wa_f5">
<div class="container">
<div class="row">
<div class="col-12 col-lg-4 mt-4">
<img src="<?php echo $tmp_dir; ?>logo_footer.png">
</div>
<div class="col-12 col-lg mt-4">
<div style="margin-top: 13px;">6A Solutions is a professional firm specializing in building and managing elite teams within Technology and Finance & Accounting with top employers nationwide. Merging your vision and our expertise, we help you achieve powerful results.</div>
</div>
</div>
<div class="row">
<div class="col-12"><hr class="wa_h5_hr"></div>
<div class="col-12 col-sm-6 col-lg-3 mt-2">
<h3>Legal</h3>
<a href="#">Privacy Policy</a><br>
<a href="#">Cookie Policy</a><br>
<a href="#">Terms of service</a><br>
<a href="#">Terms of use</a>
</div>
<div class="col-12 col-sm-6 col-lg-3 mt-2">
<h3>Find Work</h3>
<a href="#">Submit Resume</a><br>
<a href="#">6A Solutions Advantage</a><br>
<a href="#">Testimonials</a>
</div>
<div class="col-12 col-sm-6 col-lg-3 mt-2">
<h3>Find Talent</h3>
<a href="#">Request Consultation</a><br>
<a href="#">About 6A Solutions</a><br>
<a href="#">Services</a>
</div>
<div class="col-12 col-sm-6 col-lg-3 mt-2">
<h3>Follow</h3>
<span class="wa_f5_soc"><a href="#"><i class="fab fa-facebook-square"></i></a></span>
<span class="wa_f5_soc"><a href="#"><i class="fab fa-twitter-square"></i></a></span>
<span class="wa_f5_soc"><a href="#"><i class="fab fa-linkedin"></i></a></span>
</div>
<div class="col-12"><hr class="wa_h5_hr"></div>
<div class="col-12">
<div class="wa_f5_sbft">All Rights Reserved © <?php echo date('Y'); echo ' ' . get_bloginfo( 'name' ); ?></div>
</div>
</div>
</div>
</footer><!-- #colophon -->
<!-- F5 END ------------------------------------------------------------->CSS
/* F5 Footer 1 -------------------------------*/
.wa_f5{
background-color: #cf9810;
color: #FFF;
padding-bottom: 10px;
border-top: solid 6px #000000;
}
.wa_f5 a:link, .wa_f5 a:visited, .wa_f5 a:active{
color: #FFF;
}
.wa_f5 a:hover{
color: #fff;
}
.wa_f5_sbft{
font-size: 0.7em;
text-align: center;
}
.wa_f5 .wa_h5_hr{
border-color: #FFF;
}
.wa_f5 .wa_f5_soc{
font-size: 30px;
}
.wa_f5 .wa_f5_soc a:hover{
color: #000;
transition: 0.5s;
}
/* F5 END ---------------------------------------*/Logo 202px X 122px – Flexible, can change.
Footer 1 (F1)
Code Only (Without ACF Integration)
HTML
<!-- F1 Footer 1 -------------------------------------------------------------> <footer id="colophon" class="wa_f1"> <div class="container"> <div class="row"> <div class="col-12 col-lg mt-4"> <img src="<?php echo $tmp_dir; ?>logo_footer.png"> </div> <div class="col-12 col-lg-auto mt-4"> <p><b>Contact Us</b></p> Mon-Friday<br> 8am - 9pm<br> 585-490-0672 </div> <div class="col-12 mt-4"> <div class="wa_f1_sbft">© 2020 - All Rights Reserved, TownHome Rental Development</div> </div> </div> </div> </footer><!-- #colophon --> <!-- F1 END ------------------------------------------------------------->
CSS
/* F1 Footer 1 ---------------------------------------*/
.wa_f1{
background-color: #5f6268;
color: #FFF;
margin-top: 40px;
padding-bottom: 10px;
}
.wa_f1_sbft{
font-size: 0.7em;
}
/* F1 END ---------------------------------------*/Need to create Visio Stencil
F2 Footer
Code Only (Without ACF Integration)
HTML
<!-- F2 Footer -------------------------------------------------------------> <footer id="colophon" class="wa_f2"> <div class="container"> <div class="row"> <div class="col-12 col-md-6 col-lg-auto mt-4"> <img src="<?php echo $tmp_dir; ?>h_logo_btm.png"> <div class="d-none d-md-block wa_f2_sbft">© 2020 - All Rights Reserved, TownHome Rental Development</div> </div> <div class="col-12 col-md-6 col-lg mt-4"> <div class="wa_f2_c"> <div class="d-lg-none wa_f2_r"><a href="tel:7174015450">647-896-5540</a></div> <p>RESIDENTIAL SECURITY SYSTEMS<br> COMMERCIAL SECURITY SYSTEMS<br> SECURITY PRODUCTS</p> </div> </div> <div class="col-12 col-lg-auto mt-4 d-none d-lg-block "> <div class="wa_f2_r"> <a href="tel:7174015450">647-896-5540</a> </div> </div> <div class="col-12 d-md-none"> <div class="wa_f2_sbft" align="center">© 2020 - All Rights Reserved, TownHome Rental Development</div> </div> </div> </div> </footer> <!-- F2 END ------------------------------------------------------------->
CSS
/* F2 Footer 2 ---------------------------------------*/
.wa_f2{
background-color: #0066b3;
color: #FFF;
margin-top: 40px;
padding-bottom: 10px;
text-align: center;
}
.wa_f2 p{
color: #fff;
font-size: 1em;
font-weight: 300;
line-height: 30px;
}
.wa_f2_sbft{
font-size: 0.7em;
margin-top: 10px;
}
.wa_f2_c{
}
.wa_f2_r{
font-weight: bold;
font-size: 1.3em;
}
.wa_f2_r a:link, .wa_f2_r a:visited, .wa_f2_r a:active, .wa_f2_r a:hover{
color: #FFF;
}
@media (min-width: 768px) {
.wa_f2_c{
margin-left: auto;
width: fit-content;
margin-right: auto;
}
.wa_f2{
text-align: left;
}
}
/* F2 END ---------------------------------------*/
