Code 4

footer_code_4.scss

.footer {
  background-color: $color-gray-dark-3;
  padding: 10rem 0;
  font-size: 1.4rem;
  color: $color-gray-light-1;

  &__logo-box {
    text-align: center;
    margin-bottom: 8rem;
  }

  &__logo {
    width: 15rem;
    height: auto;
  }

  &__navigation {
    border-top: 1px solid $color-gray-dark;
    padding-top: 2rem;
    display: inline-block;
  }

  &__list {
    list-style: none;
  }

  &__item {
    display: inline-block;
    &:not(:last-child) {
      margin-right: 1.5rem;
    }
  }
  &__link {
    &:link,
    &:visited {
      color: $color-gray-light-1;
      background-color: $color-gray-dark-3; // This is added to make the text behind invisible
      text-decoration: none;
      text-transform: uppercase;
      display: inline-block;
      transition: all 0.2s;
    }

    &:hover,
    &:active {
      color: $color-primary;
      box-shadow: 0 1rem 2rem rgba($color-black, 0.4);
      transform: rotate(5deg) scale(1.3);
    }
  }

  //   Copyright
  &__copyright {
    border-top: 1px solid $color-gray-dark;
    padding-top: 2rem;
    width: 80%;
    float: right;
  }
}