consumocuidado/components/Footer.vue

<template>
  <div>
    <hr />
    <div>
      <img class="bolsa" src="@/assets/img/footer-bolsa.svg" alt="" />
    </div>
    <hr />
    <div class="social">
      <a href="https://www.facebook.com/coceta" target="_blank">
        <img
          class="social-logo"
          src="@/assets/img/footer-facebook.svg"
          alt=""
        />
      </a>
      <a href="https://twitter.com/Coopsdetrabajo" target="_blank">
        <img class="social-logo" src="@/assets/img/footer-twitter.svg" alt="" />
      </a>
    </div>
    <hr />
    <div class="organization">
      <div class="organization-image-container">
        <img
          class="organization-image"
          src="@/assets/img/footer-coceta.svg"
          alt=""
        />
      </div>
      <div>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </div>
      <div class="organization-image-container">
        <img
          class="organization-image"
          src="@/assets/img/footer-ministerio.svg"
          alt=""
        />
      </div>
    </div>
    <ul class="link-list">
      <li>
        <small>2021 La Tienda.Coop</small>
      </li>

      <li>
        <a href="https://coceta.coop/" class="footer-link" target="_blank">
          <small>Coceta</small>
        </a>
      </li>

      <li>
        <NuxtLink to="/page/terminos">
          <small>Términos y condiciones</small>
        </NuxtLink>
      </li>

      <li>
        <NuxtLink to="/page/legal">
          <small>Política de privacidad</small>
        </NuxtLink>
      </li>

      <li>
        <NuxtLink to="/page/cookies">
          <small>Cookies</small>
        </NuxtLink>
      </li>

      <li>
        <a
          href="http://enreda.coop/"
          class="footer-link enreda"
          target="_blank"
        >
          <small
            ><mark class="highlight">Sitio desarrollado por Enreda</mark></small
          >
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Footer',
}
</script>

<style lang="scss" scoped>
hr {
  margin-top: 0;
}

.bolsa {
  width: 50px;
  height: auto;
  margin: 4.375rem auto;
  display: block;
  @include mobile {
    width: 35px;
    margin: 3rem auto;
  }
}
.social {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 3.125rem auto;
  &-logo {
    height: 1.25rem;
    margin: auto 1.875rem;
  }
}

.organization {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  &-image {
    width: 18rem;
    margin: 3.125rem;
    @include mobile {
      width: 6rem;
      margin: 0.8rem;
    }
  }
}

.dot {
  height: 3px;
  width: 3px;
  background-color: #bbb;
  border-radius: 50%;
  display: block;
  margin: 7px;

  @include mobile {
    height: 2px;
    width: 2px;
    margin: 5px;
  }
}

.link-list {
  font-family: 'Noto Sans';
  font-size: $xs;
  color: $color-grey-darker;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  margin-top: 1rem;
  margin-bottom: 3.125rem;
  text-decoration: none;
  list-style-type: none;

  @include mobile {
    display: none;
  }

  @include tablet {
    flex-direction: row;
    font-size: $xxs;
  }

  & small {
    margin: auto 1.25rem;
    text-align: center;
    color: $color-grey-darker;
    :hover {
      cursor: pointer;
    }
  }

  @include tablet {
    li:nth-child(1):after,
    li:nth-child(2):after,
    li:nth-child(3):after,
    li:nth-child(4):after,
    li:nth-child(5):after {
      color: $color-grey-darker;
      content: '|';
      margin: 0.5rem;
    }
  }

  .footer-link {
    .enreda {
      padding: 1.25em;
    }

    .highlight {
      background: $color-greylighter;
      border-radius: 5px;
      padding: 5px;
    }
  }
}
</style>