Footer two column

Thumbnail

PugSCSS
.uk-background-primary.uk-padding
  .uk-container
    .uk-grid-collapse.uk-flex-middle(uk-grid class='[email protected] [email protected] uk-flex-center')
      div
        div.uk-text-center(class='[email protected]')
          a(href='/')
            img(src='img/logo-w.svg')
          ul.uk-list.text-white.uk-margin-top
            li(style='margin-bottom:12px')
              img.icon-position-fixed(src='img/icon-mark.svg')
              span.uk-margin-small-left.text-small-spacing.text-small address
            li(style='margin-bottom:12px')
              img.icon-position-fixed(src='img/icon-mail.svg')
              span.uk-margin-small-left.text-small-spacing.text-small mail
            li(style='margin-bottom:12px')
              img.icon-position-fixed(src='img/icon-clock.svg')
              span.uk-margin-small-left.text-small-spacing.text-small time
      div
        ul.uk-navbar.social-link.uk-margin-medium-bottom.uk-flex-center.uk-margin-medium-top(class='[email protected]')
          li.uk-margin-right
            a.fb(href='#') 
              span.text-white Facebook
          li.uk-margin-right
            a.line(href='#') 
              span.text-white Line
          li
            a.youtube(href='#') 
              span.text-white Youtube
        ul.uk-subnav.uk-subnav-divider.uk-flex-center(class='[email protected]')
          li
            a.link-opacity.text-white.text-small.text-small-spacing(href='#') 關於我們
          li
            a.link-opacity.text-white.text-small.text-small-spacing(href='#') 聯絡我們
          li
            a.link-opacity.text-white.text-small.text-small-spacing(href='#') 隱私權聲明
        p.uk-text-center.text-white.text-small-s.text-xsmall.text-spacing-s.uk-margin-small-top.uk-padding-remove-bottom-s.uk-padding-bottom(class='[email protected]') 2020 版權所有 © XXX股份有限公司 All right reserved.
footer {
  .social-link {
    li {
      padding-left: 0;
      a {
        padding-left: 1rem;
        display: inline-block;
        width: rem(37px);
        height: rem(37px);
        vertical-align: middle;
        transition: width .2s ease;
        overflow: hidden;
        span {
          display: block;
          position: relative;
          padding-left: 1.5rem;
          margin-left: .5rem;
          transition: all .2s ease;
          top: 10px;
          transform: translateX(50%);
          overflow:hidden;
          opacity: 0;
        }
        &:hover {
          width: rem(120px);
          background-position: 0 rem(-37px)!important;
          &.fb {
            width: rem(120px);
          }
          &.line {
            width: rem(80px);
          }
          &.instagram {
            width: rem(140px);
          }
          span {
            transform: translateX(0);
            opacity: 1;
          }
        }
      }
    }
    @include mq(960px){
      margin: 40px 0!important;
    }
  }
  @include mq(640px){
    .uk-padding {
      padding: 2rem 0 0 0;
    }
    .uk-subnav {
      margin-left: 0;
    }
    .uk-subnav>* {
      padding-left: .2rem;
      a {
        font-size: 12px;
      }
    }
    .uk-subnav-divider>:nth-child(n+2):not(.uk-first-column)::before {
      margin-right: 5px;
      height: .8rem;
    }
  }
}