footer section

by kontrach

HTML

<footer>
  <div class="footer flex justify-around">
    <div class="links-part flex-column justify-between">
      <div class="top-part">
        <div class="links">
          <ul class="flex">
            <li><a href="/about">About</a></li>
            <li><a href="/help">Help</a></li>
            <li><a href="/app">App</a></li>
            <li><a href="/faq">Faq</a></li>
            <li><a href="/care-givers">Care givers</a></li>
          </ul>
        </div>
        <div class="contacts-wrapper flex">
          <div class="logo-gray">
            <img src="img/logo-footer-small.png" alt="Buffalo homecare" title="Buffalo homecare">
          </div>
          <div class="contacts">
            <p class="phone">+1 (985) 847-2225</p>
            <p class="email">
              <a href="mailto:[email protected]">
                [email protected]
              </a>
            </p>
          </div>
        </div>
      </div>
      <div class="follow-wrapper">
        <h2>FOLLOW US ON:</h2>
        <div class="social-icons">
          <ul class="flex">
            <li class="facebook"><a href=""></a></li>
            <li class="twitter"><a href=""></a></li>
            <li class="linked-in"><a href=""></a></li>
            <li class="google-plus"><a href=""></a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="form-part">
      <h2>GET IN THE CARE FAMILY</h2>
      <div class="form-wrapper">
        <div class="for-who-row flex">
          <input
            class="hidden"
            id="for-me"
            name="forwho"
            value="forme"
            type="radio"
            checked="checked"
          >
          <label for="for-me">
            FOR ME
          </label>
          <input
            class="hidden"
            id="for-loved"
            name="forwho"
            value="forloved"
            type="radio"
          >
          <label for="for-loved">
            FOR LOVED ONE
          </label>
     ...

CSS

.flex{
    display: flex;
  }
  .flex-column{
    display: flex;
    flex-direction: column;
  }
  .justify-around{
    justify-content: space-around;
  }
  .align-center{
    align-items: center;
  }
  .justify-between{
    justify-content: space-between;
  }

  .footer{
    color: #fff;
  }

  .links-part > div {
    /* flex: 1 1 auto; */
    /* display: flex; */
    /* align-items: center; */
  }

  .social-icons a{
    display: block;
    width: 35px;
    height: 35px;
  }

  .facebook{
    background: url(img/icons-set-social.png);
  }
  .twitter{
    background: url(img/icons-set-social.png) -49px 0;
  }
  .linked-in{
    background: url(img/icons-set-social.png) -100px 0;
  }
  .google-plus{
    background: url(img/icons-set-social.png) -150px 0;
  }

  div.footer{
    /* remove height from styles.css 
       then remover this height;
    */
    height: auto;
    padding: 30px 0px;
  }

  .links {
    padding-bottom: 15px;
    border-bottom: 1px solid gray;
  }

  .links li:not(:first-child) {
    padding-left: 20px;
  }

  .contacts-wrapper{
    padding-top: 20px;
  }

  .contacts{
    margin-left: 25px;
  }

  .contacts > .email{
    padding-top: 7px;
  }

  .follow-wrapper > h2{
    padding-bottom: 12px;
  }

  .social-icons li:not(:first-child) {
    margin-left: 12px;
  }

  .hidden {
    display: none;
    visibility: hidden;
  }

  .for-who-row label{
    padding: 8px 0;
    flex: 1 1 50%;
    border: 1px solid #539414;
    background: transparent;
    text-align: center;
  }

  .for-who-row :checked + label {
    border: 1px solid #858585;
    border-radius: 2px;
    background: #404040;
  }