site_logiciels/components/Formation/Participation.vue

<template>
  <div id="Inscription">
    <LayoutContainer>
      <v-row class="custom-row">
        <v-col cols="12">
          <LayoutUISubTitle
            :iconSize="6"
            :iconClasses="iconClasses"
            :titleText="'Accessibilité'"
            :title-color="'#ffffff'"
          />
        </v-col>
      </v-row>

      <h2 class="title-participation text-center mb-8">
        Vous souhaitez participer à une formation ?
      </h2>

      <v-row class="mb-12">
        <v-col cols="12">
          <div class="participation-img"></div>
          <!-- <v-img
            class="participation-img"
            src="/images/formation/participation.jpg"
          /> -->
        </v-col>
      </v-row>

      <v-row class="mb-12 custom-row">
        <v-col cols="12">
          <div class="details-participations">
            <p class="mb-6">
              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>
              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>
          </div>
        </v-col>
      </v-row>
    </LayoutContainer>
  </div>
</template>

<style scoped>
@media (min-width: 1200px) {
  .custom-row {
    min-width: 100%;
    max-width: 100;
    margin-left: auto;
    margin-right: auto;
  }
}
.custom-row {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.subtitle {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}
.details-participations {
  display: flex;
  flex-direction: column;
  text-align: justify;

  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  margin-top: 1rem;
  display: flex;
  width: 800px;
  margin: auto;
  color: #ffffff;
}

.participation-img {
  position: relative;
  background-image: url("/images/formation/participation.jpg");
  width: 700px;
  height: 550px;
  background-position: center;
  background-size: cover;
  border-radius: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}
.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;
}
</style>