<footer class="footer section-dark font-small text-center fixed-bottom">
  <ul class="list-inline">
    <li class="list-inline-item">
      <a class="nav-item nav-link active hover-effect" href="#">
        Home
      </a>
    </li>
    <li class="list-inline-item">
      <a class="nav-item nav-link hover-effect" href="#about">About</a>
    </li>

    <li class="list-inline-item">
      <a class="nav-item nav-link hover-effect" href="#projects">Projects</a>
    </li>
    <li class="list-inline-item">
      <a class="nav-item nav-link hover-effect" href="#contact">Contact</a>
    </li>
  </ul>

  <ul class="list-inline">
    <li class="social-item list-inline-item">
      <a href="https://linkedin.com/" target="_blank" alt="linkedin" class="social-icon">
        <i class="fab fa-linkedin"> </i>
      </a>
    </li>

    <li class="social-item list-inline-item">
      <a href="https://codepen.io/" target="_blank" alt="linkedin" class="social-icon">
        <i class="fab fa-codepen"> </i>
      </a>
    </li>

    <li class="social-item list-inline-item">
      <a href="https://dev.to/" target="_blank" alt="dev" class="social-icon">
        <i class="fab fa-dev"> </i>
      </a>
    </li>

    <li class="social-item list-inline-item">
      <a href="https://linkedin.com/" target="_blank" alt="github" class="social-icon">
        <i class="fab fa-github"> </i>
      </a>
    </li>
  </ul>

  <div class="copyright">
    <p>
      <!--       {{ new Date().getFullYear() }} -->
      Copyright © 2021 Darian Nocera. All rights reserved.
    </p>
  </div>
  <div class="credit">
    <p>
      Designed with 👽 by
      <a class="hover-effect" id="username" href="https://www.github.com/darnocer" alt="Darian's Github">darnocer</a>
    </p>
  </div>
</footer>
$dark-bg: #1b1b1b;
$spacer: 2rem;
$spacer-sm: 1rem;
$font-size-sm: 0.8rem;
$social-size: 1.5rem;

$body-font: "Karla", sans-serif;
$accent-color: #026d5b;
$grey-color: #a4b0be;

@import url("https://fonts.googleapis.com/css2?family=Karla:wght@400;500;700&display=swap");

html,
body,
#app {
  font-family: $body-font;
  font-weight: 400;
  color: #fff;

  a {
    color: $grey-color;
    text-transform: uppercase;
    transition: 0.3s ease;
    &:not(.social-icon) {
      font-weight: 700;
      font-size: $font-size-sm;
    }

    &:hover {
      color: $accent-color;
      text-decoration: none;
    }
  }
}

.footer {
  background-color: $dark-bg;
  padding: $spacer-sm;

  p {
    font-size: $font-size-sm;
  }

  #username {
    text-transform: lowercase;
  }

  .social-item {
    i {
      font-size: $social-size;
      padding: 0 $spacer;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.