Main Content
Footer Styles
Standard Wireframing Elements
Close
HTML
<section class="aios-footer-style-1">
<footer id="footerwrapper">
<div class="container">
<div class="row">
<div class="footer">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Buyers & Sellers</a></li>
<li><a href="#">Communities</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<p>Copyright © 2016 domain.com All Rights Reserved. <a href="#">Sitemap</a>. Design by Agent Image - Realtor Websites</p>
<span class="ai-font-footer-logo"></span>
</div>
</div>
</footer>
</div>
</section>
CSS
.aios-footer-style-1{
margin: 20px 0 0;
}
.aios-footer-style-1 #footerwrapper{
width: 100%;
height: auto;
background: #d7d7d7;
padding: 56px 0;
text-align: center;
}
.aios-footer-style-1 #footerwrapper ul{
font-size: 0;
}
.aios-footer-style-1 #footerwrapper ul li{
display: inline-block;
vertical-align: top;
}
.aios-footer-style-1 #footerwrapper ul li a{
color: #7d7d7d;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
display: block;
line-height: 12px;
}
.aios-footer-style-1 #footerwrapper ul li a:before{
display: inline-block;
vertical-align: top;
content: "|";
font-size: 12px;
line-height: 12px;
padding: 0 10px;
}
.aios-footer-style-1 #footerwrapper ul li:first-child a:before{
display: none;
}
.aios-footer-style-1 #footerwrapper p{
font-size: 12px;
color: #7d7d7d;
text-transform: uppercase;
padding-top: 12px;
}
.aios-footer-style-1 #footerwrapper p a{
text-decoration: none;
color: inherit;
}
.aios-footer-style-1 #footerwrapper span{
color: #009bbb;
font-size: 25px;
display: block;
padding-top: 12px;
}
CSS Mobile
Javascript
Close
HTML
<section class="aios-footer-style-2">
<footer id="footerwrapper">
<div class="container">
<div class="row">
<div class="footer">
<div class="footer-left col-md-8">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Buyers & Sellers</a></li>
<li><a href="#">Communities</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<p>Copyright © 2016 domain.com All Rights Reserved. <a href="#">Sitemap</a>. Design by Agent Image - Realtor Websites</p>
</div>
<div class="footer-right col-md-3 col-lg-offset-1 col-md-offset-1">
<span class="ai-font-footer-logo"></span>
</div>
</div>
</div>
</footer>
</div>
</section>
CSS
.aios-footer-style-2{
margin: 20px 0 0;
}
.aios-footer-style-2 #footerwrapper{
width: 100%;
height: auto;
background: #d7d7d7;
padding: 56px 0;
}
.aios-footer-style-2 #footerwrapper ul{
font-size: 0;
}
.aios-footer-style-2 #footerwrapper ul li{
display: inline-block;
vertical-align: top;
}
.aios-footer-style-2 #footerwrapper ul li a{
color: #7d7d7d;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
display: block;
line-height: 12px;
}
.aios-footer-style-2 #footerwrapper ul li a:before{
display: inline-block;
vertical-align: top;
content: "|";
font-size: 12px;
line-height: 12px;
padding: 0 10px;
}
.aios-footer-style-2 #footerwrapper ul li:first-child a:before{
display: none;
}
.aios-footer-style-2 #footerwrapper p{
font-size: 12px;
color: #7d7d7d;
text-transform: uppercase;
padding-top: 12px;
}
.aios-footer-style-2 #footerwrapper p a{
text-decoration: none;
color: inherit;
}
.aios-footer-style-2 .footer-right{
text-align: right;
}
.aios-footer-style-2 #footerwrapper span{
color: #009bbb;
font-size: 25px;
display: block;
padding-top: 12px;
}
CSS Mobile
@media only screen and (max-width: 992px) {
.aios-footer-style-2 .footer-right,
.aios-footer-style-2 .footer-left{
text-align: center;
}
}
Javascript
Close
HTML
<section class="footer-style-3">
<footer id="footerwrapper">
<div class="container">
<div class="row">
<div class="footer">
<div class="footer-logo-holder">
sample logo here
</div>
<div class="footer-contact">
<div class="col-md-4 col-lg-4 fp-phone">
<span class="ai-font-phone"></span>
<p>306.265.9921</p>
</div>
<div class="col-md-4 col-lg-4 fp-email">
<span class="ai-envelope-f"></span>
<a href="mailto:[email protected]">[email protected]</a>
</div>
<div class="col-md-4 col-lg-4 fp-address">
<span class="ai-font-location-b"></span>
<p>1700 E. Walnut Ave., Suite 400</p>
</div>
<div class="clear"></div>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Buyers & Sellers</a></li>
<li><a href="#">Communities</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<p>Copyright © 2016 domain.com All Rights Reserved. <a href="#">Sitemap</a>. Design by Agent Image - Realtor Websites</p>
<span class="ai-font-footer-logo"></span>
</div>
</div>
</footer>
</div>
</section>
CSS
.footer-style-3{
margin: 20px 0 0;
}
.footer-style-3 #footerwrapper{
width: 100%;
height: auto;
background: #d7d7d7;
padding: 56px 0;
text-align: center;
}
.footer-style-3 .footer-contact {
padding: 50px 0;
}
.footer-style-3 #footerwrapper .fp-phone{
}
.footer-style-3 #footerwrapper .fp-phone span{
font-size: 20px;
display: block;
}
.footer-style-3 #footerwrapper .fp-phone p{
color: #898989;
font-size: 14px;
font-weight: 400;
}
.footer-style-3 #footerwrapper .fp-email{
}
.footer-style-3 #footerwrapper .fp-email span{
font-size: 20px;
display: block;
padding-bottom: 15px;
}
.footer-style-3 #footerwrapper .fp-email a{
font-size: 14px;
font-weight: 400;
color: #898989;
text-decoration: none;
}
.footer-style-3 #footerwrapper .fp-address{
}
.footer-style-3 #footerwrapper .fp-address span{
font-size: 30px;
display: block;
}
.footer-style-3 #footerwrapper .fp-address a{
font-size: 14px;
font-weight: 400;
color: #898989;
text-decoration: none;
}
.footer-style-3 #footerwrapper .footer-logo-holder{
display: block;
text-align: center;
color: #b7b7b7;
font-weight: 700;
font-size: 30px;
text-transform: uppercase;
padding: 20px 0px 0;
}
.footer-style-3 #footerwrapper ul{
font-size: 0;
}
.footer-style-3 #footerwrapper ul li{
display: inline-block;
vertical-align: top;
}
.footer-style-3 #footerwrapper ul li a{
color: #7d7d7d;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
display: block;
line-height: 12px;
}
.footer-style-3 #footerwrapper ul li a:before{
display: inline-block;
vertical-align: top;
content: "|";
font-size: 12px;
line-height: 12px;
padding: 0 10px;
}
.footer-style-3 #footerwrapper ul li:first-child a:before{
display: none;
}
.footer-style-3 #footerwrapper p{
font-size: 12px;
color: #7d7d7d;
text-transform: uppercase;
padding-top: 12px;
}
.footer-style-3 #footerwrapper p a{
text-decoration: none;
color: inherit;
}
.footer-style-3 #footerwrapper span{
color: #009bbb;
font-size: 25px;
display: block;
padding-top: 12px;
}
CSS Mobile
@media only screen and (max-width: 992px) {
.footer-style-3 #footerwrapper .fp-address span{
padding-bottom: 0;
}
}
Javascript
Close
HTML
<section class="footer-style-4">
<footer id="footerwrapper">
<div class="sub-footer">
<div class="container">
<div class="row">
<div class="contact-info col-md-4 col-lg-4">
<h2>Agent Image</h2>
<p><span class="ai-font-location-b"></span>1700 East Walnut Avenue, Suite 450E1 Segundo, CA</p>
<p><span class="ai-font-phone"></span>123.456.7890</p>
<a href="mailto:[email protected]"><span class="ai-envelope-f"></span>[email protected]</a>
</div>
<div class="fp-tit-menu col-md-2 col-lg-2">
<h3>About</h3>
<ul>
<li><a href="#">Sample 1</a></li>
<li><a href="#">Sample 2</a></li>
<li><a href="#">Sample 3</a></li>
</ul>
</div>
<div class="fp-tit-menu col-md-2 col-lg-2">
<h3>Listings</h3>
<ul>
<li><a href="#">Sample 1</a></li>
<li><a href="#">Sample 2</a></li>
<li><a href="#">Sample 3</a></li>
</ul>
</div>
<div class="fp-tit-menu col-md-2 col-lg-2">
<h3>Blog</h3>
<ul>
<li><a href="#">Sample 1</a></li>
<li><a href="#">Sample 2</a></li>
<li><a href="#">Sample 3</a></li>
</ul>
</div>
<div class="fp-tit-menu col-md-2 col-lg-2">
<h3>Services</h3>
<ul>
<li><a href="#">Sample 1</a></li>
<li><a href="#">Sample 2</a></li>
<li><a href="#">Sample 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="footer-left col-md-8 col-lg-8">
<p>Copyright © 2016 domain.com All Rights Reserved. <a href="#">Sitemap</a>. Design by Agent Image - Realtor Websites</p>
</div>
<div class="footer-right col-lg-3 col-md-3 col-lg-offset-1 col-md-offset-1">
<span class="ai-font-footer-logo"></span>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</footer>
</section>
CSS
.footer-style-4{
margin: 20px 0 0;
}
.footer-style-4 #footerwrapper{
width: 100%;
height: auto;
background: #d7d7d7;
padding: 98px 0 0;
}
.footer-style-4 .sub-footer{
padding-bottom: 60px;
}
.footer-style-4 .sub-footer .contact-info{
}
.footer-style-4 .sub-footer .contact-info h2{
font-weight: 400;
font-size: 50px;
color: #898989;
padding-bottom: 23px;
}
.footer-style-4 .sub-footer .contact-info p{
color: #999999;
font-weight: 400;
font-size: 13px;
padding: 8px 0;
}
.footer-style-4 .sub-footer .contact-info p span{
display: inline-block;
vertical-align: top;
font-size: 17px;
padding-right: 15px;
}
.footer-style-4 .sub-footer .contact-info a{
color: #999999;
font-weight: 400;
font-size: 13px;
padding: 8px 0;
display: block;
}
.footer-style-4 .sub-footer .contact-info a span{
display: inline-block;
vertical-align: top;
font-size: 13px;
padding-right: 15px;
}
.footer-style-4 .sub-footer .fp-tit-menu{
text-align: center;
}
.footer-style-4 .sub-footer .fp-tit-menu h3{
font-size: 27px;
color: #898989;
display: block;
position: relative;
padding-top: 3px;
margin-bottom: 20px;
}
.footer-style-4 .sub-footer .fp-tit-menu h3:after{
display: block;
content: "";
width: 50%;
margin: 15px auto;
height: 1px;
background: #b4b4b4;
}
.footer-style-4 .sub-footer .fp-tit-menu ul{
}
.footer-style-4 .sub-footer .fp-tit-menu ul li{
display: block;
padding: 15px 0;
}
.footer-style-4 .sub-footer .fp-tit-menu ul li a{
color: #999999;
font-size: 13px;
text-decoration: none;
display: block;
}
.footer-style-4 .footer{
display: block;
width: 100%;
height: auto;
border-top: 1px solid #b4b4b4;
padding: 25px 0;
}
.footer-style-4 .footer p{
font-size: 12px;
color: #999999;
padding: 10px 0;
}
.footer-style-4 .footer p a{
color: inherit;
text-decoration: none;
}
.footer-style-4 .footer .footer-right{
text-align: right;
}
.footer-style-4 .footer .footer-right span{
color: #898989;
font-size: 20px;
}
CSS Mobile
@media only screen and (max-width: 992px) {
.footer-style-4 .sub-footer .contact-info,
.footer-style-4 .sub-footer .fp-tit-menu{
text-align: center;
padding-bottom: 15px;
}
.footer-style-4 .footer .footer-right,
.footer-style-4 .footer .footer-left{
text-align: center;
}
}
Javascript
Close
HTML
<section class="footer-style-5">
<footer id="footerwrapper">
<div class="bg-left"></div>
<div class="bg-right"></div>
<div class="wrap footer">
<div class="container">
<div class="row">
<div class="co-lg-4 col-md-4 fp-copyright">
<h2>Agent Image</h2>
<p class="fp-add">1700 East Walnut Avenue,
Suite 400, El Segundo,<br>
CA 90245<br><br>
Tel 123.456.7890
</p>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Buyers</a></li>
<li><a href="#">Sellers</a></li>
<li><a href="#">Listings</a></li>
<li><a href="#">MLS</a></li>
<li><a href="#">Contact</a></li>
</ul>
<p class="copyright">Copyright © 2016 AGENTIMAGE. All Rights Reserved. <a href="#">Sitemap</a>.
Design by Agent Image - Realtor Websites</p>
</div>
<div class="col-md-2 col-lg-2 fp-form">
<h2>News Letter</h2>
<form action="#" method="post">
<input type="text" placeholder="Name">
<input type="email" placeholder="Email Address">
<input type="text" placeholder="Phone">
<input type="submit" value="Send">
</form>
</div>
<div class="col-lg-2 col-md-2 fp-social">
<h2>Social</h2>
<div class="smi">
<a href="#" target="_blank" class="fb">
<span class="ai-font-facebook"></span>
</a>
<a href="#" target="_blank" class="tw">
<span class="ai-font-twitter"></span>
</a>
<a href="#" target="_blank" class="yt">
<span class="ai-font-youtube"></span>
</a>
<a href="#" target="_blank" class="ln">
<span class="ai-font-linkedin"></span>
</a>
<div class="footer-logos">
<span class="ai-font-footer-logo"></span>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4 fp-blog">
<img src="images/fp-blog.jpg" alt="">
<h3>New Bridge at the block of Arizona</h3>
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved.</p>
<a href="#">read more</a>
</div>
</div>
</div>
</div><!-- end of footer -->
</footer>
</section>
CSS
.footer-style-5{
margin: 20px 0 0;
}
.footer-style-5 #footerwrapper{
position: relative;
}
.footer-style-5 #footerwrapper .bg-left{
position: absolute;
left: 0;
top: 0;
background: #009bbb;
}
.footer-style-5 #footerwrapper .bg-right{
position: absolute;
right: 0;
top: 0;
background: #0486a1;
}
.footer-style-5 #footerwrapper .wrap{
background: url(http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/footerbg.jpg) repeat-y center top transparent;
padding: 45px 0;
}
.footer-style-5 #footerwrapper .wrap .fp-copyright{
}
.footer-style-5 #footerwrapper .wrap .fp-copyright a{
color: inherit;
text-decoration: inherit;
}
.footer-style-5 #footerwrapper .wrap .fp-copyright h2{
color: #fff;
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
border-bottom: 1px solid #98e3e6;
padding: 16px 0;
}
.footer-style-5 #footerwrapper .wrap .fp-copyright p.fp-add{
font-weight: 300;
font-size: 12px;
line-height: 25px;
color: #fff;
display: inline-block;
vertical-align: top;
width: 41%;
padding-top: 15px;
}
.footer-style-5 #footerwrapper .wrap .fp-copyright ul{
display: inline-block;
vertical-align: top;
width: 44%;
margin-left: 13%;
padding-top: 14px;
}
.footer-style-5 #footerwrapper .wrap .fp-copyright ul li{
display: inline-block;
vertical-align: top;
width: 48%;
padding: 5px 0;
}
.footer-style-5 #footerwrapper .wrap .fp-copyright ul li a{
font-weight: 300;
font-size: 12px;
color: #fff;
text-decoration: none;
}
.footer-style-5 #footerwrapper .wrap .fp-copyright p.copyright{
font-weight: 400;
font-size: 12px;
color: #fff;
line-height: 18px;
padding-top: 25px;
}
.footer-style-5 #footerwrapper .wrap .fp-form{
}
.footer-style-5 #footerwrapper .wrap .fp-form h2{
color: #fff;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
border-bottom: 1px solid #98e3e6;
padding: 18px 0;
}
.footer-style-5 #footerwrapper .wrap .fp-form form{
display: block;
margin-top: 13px;
}
.footer-style-5 #footerwrapper .wrap .fp-form input{
width: 100%;
height: 30px;
background: #98e3e6;
border: none;
outline: none;
color: #208f9f;
font-size: 11px;
padding: 5px 10px;
margin-top: 6px;
}
.footer-style-5 #footerwrapper .wrap .fp-form input[type="submit"]{
color: #fff;
background: #0486a1;
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
margin-top: 10px;
}
.footer-style-5 #footerwrapper .wrap .fp-social{
padding-right: 60px;
}
.footer-style-5 #footerwrapper .wrap .fp-social h2{
color: #fff;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
border-bottom: 1px solid #98e3e6;
padding: 18px 0;
}
.footer-style-5 #footerwrapper .wrap .fp-social .smi{
display: block;
text-align: center;
width: 100%;
}
.footer-style-5 #footerwrapper .wrap .fp-social .smi a{
display: inline-block;
width: 34px;
height: 35px;
-webkit-border-radius: 17px/17px 17px 18px 18px;
-moz-border-radius: 17px/17px 17px 18px 18px;
border-radius: 17px/17px 17px 18px 18px;
background-color: #0486a1;
color: #fff;
vertical-align: top;
margin-right: 5px;
margin-top: 12px;
text-align: center;
line-height: 39px;
font-size: 19px;
}
.footer-style-5 #footerwrapper .wrap .fp-social .footer-logos {
font-size: 20px;
color: #fff;
text-align: center;
width: 100%;
padding-top: 80px;
}
.footer-style-5 #footerwrapper .wrap .fp-blog{
}
.footer-style-5 #footerwrapper .wrap .fp-blog img{
display: block;
width: 100%;
height: auto;
}
.footer-style-5 #footerwrapper .wrap .fp-blog h3{
text-transform: uppercase;
color: #fff;
font-size: 16px;
padding: 21px 0;
border-bottom: 1px solid #3ab2c3;
}
.footer-style-5 #footerwrapper .wrap .fp-blog p{
color: #fff;
font-weight: 400;
font-size: 12px;
line-height: 20px;
padding-top: 21px;
}
.footer-style-5 #footerwrapper .wrap .fp-blog a{
display: block;
width: 109px;
height: 37px;
background-color: rgba(92,92,92,0);
border: solid 1px #3ab2c3;
color: #fff;
line-height: 37px;
text-decoration: none;
font-size: 10px;
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
margin: 24px 0 0;
}
CSS Mobile
@media only screen and (max-width: 1199px) {
.footer-style-5 #footerwrapper .wrap{
background-size: 100%;
text-align: center;
}
.footer-style-5 #footerwrapper .wrap .fp-social{
padding-right: 0;
}
}
@media only screen and (max-width: 992px) {
.footer-style-5 #footerwrapper .wrap{
background: #009bbb
}
.footer-style-5 #footerwrapper .wrap .fp-blog{
padding-top: 50px;
}
}
Javascript
jQuery(document).ready(function(){
adjustBackground();
jQuery(window).resize(adjustBackground);
function adjustBackground() {
//Adjust widths
var winWidth = jQuery(window).width();
var minWidth = 1600; //Change this to your site's min width
var left = ( winWidth - minWidth ) / 2 + 2;
var right = ( winWidth - minWidth ) / 2 + 2;
if ( winWidth > minWidth ) {
jQuery(".bg-left").width(left);
jQuery(".bg-right").width(right);
}
else {
jQuery(".bg-left, .bg-right").width(0);
}
//Adjust heights
jQuery(".wrap").each( function(i,v) {
var height = jQuery(v).height();
jQuery(v).parent().find(".bg-left,.bg-right").height( height );
});
}
})
Close
HTML
<footer id="footer-style-6">
<div class="container">
<div class="row">
<div class="col-md-7 footer-text">
<p>Copyright © 2018 domain.com All Rights Reserved. Sitemap. Design by Agent Image - Realtor Websites</p>
</div>
<div class="col-md-2 pull-right footer-logo">
<span class="ai-font-footer-logo"></span>
</div>
</div>
</div>
</footer>
CSS
#footer-style-6{
width: 100%;
background: #d7d7d7;
padding: 30px 0;
}
#footer-style-6 p{
color: #7d7d7d;
font-size: 12px;
padding: 12px 0;
}
#footer-style-6 span{
color: #009bbb;
font-size: 30px;
display: block;
text-align: center;
}
CSS Mobile
Javascript
Close
HTML
<footer id="footer-style-7">
<div class="container">
<p>Copyright © 2018 domain.com All Rights Reserved. Sitemap. Design by Agent Image - Realtor Websites</p>
</div>
</footer>
CSS
#footer-style-7{
width: 100%;
background: #d7d7d7;
padding: 30px 0;
}
#footer-style-7 p{
color: #7d7d7d;
font-size: 12px;
padding: 12px 0;
text-align: center;
}
CSS Mobile
Javascript