site_logiciels/components/Formation/Participation.vue

<template>
  <div id="Inscription">
    <LayoutContainer>
      <div class="title-container mt-12 mb-6">
        <v-icon size="6" class="fa-solid fa-circle icon-title" />
        <h4 class="subtitle">Inscriptions</h4>
      </div>
      <h2 class="title-participation text-center">
        Vous souhaitez participer à une formation ?
      </h2>
      <v-row class="mb-12">
        <v-col cols="12">
          <v-img
            class="participation-img"
            src="/images/formation/participation.jpg"
          />
        </v-col>
      </v-row>

      <v-row class="mb-12">
        <v-col cols="12">
          <p class="details-participations">
            Utilisez le menu "Contact" situé en haut et en bas de la page pour
            plus d'informations. Nous vous répondons sous 48h (hors week-ends).
            Délais d'accès: Après accord, nous mettons tout en oeuvre pour vous
            mettre à disposition un formateur sous 1 mois.
          </p>

          <p class="details-participations">
            Nos formations peuvent être accessibles aux personnes en situation
            de handicap. Chaque situation étant unique, nous vous demandons de
            préciser à l’inscription votre handicap. Nous pourrons ainsi
            confirmer l’ensemble des possibilités afin de vous permettre de
            suivre la formation dans les meilleures conditions en accord avec
            votre employeur. Pour toutes informations complémentaires, nous vous
            conseillons les structures suivantes : ONISEP, AGEFIPH et FIPHFP.
            Pour le bon déroulement de la formation, il est nécessaire de
            disposer d’un espace de travail calme et équipé d’au moins un
            ordinateur, connecté à internet, et dont le navigateur (Mozilla
            Firefox, Google Chrome, ou Apple Safari) est à jour. Nous
            recommandons d’utiliser un ordinateur par personne. Les participants
            devront également avoir des ordinateurs équipés de micros et de
            haut-parleurs, préférablement des micro-casques pour un meilleur
            confort d’écoute.
          </p>
        </v-col>
      </v-row>
    </LayoutContainer>
  </div>
</template>

<style scoped>
.title-container {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 18px;
  color: #091d20;
  margin-left: 2rem;
}

.subtitle {
  color: white;
  font-family: "Barlow";
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.icon-title {
  margin-right: 0.7rem;
  color: #64afb7;
}
.details-participations {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  margin-top: 1rem;
  display: flex;
  margin-left: 23rem;
  margin-right: 23rem;
}

.participation-img {
  margin-top: 2rem;
  width: 40%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20%;
}
.title-participation {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 42px;
  line-height: 42px;
  text-align: center;
  color: #ffffff;
}
.icon-title {
  font-size: 1rem;
  margin-right: 1rem;
}
.container-title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
}
.container {
  background-color: #0e2d32;
  color: #ffffff;
}
.subtitile-inscription {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  color: #091d20;
  margin-top: 1rem;
}
</style>