<div class="content">
</div>
<footer id="myFooter">
<div class="first-bar">
<div class="container">
<div class="row">
<div class="col-sm-3">
<h5>Get started</h5>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Upload Feed</a></li>
<li><a href="#">Official Partners</a></li>
<li><a href="#">Pricesearcher Business</a></li>
</ul>
</div>
<div class="col-sm-3">
<h5>About us</h5>
<ul>
<li><a href="#">Company Information</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Legals</a></li>
</ul>
</div>
<div class="col-sm-3">
<h5>Features</h5>
<ul>
<li><a href="#">Pricetracker</a></li>
<li><a href="#">Retailer Directory</a></li>
<li><a href="#">Buying Guides</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Classifieds</a></li>
</ul>
</div>
<div class="col-sm-3 info">
<h5>Information</h5>
<p> Lorem ipsum dolor amet, consectetur adipiscing elit. Etiam consectetur aliquet aliquet. Interdum et malesuada fames ac ante ipsum primis in faucibus. </p>
</div>
</div>
</div>
</div>
<div class="second-bar">
<div class="container">
<h2 class="logo expander"><a href="#"><i class="fa fa-cog"></i></a></h2>
<div class="social-icons">
<a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
<a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
<a href="#" class="youtube"><i class="fa fa-youtube"></i></a>
</div>
</div>
</div>
</footer>
.first-bar {
display:none;
}
#myFooter {
background-color: #3a3f46;
color: white;
}
#myFooter .row {
margin-bottom: 60px;
}
#myFooter .info{
text-align: justify;
color: #afb0b1;
}
#myFooter ul {
list-style-type: none;
padding-left: 0;
line-height: 1.7;
}
#myFooter h5 {
font-size: 18px;
color: white;
font-weight: bold;
margin-top: 30px;
}
#myFooter .logo{
margin-top: 10px;
}
#myFooter .second-bar .logo a{
color: #FFFFFF;
font-size: 28px;
float: left;
font-weight: bold;
line-height: 68px;
margin: 0;
padding: 0;
}
#myFooter a {
color: #d2d1d1;
text-decoration: none;
}
#myFooter a:hover,
#myFooter a:focus {
text-decoration: none;
color: white;
}
#myFooter .second-bar {
text-align: center;
background-color: #33373e;
text-align: center;
}
#myFooter .second-bar a {
font-size: 30px;
color: #9fa3a9;
padding: 10px;
transition: 0.2s;
line-height: 68px;
}
#myFooter .second-bar a:hover {
text-decoration: none;
}
#myFooter .social-icons {
float:right;
}
#myFooter .twitter:hover {
/*color: #1DA1F3;*/
color: #FFFFFF;
}
#myFooter .linkedin:hover {
/*color: #007AB5;*/
color: #FFFFFF;
}
#myFooter .youtube:hover {
/*color: #EE1C1B;*/
color: #FFFFFF;
}
@media screen and (max-width: 767px) {
#myFooter {
text-align: center;
}
#myFooter .info{
text-align: center;
}
}
/* CSS used for positioning the footers at the bottom of the page. */
html{
height: 100%;
}
body{
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
height: 100%;
}
.content{
flex: 1 0 auto;
-webkit-flex: 1 0 auto;
min-height: 75px;
}
#myFooter{
flex: 0 0 auto;
-webkit-flex: 0 0 auto;
}
$('.expander').click(function() {
$('.first-bar').slideToggle('slow');
});
