servicio_social_front/components/layouts/Header.vue

<template>
  <header class="header-page">
    <div class="container py-3">
      <div
        class="columns is-gapless is-vcentered is-justify-content-space-between is-mobile"
      >
        <a
          href="https://www.unam.mx/"
          class="column is-5-mobile is-3-tablet is-one-fifth-widescreen ml-3"
          target="_blank"
        >
          <b-image
            :src="require('@/assets/logo_unam.png')"
            alt="logo_unam"
          ></b-image>
        </a>

        <a
          href="https://www.acatlan.unam.mx/"
          class="column is-5-mobile is-3-tablet is-one-fifth-widescreen mr-3"
          target="_blank"
        >
          <b-image
            :src="require('@/assets/logo_acatlan.png')"
            alt="logo_acatlan"
          ></b-image>
        </a>
      </div>
    </div>
  </header>
</template>

<script>
export default {}
</script>

<style>
.header-page {
  background-color: #1d3d6f;
}

.input:focus {
  border: #1b3d70;
  box-shadow: 0 0 8px 0 #1b3d70;
}

.select select:focus {
  border-color: #1b3d70;
  box-shadow: 0 0 8px 0 #1b3d70;
}

.select:not(.is-multiple):not(.is-loading)::after {
  border-color: #1b3d70;
}

.pagination-link.is-current {
  background-color: #1b3d70;
  border-color: #1b3d70;
}

.pointer {
  cursor: pointer;
}
</style>