site_logiciels/components/Home/Promotion.vue

<template>
    <LayoutContainer>
      <v-col col="12" class="col-gestion">
        <v-row>
          <p class="text-gestion">
            <span 
            class="span-color">Simplifiez</span> vous la vie avec un outil
            <span class="d-inline-flex">
              <v-img src="/images/promotion/piano.jpg" class="rectangle-img">
              </v-img>
            </span>
            tout en un pour la gestion et la promotion
            <span class="d-inline-flex">
              <v-img src="/images/promotion/danse.jpg" class="rectangle-img">
              </v-img>
            </span>
             , de votre structure
            culturelle.
            <span class="d-inline-flex">
              <v-img src="/images/promotion/cirque.jpg" class="rectangle-img">
              </v-img>
            </span>
          </p>
        </v-row>
      </v-col>
      <div>
        <v-img src="/images/home/écran.JPG" class="screen" ></v-img>
      </div>
      <div class="outil">

        <h3 class="text-center text-outil">
        Un outil complet et intuitif <br>
        pour chaque structure
      </h3>


      <v-row>
        <v-col cols="6" >
          <v-row class="row-outil">
            <p class="text-outil-details with-border-top mt-3">Logiciel de Gestion et 
communication en ligne</p>

          </v-row>

          <v-row class="row-outil">
            <p class="text-outil-details with-border ">Site Web intégré et simple d’usage</p>

          </v-row>


        </v-col>


        <v-col cols="6" >
          <v-row class="row-outil">
            <p class="text-outil-details with-border-top" >Boostez votre visibilité et
votre communication avec l’agenda culturel</p>

          </v-row>

          <v-row class="row-outil">
            <p class="text-outil-details with-border">Communiquez en réseau</p>

          </v-row>


        </v-col>
      </v-row>
      </div>

    </LayoutContainer>
</template>

<script></script>

<style scoped>

.with-border, .with-border-top {
  border-bottom: 1px solid #D1CDC7;
  padding-top: 1rem;
  padding-bottom: 1rem; 
}

.with-border-top{
  border-top: 1px solid #D1CDC7;
}

.row-outil{
  margin-left: 4rem;
}

.text-outil-details{
font-family: 'Barlow';
font-style: normal;
font-weight: 400;
font-size: 2rem;
font-weight: 300;
font-size: 22px;
line-height: 26px;
width: 19rem;
color: #0E2D32;
margin-left: 3rem;
margin-bottom: 1rem;
margin-left: 10rem;

}

.text-outil{
font-family: 'Barlow';
font-style: normal;
font-weight: 400;
font-size: 2rem;
color: #0E2D32;
margin-top: -20rem;
margin-bottom: 3rem;
}

.col-gestion {
  margin-bottom: 4rem;
  background: #0e2d32;
}

.text-gestion {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 4rem;
  line-height: 5rem;
  text-align: center;
  color: white;
  height: 20rem;
  margin-top: 3rem;
  margin-left: 17rem;
  margin-right: 17rem;
  margin-bottom: 25rem;
}

.screen {
  width: 900px;
  margin-top: 2rem;
  margin-left: 17rem;
  margin-right: 17rem;
  text-align: center;
  bottom: 25rem;
  border-radius: 20px; 
}

.span-color {
  color: #CAF5F4;
}

.rectangle-img {
  margin-top: -2rem;
  top: 2rem;
  width: 8rem;
  height: 5rem;
  border-radius: 5rem;
}
</style>