footer - new

by Himanshu Joshi

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<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>
<div class="footer-parent">
  <div class="logo-social row">
    <div class="logo col-lg-6 pull-left">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100.6 23.1" width="100px" height="23px"><style type="text/css">  
                    .st0{fill:#FFFFFF;}
                    </style><path class="st0" d="M97.7 18c0.5 0 0.8 0.1 1.2 0.4 0.3 0.3 0.5 0.6 0.5 1.1 0 0.4-0.2 0.8-0.5 1.1 -0.3 0.3-0.7 0.4-1.2 0.4 -0.5 0-0.8-0.1-1.2-0.4 -0.3-0.3-0.5-0.6-0.5-1.1 0-0.4 0.2-0.8 0.5-1.1C96.9 18.2 97.3 18 97.7 18zM99.6 19.5c0-0.5-0.2-0.9-0.6-1.2 -0.4-0.3-0.8-0.5-1.3-0.5 -0.5 0-1 0.2-1.3 0.5 -0.4 0.3-0.6 0.7-0.6 1.2 0 0.5 0.2 0.9 0.5 1.2 0.4 0.3 0.8 0.5 1.3 0.5 0.5 0 1-0.2 1.3-0.5C99.4 20.4 99.6 20 99.6 19.5zM98.2 19.1c0 0.1-0.1 0.2-0.2 0.3 -0.1 0-0.2 0-0.3 0h-0.3v-0.7h0.3c0.2 0 0.4 0 0.4 0.1C98.2 18.9 98.2 19 98.2 19.1zM97 18.6v1.9h0.4v-0.7h0.3c0.2 0 0.3 0 0.4 0.1 0.1 0.1 0.2 0.2 0.2 0.4v0.1l0 0.1c0 0 0 0 0 0 0 0 0 0 0 0h0.4l0 0c0 0 0 0 0-0.1 0-0.1 0-0.1 0-0.1v-0.1c0-0.1 0-0.2-0.1-0.3 -0.1-0.1-0.2-0.2-0.4-0.2 0.1 0 0.2 0 0.3-0.1 0.1-0.1 0.2-0.2 0.2-0.4 0-0.2-0.1-0.4-0.3-0.5 -0.1 0-0.3-0.1-0.6-0.1H97z"/><path class="st0" d="M99.2 7.5l-0.3 3.2h-1.4c-2.2 0-3.4 1.7-3.4 3.3v7.2h-4V7.5h3.8L94 9.2c0.8-1.2 2.2-1.7 3.9-1.7H99.2z"/><path class="st0" d="M88.3 15.6H77.4c0.3 1.7 1.8 2.8 3.6 2.8 1.8 0 2.8-0.5 4.1-1.7l2.6 1.8c-1.8 2.1-4.1 2.9-6.6 2.9 -4.4 0-7.8-2.9-7.8-7.1 0-4.3 3.3-7.1 7.6-7.1 4.7 0 7.3 2.6 7.3 7.3V15.6zM84.3 12.7c-0.1-1.7-1.5-2.8-3.4-2.7 -1.9 0.1-3.2 1.2-3.5 2.7H84.3z"/><path class="st0" d="M71.6 21.1h-4v-7.2c0-1.5-0.1-3.4-2.4-3.4 -2.2 0-3.1 1.5-3.1 3.2v7.4h-4V7.5h3.7l0.1 1.7c0.8-1.2 2.3-2.1 4.4-2.1 4...

SCSS

.footer-parent{
  background-color: #002856;
  display: block;
  height: 208px;
  width: 1280px;
  .logo-social{
    padding: 48px 64px 0 64px;
    margin: 0;
    .logo{
      padding: 0;
    }
    .social{
      padding: 0;
      display:flex;
      justify-content: flex-end;
      .social__icon{
        width: 43px;
        height: 32px;
        display: block;
        &:not(:first-child){
          margin: 0 0 0 24px;
        }
        svg g path{
          fill: white;
        }
      }
    }
  }
  .link-container{
    padding: 12px 0 25px 48px;
    margin: 0;
    .link-container__left{
      display: flex;
      .link-container__link{
        font-size: 18px;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.22;
        letter-spacing: normal;
        color: #ffffff;
        display:block;
        height: 20px;
        &:not(:first-child){
          padding: 0 0 0 32px;
        }
      }
    }
  }
  .copyright{
    padding: 0 64px;
    .copyright__text{
      color: #ffff;
    }
  }
}