site_logiciels/components/Formation/Certification.vue

<template>
  <LayoutContainer>
    <div class="title-container">
      <v-icon class="fa-brands fa-react icon-title" />
      <h6 class="subtitle-certification">
        DES FORMATIONS CERTIFIFIÉES
      </h6>
    </div>
    <h2 class="title-certification">
      Certification
    </h2>

    <v-row>
      <v-col cols="4">
        <h2 class="title-certification">
          Qualiopi : Marque de certification
        </h2>
        <p class="details-certifications">
          Nos formations sont certifiées Qualiopi - Actions de formation.
        </p>

        <p class="details-certifications">
          La marque « Qualiopi » vise à :
        </p>
        <ul class="list-qualiopi">
          <li>
            attester de la qualité du processus mis en œuvre par les
            prestataires d’actions concourant au développement des compétences ;
          </li>
          <li>
            permettre une plus grande lisibilité de l’offre de formation auprès
            des entreprises et des usagers.
          </li>
        </ul>
      </v-col>

      <v-col cols="5">
        <v-img
          src="/images/formation/qualiopi.jpg"
          class="qualiopi-img"
        />
      </v-col>
    </v-row>
  </LayoutContainer>
</template>

<script setup></script>

<style scoped>
.qualiopi-img {
  margin-bottom: 3rem;
  bottom: 4rem;
}

.list-qualiopi {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  color: #091d20;
  margin-top: 1rem;
}
.details-certifications {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  color: #091d20;
  margin-top: 1rem;
}

.title-certification {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 42px;
  line-height: 42px;
  color: #071b1f;
  flex: none;
  order: 1;
  flex-grow: 0;
  margin-bottom: 2rem;
}

.icon-title {
  color: #9edbdd;
  font-size: 2rem;
  margin-right: 1rem;
}
.title-container {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
  margin-top: 4rem;
}
.subtitle-certification {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 10px;
  line-height: 15px;
  display: flex;
  align-items: center;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #071b1f;
}
</style>