site_logiciels/components/Home/Solution.vue

<template>
  <v-container >

    <div class="container">

    <span class="vector"></span>
    <p class="text-center solution-subtitle">3 solutions</p>
    <h3 class="text-center title">Trouvez la solution <br> faite pour vous</h3>

    <v-row>
      <v-col cols="4">
        <small class="opentalent-small">Opentalent</small>
        <h2 class="logiciel-name">Artist</h2>
        <hr>
        <p class="description-logiciel">
          Orchestre, chorales, compagnies de danse, théâtre et cirque

        </p>

        <v-row>
          <v-img
          src="/images/solutions/artist.jpg"
          class="solution-img"
          >
          </v-img>
        </v-row>

        <v-row>
          <v-col cols="6">
            <ul>
              <li>Gestion des membres</li>
              <li>Gestion des membres</li>
              <li>Gestion des membres</li>
              <li>Gestion des membres</li>
            </ul>
          </v-col>

          <v-col cols="6">
            <ul>
              <li>Gestion des membres</li>
              <li>Gestion des membres</li>
              <li>Gestion des membres</li>
              <li>Gestion des membres</li>
            </ul>
          </v-col>
        </v-row>

      </v-col>

      <v-col cols="4">
        <small class="opentalent-small">Opentalent</small>
        <h2 class="logiciel-name">Manager</h2>
        <hr>
        <p class="description-logiciel">
          Orchestre, chorales, compagnies de danse, théâtre et cirque

        </p>

        <v-row>
          <v-img
          src="/images/solutions/manager.png"
          class="solution-img"
          >
          </v-img>
        </v-row>

        <v-row>
          <v-col cols="6">
            <ul>
              <li>Gestion des membres</li>
              <li>Gestion des membres</li>
              <li>Gestion des membres</li>
              <li>Gestion des membres</li>
            </ul>
          </v-col>

          <v-col cols="6">
            <ul>
              <li>Gestion des membres</li>
              <li>Gestion des membres</li>
              <li>Gestion des membres</li>
              <li>Gestion des membres</li>
            </ul>
          </v-col>
        </v-row>

      </v-col>


      <v-col cols="4">
        <small class="opentalent-small">Opentalent</small>
        <h2 class="logiciel-name">School</h2>
        <hr>
        <p class="description-logiciel">
          Orchestre, chorales, compagnies de danse, théâtre et cirque

        </p>

        <v-row>
          <v-img
          src="/images/solutions/artist.jpg"
          class="solution-img"
          >
          </v-img>
        </v-row>

        <v-row>
          <v-col cols="6">
            <ul>
              <li>Gestion des membres</li>
              <li>Gestion des membres</li>
              <li>Gestion des membres</li>
              <li>Gestion des membres</li>
            </ul>
          </v-col>

          <v-col cols="6">
            <ul>
              <li>Gestion des membres</li>
              <li>Gestion des membres</li>
              <li>Gestion des membres</li>
              <li>Gestion des membres</li>
            </ul>
          </v-col>
        </v-row>

      </v-col>

    </v-row>


      
  </div>


    <div class="white-content"> 



</div>


    </v-container>

</template>

<style scoped>

.white-content{
  background-color: white;
  height: 400px;
  opacity: 0.5;
}

.solution-img{
  width: 500px;
  height: 300px;
}

.description-logiciel{
  font-family: 'Barlow';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 20px;

/* or 125% */

/* Vert 5 */
color: #EFF9FB;
}

.logiciel-name{
  /* H2 Headline */
  font-family: 'Barlow';
font-style: normal;
font-weight: 400;
font-size: 30px;
line-height: 34px;

/* identical to box height, or 113% */

/* Vert 20 */
color: #C3E5E7;

}

.opentalent-small{
  font-family: 'Barlow';
font-style: normal;
font-weight: 600;
font-size: 10px;
line-height: 15px;

/* or 150% */
letter-spacing: 0.18em;
text-transform: uppercase;

/* NEUTRAL - BLANC */
color: #FFFFFF;
}
.title{
  /* H2 Headline */
font-family: 'Barlow';
font-style: normal;
font-weight: 600;
font-size: 42px;
line-height: 42px;

/* or 100% */
text-align: center;

color: #FFFFFF;
}

.solution-subtitle {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 15px;
  line-height: 68px;
  color: #C1EFF0
}
.container {
  width: 1600px;
  height: 700px;
  margin-top: 90px;
  background: #0E2D32;
}
</style>