site_logiciels/components/About/Valeurs.vue

<template>
  <LayoutContainer>
    <v-row>
      <v-col cols="5">
        <h3 class="title-valeur">
          Les valeurs qui nous portent
        </h3>

        <div class="container-img">
          <img
            class="image-ronde top-img"
            src="/images/about/valeur1.jpg"
          >

          <v-row>
            <img
              class="image-ronde left-img"
              src="/images/about/valeur2.jpg"
            >
            <img
              class="image-ronde right-img"
              src="/images/about/valeur3.jpg"
            >
          </v-row>

          <img
            class="image-ronde bottom-img"
            src="/images/about/valeur4.jpg"
          >
        </div>
      </v-col>

      <v-col cols="7">
        <div class="valeur-container">
          <v-row class="row">
            <v-col cols="6">
              <v-icon class="fa-brands fa-react icon" />
              <h6 class="title-valeurs">
                Management social
              </h6>
              <p>
                Guillaume et Michel sont sur la même longueur d’onde et donnent
                le « La » à un management social et solidaire où plus que de
                mettre en avant l'entreprise, ils privilégient la mise en avant
                des hommes et femmes qui la composent. Toux ceux qui participent
                jour après jour à l’écriture de la partition sont valorisés. Le
                partage, l’échange et le dialogue en lieu et place des liens de
                subordination.
              </p>
            </v-col>

            <v-col cols="6">
              <v-icon class="fa-brands fa-react icon" />
              <h6 class="title-valeurs">
                Management social
              </h6>
              <p>
                Guillaume et Michel sont sur la même longueur d’onde et donnent
                le « La » à un management social et solidaire où plus que de
                mettre en avant l'entreprise, ils privilégient la mise en avant
                des hommes et femmes qui la composent. Toux ceux qui participent
                jour après jour à l’écriture de la partition sont valorisés. Le
                partage, l’échange et le dialogue en lieu et place des liens de
                subordination.
              </p>
            </v-col>
          </v-row>
          <v-row class="row">
            <v-col cols="6">
              <v-icon class="fa-brands fa-react icon" />
              <h6 class="title-valeurs">
                Management social
              </h6>
              <p>
                Guillaume et Michel sont sur la même longueur d’onde et donnent
                le « La » à un management social et solidaire où plus que de
                mettre en avant l'entreprise, ils privilégient la mise en avant
                des hommes et femmes qui la composent. Toux ceux qui participent
                jour après jour à l’écriture de la partition sont valorisés. Le
                partage, l’échange et le dialogue en lieu et place des liens de
                subordination.
              </p>
            </v-col>

            <v-col cols="6">
              <v-icon class="fa-brands fa-react icon" />
              <h6 class="title-valeurs">
                Management social
              </h6>
              <p>
                Guillaume et Michel sont sur la même longueur d’onde et donnent
                le « La » à un management social et solidaire où plus que de
                mettre en avant l'entreprise, ils privilégient la mise en avant
                des hommes et femmes qui la composent. Toux ceux qui participent
                jour après jour à l’écriture de la partition sont valorisés. Le
                partage, l’échange et le dialogue en lieu et place des liens de
                subordination.
              </p>
            </v-col>
          </v-row>
        </div>
      </v-col>
    </v-row>
  </LayoutContainer>
</template>

<script setup></script>
<style scoped>
.row {
  border-top: 1px solid #e5e5e5;
}
.icon {
  color: #f4aa2a;
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: 1rem;
}

.title-valeurs {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 22px;
  line-height: 26px;
  color: #091d20;
  margin-bottom: 1rem;
}
.title-valeur {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-size: 34px;
  line-height: 38px;
  color: #071b1f;
  text-align: center;
  margin-right: 19rem;
  margin-left: 12rem;
  text-align: left;
}

.left-img {
  position: relative;
  right: 2rem;
}

.right-img {
  position: relative;
  left: 2rem;
}
.container-img {
  margin-left: 14rem;
}
.bottom-img,
.top-img {
  margin-left: 4rem;
}

.top-img {
  position: relative;
  top: 4.5rem;
}

.bottom-img {
  position: relative;
  bottom: 4.5rem;
}
.image-ronde {
  width: 160px;
  height: 150px;
  border-radius: 90px;
}
</style>