site_logiciels/components/Home/EventAgenda.vue

<template>
  <LayoutContainer :overflow="false">
      <h2 class="title">
        Retrouvez tous vos évènements dans l'agenda et référencez vous dans
        l'annuaire
      </h2>

      <v-row>
        <v-col col="6">
          <v-btn class="btn-event">Découvrir l'évènement </v-btn>
        </v-col>

        <v-col col="6">
          <v-btn class="btn-event">Découvrir l'évènement </v-btn>
        </v-col>
      </v-row>

    <div class="white-container">
      <v-row>
        <v-col cols="6">
          <v-img 
          src="/images/eventAgenda/logiciel.png"
          class="screen-img"
          
          > </v-img>
        </v-col>

        <v-col cols="6">
          <h3 class="title-event">Une solution évolutive pour vous donner entière satisfaction</h3>

          <p class="details">
            La satisfaction de nos clients est notre première motivation et nous
            nous tenons à votre écoute pour faire évoluer notre logiciel. Un
            besoin ? Notifiez le nous et après l'étude de votre demande en
            interne puis validation, nous intégrerons votre requête à notre
            processus de développement.
          </p>
        </v-col>
      </v-row>
    </div>
  </LayoutContainer>
</template>

<style scoped>

* {
  font-family: "Barlow";
  font-style: normal;
}

.details{
  font-weight: 400;
  font-size: 1rem;
  margin-top: 3rem;
  margin-left: 2rem;
  color: #091d20;
  width: 16rem;
  margin-left: 10rem;
}

.title-event {
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 38px;
  margin-top: 3rem;
  margin-left: 2rem;
  color: #091d20;
  width: 16rem;
  margin-left: 10rem;
}
.btn-event {
  border-radius: 0.5rem;
  margin-left: 7vw;
  gap: 9px;
  font-weight: 700;
  font-size: 10px;
  line-height: 15px;
  width: 15rem;
  height: 3rem;
  margin-left:15rem;
  margin-top:2rem;
}
.title {
  height: 114px;
  font-weight: 400;
  font-size:2rem;
  line-height: 38px;
  text-align: center;
  margin-left: 25rem;
  margin-right: 25rem;
  margin-top: 3rem;
  color: #ffffff;
}

.container {
  height: 20rem;
  margin-bottom: 30rem;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
              linear-gradient(180deg, rgba(14, 45, 50, 0.04) 0%, rgba(14, 45, 50, 0.2) 100%),
              linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), 
              url("/images/eventAgenda/eventAgenda.jpg") no-repeat center center;
  background-size: cover;
}

.white-container {
  margin-top: 5rem;
  background-color: #ffffff;
}

.screen-img{
  margin-left: 8rem;
  width: 70%;
  height: 90%;
  border-radius: 20%;
}
</style>