I tried a lot of things, but can't seem to get two footers. Admittedly, I am starting and probably making some basic logical mistakes. Please hold my hand and help me before I lose it. I have followed many standard solutions, but I have to do something that conflicts or my targeting is wrong. Thanks for any help. Jacob
It is contained in the Bootstrap 3 structure in a fluid container. Ultimately, I want the two footers to focus on responsive design.
Here you can see the site. Jacob Norwood Heroku App
CSS / LESS footer code
footer {
margin: 25px 0 25px 0;
}
.footer-social {
display:block;
}
.footer-social li {
float:left;
}
.footer-social a {
font-family: @lato-font;
font-weight: @footer-font-weight;
font-size: @footer-font-size;
line-height: 1.5em;
margin-right: .5em;
padding: 7px 10px 7px 10px;
}
.footer-social a:hover {
color: @main-link-hover;
background-color: @nav-font-background;
}
.footer-info {
display:block;
font-family: @lato-font;
font-weight: @footer-font-weight;
font-size: @footer-info-font-size;
}
.footer-info a {
display:block;
float:left;
margin-right: 10px;
padding: 5px;
color:#5F5F5F;
}
.footer-info a:hover {
color: @main-link-hover;
background-color: @nav-font-background;
}
HTML footer
<div class="row">
<div class="col-lg-12">
<footer>
<section class="footer-social clearfix">
<ul>
<li><a href="https://www.facebook.com/jacobnorwooddesign">Facebook</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="https://twitter.com/jacobonline">Twitter</a></li>
<li><a href="http://www.linkedin.com/in/jacobnorwood">LinkedIn</a></li>
</ul>
</section>
<section class="footer-info">
<ul>
<li><a href="#" title="Jacob Norwood Design Copyright">Copyright Jacob Norwood Design 2014</a></li>
<li><a href="#" title="Phone Number 512.450.4671">Ph. 512.450.4671</a></li>
<li><a href="mailto:work@jacobnorwood.com" title="Email work@jacobnorwood.com">work@jacobnorwood.com</a></li>
</ul>
</section>
</footer>
</div>
</div>