<footer id="footer" class="flex-grid">
    <section class="footer-copyright">
        <div class="footer-copyright-1">&copy; Copyright 2017 - Care on Location</div>
        <menu>
            <ul>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </menu>
    </section>
    <section class="footer-contact">
        <div class="footer-address">
            111 N. 1st St. <br /> Denver, CO 80204
        </div>
        <div class="footer-phone">
            <a href="tel:303-111-1111">303-111-1111</a>
        </div>
    </section>
    <section class="footer-socials">
        <ul>
            <li><a class="socials-facebook" href="https://www.facebook.com"><span>facebook</span></a></li>
            <li><a class="socials-twitter" href="https://www.twitter.com"><span>twitter</span></a></li>
            <li><a class="socials-google-plus" href="https://plus.google.com"><span>google-plus</span></a></li>
        </ul>
    </section>

</footer>
<footer id="footer" class="flex-grid">
  <section class="footer-copyright">
    <div class="footer-copyright-1">&copy; Copyright {{ year }} - {{ site-title }}</div>
    <menu>
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </menu>
  </section>
  <section class="footer-contact">
      <div class="footer-address">
        {{{ org-address }}}
      </div>
      <div class="footer-phone">
        <a href="tel:{{org-phone}}">{{ org-phone }}</a>
      </div>
  </section>
  <section class="footer-socials">
    <ul>
      {{#each socials}}
        <li><a  class="socials-{{ social }}" href="{{ social-url }}"><span>{{ social }}</span></a></li>
      {{/each}}
    </ul>
  </section>

</footer>
{
  "org-address": "111 N. 1st St. <br /> Denver, CO 80204",
  "org-phone": "303-111-1111",
  "socials": [
    {
      "social": "facebook",
      "social-url": "https://www.facebook.com"
    },
    {
      "social": "twitter",
      "social-url": "https://www.twitter.com"
    },
    {
      "social": "google-plus",
      "social-url": "https://plus.google.com"
    }
  ],
  "main-logo": "/images/COL_Logo_Full_2ColorBig.png",
  "site-title": "Care on Location",
  "year": 2017,
  "nav-items": [
    {
      "nav-item-link": "#",
      "nav-item-title": "Services",
      "classes": "has-sub-menu",
      "sub-nav-items": [
        {
          "nav-item-link": "#",
          "nav-item-title": "Video Care Consult"
        },
        {
          "nav-item-link": "#",
          "nav-item-title": "Assisted Video Care Consult"
        },
        {
          "nav-item-link": "#",
          "nav-item-title": "On Location Care Consult"
        }
      ]
    },
    {
      "nav-item-link": "#",
      "nav-item-title": "Providers"
    },
    {
      "nav-item-link": "#",
      "nav-item-title": "Partners"
    },
    {
      "nav-item-link": "#",
      "nav-item-title": "About"
    },
    {
      "nav-item-link": "#",
      "nav-item-title": "FAQ"
    },
    {
      "nav-item-link": "#",
      "nav-item-title": "News"
    }
  ]
}
  • Content:
    #footer {
      margin-top: 40px;
      background-color: $brand-mediumblue;
      color: $brand-white;
      padding: 10px;
      align-items: center;
       > * {
        text-align: center;
      }
      section {
        min-width: 300px;
      }
      a {
    
        color: $brand-white;
        text-decoration: none;
        @include font-size(28);
        &:hover {
          color: $brand-lightblue;
        }
        &::before {
          font-family: 'FontAwesome';
          display: inline-block;
        }
        &.socials-facebook::before {
          content: "\f09a";
        }
        &.socials-twitter::before {
          content: "\f099";
        }
        &.socials-google-plus::before {
          content: "\f0d5";
        }
    
    
      }
      ul {
        padding-left: 0;
      }
      li {
        display: inline;
        padding-left: 15px;
        span {
          display: none;
    
        }
      }
    
      .footer-contact, .footer-copyright {
        li {
          border-left: 2px solid $brand-white;
          padding-right: 15px;
          &:first-of-type {
            border-left: none;
          }
        }
        @include font-size(18);
        a {
          @include font-size(18);
        }
      }
    }
    
  • URL: /components/raw/footer/_footer.scss
  • Filesystem Path: src/components/03-layouts/footer/_footer.scss
  • Size: 1 KB

There are no notes for this item.