PortaFront/src/components/footer.vue

<template>
  <footer class="container-fluid Azul-puma footer py-3 ">
    <container>
      <div row>
        <button type="button" class="col-md-6 col-sm-12 btn boton-footer uno">
          Comité Editorial
        </button>
        <button type="button" class="col-md-6 col-sm-12 btn boton-footer dos">
          Política Editorial y Lineamentos
        </button>
        <button type="button" class="col-md-6 col-sm-12 btn boton-footer tres">
          Proceso Editorial y Organismos
        </button>
        <button
          type="button"
          class="col-md-6 col-sm-12 btn boton-footer cuatro"
        >
          Puntos de Venta
        </button>
      </div>
    </container>
    <div row>
      <p class="mb-0 ">Hecho en México, todos los derechos reservados 2020.</p>
      <p class="my-0 ">
        Esta página puede ser reproducida con fines no lucrativos, siempre y
        cuando no se mutile, se cite la fuente
      </p>
      <p>
        completa y su dirección electrónica. De otra forma, requiere permiso
        previo por escrito de la institución.
      </p>
    </div>
  </footer>
</template>

<script>
export default {};
</script>

<style scoped>
.boton-footer {
  background-color: rgb(187, 136, 0);
  color: white;
  width: 14rem;
  font-size: 0.8rem;
}
.uno,
.dos,
.tres {
  margin-right: 1rem;
}
.btn {
  margin-bottom: 1rem;
}

.Azul-puma {
  background-color: #1e3c70;
}

.footer {
  text-align: center;
  color: white;
}

@media (max-width: 768px) {
  .uno,
  .tres {
    margin-right: 4rem;
  }
  .dos {
    margin-right: 0rem;
  }
  .footer {
    font-size: 0.7rem;
  }
}

@media (max-width: 970px) {
  .uno,
  .dos,
  .tres {
    margin-right: 0.5rem;
  }

  .footer {
    font-size: 0.7rem;
  }
}
</style>