site_logiciels/components/Formation/Participation.vue

<template>
  <AnchoredSection id="inscription">
    <LayoutContainer class="alt-theme">
      <v-row class="center-90">
        <v-col cols="12">
          <LayoutUISubTitle>
            Accessibilité
          </LayoutUISubTitle>
        </v-col>
      </v-row>

      <v-row class="mb-12 center-90">
        <v-col cols="12" lg="6">
          <v-img
            src="/images/formation/participation.jpg"
            alt="Ordinateur avec un écran en visioconférence avec plusieurs personnes posé sur une table avec un pichet posé à côté"
            class="participation-img"
          />
        </v-col>

        <v-col cols="12" lg="4">
          <h3 class="title-participation text-center mb-8">
            Vous souhaitez participer à une formation ?
          </h3>

          <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>
  </AnchoredSection>
</template>

<script setup lang="ts">
import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
</script>

<style scoped lang="scss">
.container {
  background-color: var(--primary-color);
  color: var(--on-primary-color);
}

.v-row {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.icon-title {
  font-size: 1rem;
  margin-right: 1rem;
}
.container-title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
}

h3 {
  font-weight: 600;
  font-size: 42px;
  line-height: 42px;
  text-align: center;
  color: var(--on-primary-color);
}

.details-participations {
  display: flex;
  flex-direction: column;
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  margin: 1rem auto auto auto;
  width: 800px;
  max-width: 100%;
  color: var(--on-primary-color);
}

.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;
}
</style>