correction banner et bouton eventagenda.vue

components/Home/EventAgenda.vue

@@ -8,7 +8,7 @@
     </div>
 
     <v-row>
-      <div class="btn-container">
+      <v-col cols="12" class="btn-container">
         <v-col col="6">
           <v-btn class="btn-event">Découvrir les évènements </v-btn>
         </v-col>
@@ -16,7 +16,7 @@
         <v-col col="6">
           <v-btn class="btn-event">Découvrir l’ANNUAIRE </v-btn>
         </v-col>
-      </div>
+      </v-col>
     </v-row>
 
     <div class="white-container">
@@ -48,6 +48,47 @@
 </template>
 
 <style scoped>
+.btn-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 17rem;
+  
+}
+.btn-event {
+  font-family: "Barlow";
+  font-style: normal;
+  border-radius: 0.5rem;
+  margin-left: 7vw;
+  gap: 9px;
+  font-weight: 700;
+  font-size: 10px;
+  line-height: 15px;
+  width: 15rem;
+  height: 3rem;
+  margin-top: 2rem;
+}
+
+.title {
+  font-family: "Barlow";
+  font-style: normal;
+  height: 114px;
+  font-weight: 400;
+  font-size: 2rem;
+  line-height: 38px;
+  text-align: center;
+  margin-bottom: 2rem;
+  margin-top: 4rem;
+  color: #ffffff;
+  width: 30rem;
+}
+
+.title-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .circle {
   position: absolute;
   left: 35%;
@@ -76,12 +117,7 @@
   font-style: normal;
   margin-top: 2rem;
 }
-.btn-container {
-  display: flex;
-  justify-content: space-between;
-  margin-left: 10rem;
-  margin-right: 10rem;
-}
+
 .details {
   font-weight: 400;
   font-size: 1rem;
@@ -106,39 +142,7 @@
   width: 16rem;
   margin-left: 10rem;
 }
-.btn-event {
-  font-family: "Barlow";
-  font-style: normal;
-  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 {
-  font-family: "Barlow";
-  font-style: normal;
-  height: 114px;
-  font-weight: 400;
-  font-size: 2rem;
-  line-height: 38px;
-  text-align: center;
-  margin-bottom: 2rem;
-  margin-top: 4rem;
-  color: #ffffff;
-  width: 30rem;
-}
 
-.title-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
 
 .container {
   height: 30rem;
@@ -150,7 +154,7 @@
       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;
+    url("/images/eventAgenda/eventAgenda.jpg") no-repeat center 70%; 
   background-size: cover;
 }
 

components/Home/Promotion.vue

@@ -87,13 +87,11 @@ const zoomOut = () => {
 .screen {
   width: 900px;
   object-fit: cover;  
-  margin-top: 2rem;
-  margin-right: auto;
-  margin-left: auto;
+  margin: 2rem auto;
   text-align: center;
-  bottom: 25rem;
   border-radius: 20px;
-  transition: transform .2s;
+  transition: transform 0.2s;
+  bottom: 25rem;
 }
 
 .screen:hover {
@@ -111,11 +109,13 @@ const zoomOut = () => {
   letter-spacing: 2.16px;
   text-transform: uppercase;
 }
+
 .icon-title {
   margin-top: 1rem;
   color: #ffffff;
   margin-right: 1rem;
 }
+
 .with-border,
 .with-border-top {
   border-bottom: 1px solid #d1cdc7;
@@ -135,15 +135,12 @@ const zoomOut = () => {
   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;
+  margin-bottom: 1rem;
 }
 
 .text-outil {
@@ -172,13 +169,9 @@ const zoomOut = () => {
   height: 20rem;
   margin-top: 3rem;
   width: 55rem;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 30rem;
+  margin: 3rem auto 30rem;
 }
 
-
-
 .span-color {
   color: #caf5f4;
 }
@@ -190,4 +183,5 @@ const zoomOut = () => {
   height: 5rem;
   border-radius: 5rem;
 }
+
 </style>