footer

by Himanshu Joshi

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://postimg.org/image/45qn2s8zf/"></script>
<div class="parent">
  <div class="company-logo">
    <img src="https://s33.postimg.org/h9w7fh11b/Gartner.png" alt="">
  </div>
  <nav class="link-container">
    <div class="link"><a href="">CONTACT US</a></div>
    <div class="link"><a href="">POLICIES</a></div>
    <div class="link"><a href="">PRIVACY</a></div>
    <div class="link"><a href="">TERMS OF USE</a></div>
  </nav>
  <div class="social-icon-container">
    <a class="icon" href="#">
      <span class="fa-stack btn-white">
          <i class="fa fa-stack-1x"></i>
          <i class="fa fa-twitter fa-stack-1x"></i>
        </span>
    </a>
    <a class="icon" href="#">
      <span class="fa-stack btn-white">
          <i class="fa fa-stack-1x"></i>
          <i class="fa fa-facebook fa-stack-1x"></i>
        </span>
    </a>
    <a class="icon" href="#">
      <span class="fa-stack btn-white-linkedin">
          <i class="fa fa-stack-1x"></i>
          <i class="fa fa-linkedin fa-stack-1x"></i>
        </span>
    </a>
    <a class="icon" href="#">
      <span class="fa-stack btn-white">
          <i class="fa fa-stack-1x"></i>
          <i class="fa fa-youtube-play fa-stack-1x"></i>
        </span>
    </a>
  </div>
  <div class="rights-container">
    <div class="rights">
      ©
      <script type="text/javascript">
        document.write(new Date().getFullYear());

      </script> Gartner, Inc. and/or its Affiliates. All Rights Reserved.
    </div>
  </div>
</div>

SCSS

@import url(https://fonts.googleapis.com/css?family=Roboto:100&subset=latin-ext);
.parent {
  width: 100%;
  height: 80px;
  background-color: #343434;
  display: flex;
  color: #ffffff;
  justify-content: center;
  font-family: 'Roboto', sans-serif;
  .company-logo {
    flex: 1;
    margin: 10px 0;
    display: flex;
    align-items: center;
    border-right: 1px solid #ffffff;
    img {
      margin: 0 auto;
    }
  }
  .link-container {
    flex: 2;
    margin: 10px 0;
    display: flex;
    align-items: center;
    border-right: 1px solid #ffffff;
    .link {
      margin: 0 auto;
      font-family: 'Roboto', sans-serif;
      font-size: 14px;
      font-weight: 500;
      line-height: 1.29;
      text-align: center;
      color: #ffffff;
      padding: 0 10px 0 0;
      border-right: 1px solid #ffffff;
      &:last-child {
        border-right: none;
      }
      a {
        color: #ffffff;
      }
    }
  }
  .social-icon-container {
    flex: 1;
    height: 75%;
    align-self: center;
    display: flex;
    align-items: center;
    border-right: 1px solid #ffffff;
    .icon {
      flex: 1;
      margin: 0 auto;
      text-align: center;
    }
    .btn-white-linkedin{
      background-color: #ffffff;
      color: #000000;
    }
    .btn-white{
      color: #ffffff;
    }
  }
  .rights-container {
    flex: 2;
    margin: 10px 0;
    display: flex;
    align-items: center;
    .rights {
      margin: 0 auto;
      font-family: 'Roboto', sans-serif;
      font-size: 12px;
      font-weight: 500;
      line-height: 1.5;
      text-align: center;
      color: #ffffff
    }
  }
}