Difference between revisions of "Template:ICT-Mumbai/basic"

Line 274: Line 274:
  
  
 +
.footer-distributed{
 +
background-color: #292c2f;
 +
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
 +
box-sizing: border-box;
 +
width: 100%;
 +
text-align: left;
 +
font: normal 16px sans-serif;
  
−
.social-footer {
+
padding: 45px 50px;
−
  padding: 1rem;
+
margin-top: 80px;
−
  background: #8a8a8a;
+
−
  display: -webkit-flex;
+
−
  display: -ms-flexbox;
+
−
  display: flex;
+
−
  -webkit-align-items: center;
+
−
      -ms-flex-align: center;
+
−
          align-items: center;
+
−
  -webkit-justify-content: space-between;
+
−
      -ms-flex-pack: justify;
+
−
          justify-content: space-between;
+
 
}
 
}
  
−
.social-footer .social-footer-icons li:last-of-type {
+
.footer-distributed .footer-left p{
−
  margin-right: 0;
+
color: #8f9296;
 +
font-size: 14px;
 +
margin: 0;
 
}
 
}
  
−
.social-footer .social-footer-icons .fa {
+
/* Footer links */
−
  font-size: 1.3rem;
+
 
−
  color: #fefefe;
+
.footer-distributed p.footer-links{
 +
font-size:18px;
 +
font-weight: bold;
 +
color: #ffffff;
 +
margin: 0 0 10px;
 +
padding: 0;
 
}
 
}
  
−
.social-footer .social-footer-icons .fa:hover {
+
.footer-distributed p.footer-links a{
−
  color: #4a4a4a;
+
display:inline-block;
−
  transition: color 0.3s ease-in;
+
line-height: 1.8;
 +
text-decoration: none;
 +
color:  inherit;
 +
}
 +
 
 +
.footer-distributed .footer-right{
 +
float: right;
 +
margin-top: 6px;
 +
max-width: 180px;
 +
}
 +
 
 +
.footer-distributed .footer-right a{
 +
display: inline-block;
 +
width: 35px;
 +
height: 35px;
 +
background-color: #33383b;
 +
border-radius: 2px;
 +
 
 +
font-size: 20px;
 +
color: #ffffff;
 +
text-align: center;
 +
line-height: 35px;
 +
 
 +
margin-left: 3px;
 +
}
 +
 
 +
/* If you don't want the footer to be responsive, remove these media queries */
 +
 
 +
@media (max-width: 600px) {
 +
 
 +
.footer-distributed .footer-left,
 +
.footer-distributed .footer-right{
 +
text-align: center;
 +
}
 +
 
 +
.footer-distributed .footer-right{
 +
float: none;
 +
margin: 0 auto 20px;
 +
}
 +
 
 +
.footer-distributed .footer-left p.footer-links{
 +
line-height: 1.8;
 +
}
 
}
 
}
  
Line 824: Line 870:
 
<br>
 
<br>
  
−
<footer class="social-footer">
+
<footer class="footer-distributed">
−
  <div class="social-footer-left">
+
 
−
    <a href="#"><img class="logo" src="https://placehold.it/150x30"></a>
+
<div class="footer-right">
−
  </div>
+
 
−
  <div class="social-footer-icons">
+
<a href="#"><i class="fa fa-facebook"></i></a>
−
    <ul class="menu simple">
+
<a href="#"><i class="fa fa-twitter"></i></a>
−
      <li><a href="https://www.facebook.com/"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
+
<a href="#"><i class="fa fa-linkedin"></i></a>
−
      <li><a href="https://www.instagram.com/?hl=en"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
+
<a href="#"><i class="fa fa-github"></i></a>
−
      <li><a href="https://www.pinterest.com/"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li>
+
 
−
      <li><a href="https://twitter.com/?lang=en"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
+
</div>
−
    </ul>
+
 
−
  </div>
+
<div class="footer-left">
−
</footer>
+
 
 +
<p class="footer-links">
 +
<a href="#">Home</a>
 +
·
 +
<a href="#">Blog</a>
 +
·
 +
<a href="#">Pricing</a>
 +
·
 +
<a href="#">About</a>
 +
·
 +
<a href="#">Faq</a>
 +
·
 +
<a href="#">Contact</a>
 +
</p>
 +
 
 +
<p>Company Name &copy; 2015</p>
 +
</div>
 +
 
 +
</footer>
 +
 
  
  

Revision as of 06:45, 9 October 2018

Simply