site_logiciels/components/Home/Promotion.vue

<template>
  <div>
    <v-container class="container">
      <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>
            <p>Logiciel de Gestion et 
communication en ligne</p>

          </v-row>

          <v-row>
            <p>Logiciel de Gestion et 
communication en ligne</p>

          </v-row>


        </v-col>


        <v-col cols="6" >
          <v-row >
            <p >Boostez votre visibilité et
votre communication avec l’agenda culturel</p>

          </v-row>

          <v-row>
            <p>Communiquez en réseau</p>

          </v-row>


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

    </v-container>
  </div>
</template>

<script></script>

<style>

.text-outil{
height: 76px;

/* H3 Headline */
font-family: 'Barlow';
font-style: normal;
font-weight: 400;
font-size: 34px;
line-height: 38px;

color: #0E2D32;
}
.outil {
  margin-top: 100px;
  margin-bottom: 100px;
  bottom: 2;
}
.container {
  width: 1600px;
}

.col-gestion {
  margin-top: 100px;
  margin-bottom: 100px;
  background: #0e2d32;
}

.text-gestion {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 60px;
  line-height: 68px;

  /* or 113% */
  text-align: center;
  color: white;

  height: 331.95px;
  margin-top: 128px;
  margin-left: 300px;
  margin-right: 300px;
  margin-bottom: 357px;
}

.screen {
  width: 900px;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-left: 300px;
  margin-right: 300px;
  bottom: 400px;
  border-radius: 20px;
  
}

.span-color {
  color: #CAF5F4;
}

.rectangle-img {
  margin-top: -35px;
  top: 25px;
  width: 100px;
  height: 100px;
  border-radius: 140px;
}
</style>