SIA-footer

Singapore airline footer

by Jay Angelo Valmocina

HTML

<footer class="footer">
  <div class="footer-inner">
    <div class="footer-top">
    
       <div class="footer-block">
          <div class="footer-block-inner">
            <a href="#">
               <h3 class="footer-block-heading">
                  Corporate Info
              </h3>
            </a>
            <ul>
               <li><a href="#" >Corporate governance policies</a></li>
               <li><a href="#">Information for investors</a></li>
               <li><a href="#">Invitation to tender</a></li>
            </ul>
          </div>
       </div>
       
       <div class="footer-block">
          <div class="footer-block-inner">
             <a href="">
               <h3 class="footer-block-heading">
                 Media
               </h3>
             </a>
             <ul>
               <li>
                 <a href="/en_UK/ph/media-centre/press-release/" target="_self">News releases</a>
               </li>
               <li>
                 <a href="/en_UK/ph/media-centre/multimedia-library/" target="_self">Multimedia library</a>
               </li>
             </ul>
          </div>   
        </div>
        
        <div class="footer-block">
            <div class="footer-block-inner">
              <a href="#">
                <h3 class="footer-block-heading">
                  Careers
                </h3>
              </a>
              <ul>
                <li><a href="#">Why join SIA?</a></li>
                <li><a href="#">Cabin Crew</a></li>
                <li><a href="#">Pilots</a></li>
                <li><a href="#">SIA Executives Programme</a></li>
                <li><a href="#">Ground Professionals</a></li>
                <li><a href="#">Scholarship & Internships</a></li>
              </ul>
            </div>
        </div>
        
        <div class="footer-block">
          <div class="footer-block-inner">
             <a href="#">
               <h3 class="footer-block-heading">Support</h3>
            ...

CSS

body {
  font-family: "proxima-nova","Open Sans","Arial","Helvetica",sans-serif;

}

div {
   display: block;
}

ul {
  margin: 0;
  padding:0;
}

footer {
    font-size: 14px;
}

.footer-top {
    overflow: hidden;
}

.footer-block {
  float: left;
  width: 25%;
}



.footer-block-heading {
    font-size: 13px;
    margin-bottom: 7px;
    line-height: 16px;
    padding-bottom: 15px;
    font-size: 14px;
    border-bottom: 1px solid #e2e2e2;
    color: #666;
    font-weight: 600;
    font-family: "proxima-nova","Open Sans","Arial","Helvetica",sans-serif;
    text-shadow: 0 0 black;
}

h3 {
  color: #444;
}

a {
  text-decoration: none;
  color: #444;
}

li {
   list-style-type: none;

}

.footer .social > ul li:firstchild {
  margin-left:0;
  padding-left:0;
}

.social {
  zoom: 1;
}

.social .text-share {
    display: block;
    margin-top: 1px;
    font-size: 12px;
    font-weight: 700;
    color: #666;
    font-family: "proxima-nova","Open Sans","Arial","Helvetica",sans-serif;
    text-transform: uppercase;
}