Update - ContactView (mise en page du code + nettoyage ) + App.vue(Ajout de v-app pour corriger le background)

src/App.vue

@@ -1,8 +1,10 @@
 <template>
-  <RouterView>
+  <v-app>
+    <RouterView>
 
 
-  </RouterView>
+    </RouterView>
+  </v-app>
 </template>
 
 <script>

src/views/main/ContactView.vue

@@ -1,47 +1,32 @@
 <template>
-
   <!--PC -->
-  <v-app style="background-color: #F4F4F4; ">
+  <div class="hutopy-backgroud-color">
-
-
-
     <div class="hidden-xs flex-col items-center page-margin">
       <v-container>
         <v-row class="text-center align-center row-between-logo-text home-row">
           <v-col xl="7" lg="9" md="11" sm="12" xs="12"> </v-col>
 
-
           <v-col cols="auto">
             <img class="hutopy-header-image" src="../../../images/hutopy.png">
           </v-col>
 
-
           <v-col class="ml-0 text-left ">
             <RouterLink :to="{ name: 'home' }">
-              <v-btn class="home-btn" size="large" color="rgb(107, 0, 101)" outlined elevation="0">
+              <v-btn class="home-btn" size="large" color="rgb(107, 0, 101)" outlined elevation="0"> Accueil</v-btn>
-                Accueil
-              </v-btn>
             </RouterLink>
           </v-col>
-
         </v-row>
       </v-container>
 
-
       <v-container class="row-between-logo-text">
         <v-row>
-
+          <v-spacer></v-spacer>
-          <v-col>
-          </v-col>
 
           <v-col xl="8" lg="11" md="12" sm="12" xs="12">
             <v-row>
-
-
               <v-col>
                 <img class="contact-image" src="../../../images/contactpage/contactpicture.png">
               </v-col>
-
               <v-col class="row-joinus">
 
                 <h1 class="h2-Participez-au-développement">PARTICIPEZ AU DÉVELOPPEMENT</h1>
@@ -54,12 +39,9 @@
                   placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
                 <RouterLink :to="{ name: 'home' }">
                   <v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
-                    class="mt-4 send-btn" block>
+                    class="mt-4 send-btn" block>Envoyez </v-btn>
-                    Envoyez
-                  </v-btn>
                 </RouterLink>
 
-
               </v-col>
             </v-row>
 
@@ -74,7 +56,6 @@
                   inspirer.
 
                 </p>
-
                 <p class="h3-text paragraph {">
                   Faire partie de Hutopy, c'est embrasser une opportunité unique de monétiser votre créativité,
                   d'élargir
@@ -82,12 +63,7 @@
                   profession, d'atteindre un public mondial et de contribuer à un mouvement qui valorise la créativité
                   et
                   l'innovation.
-
-
                 </p>
-
-
-
                 <p class="h3-text h3-last-text paragraph {">
                   Pour embarquer dans ce voyage vers la réalisation de vos rêves et rejoindre notre communauté de
                   créateurs
@@ -99,30 +75,25 @@
                   Votre aventure commence maintenant. Bienvenue dans l'univers Hutopy, où chaque créateur est une étoile
                   dans le ciel de notre utopie partagée.
                 </p>
-
               </v-container>
             </v-row>
-
-          </v-col>
-
-          <v-col>
           </v-col>
 
+          <v-spacer></v-spacer>
         </v-row>
       </v-container>
-
     </div>
 
     <div class="hidden-sm-and-up flex-col items-center justify-center">
 
       <img class="hutopy-header-image" src="../../../images/hutopy.png">
-
       <img class="contact-image" src="../../../images/contactpage/contactpicture.png">
 
       <v-row>
         <v-col cols="7">
           <h1 class="h2-Participez-au-développement">PARTICIPEZ AU DÉVELOPPEMENT</h1>
         </v-col>
+
         <v-col>
           <RouterLink :to="{ name: 'home' }">
             <v-btn class="home-btn" size="large" color="rgb(107, 0, 101)" outlined elevation="0">
@@ -132,7 +103,6 @@
         </v-col>
       </v-row>
 
-
       <v-text-field class="labelsize" label="Nom ($)" style="margin-top: 5%; color: rgb(107, 0, 101);"></v-text-field>
       <v-text-field class="labelsize" label="Courriel ($)" style="color: rgb(107, 0, 101);"></v-text-field>
       <v-textarea class="labelsize" style="color: rgb(107, 0, 101)"
@@ -148,10 +118,6 @@
         </v-btn>
       </RouterLink>
 
-
-
-
-
       <p class="h3-text paragraph">Rejoignez l'aventure
         Hutopy : une
         invitation à façonner l'avenir de la création.
@@ -159,7 +125,6 @@
         plateforme, mais comme une communauté vibrante où chaque créateur devient un architecte de l'utopie
         collective. Ici, votre art, vos idées, et vos rêves trouvent un espace pour s'épanouir, se partager et
         inspirer.
-
       </p>
 
       <p class="h3-text paragraph">
@@ -169,12 +134,8 @@
         profession, d'atteindre un public mondial et de contribuer à un mouvement qui valorise la créativité
         et
         l'innovation.
-
-
       </p>
 
-
-
       <p class="h3-text h3-last-text paragraph">
         Pour embarquer dans ce voyage vers la réalisation de vos rêves et rejoindre notre communauté de
         créateurs
@@ -186,15 +147,11 @@
         Votre aventure commence maintenant. Bienvenue dans l'univers Hutopy, où chaque créateur est une étoile
         dans le ciel de notre utopie partagée.
       </p>
-
-
     </div>
 
-
     <FooterLayout></FooterLayout>
 
-
+  </div>
-  </v-app>
 </template>
 
 
@@ -204,6 +161,10 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
 
 
 <style scoped>
+.hutopy-backgroud-color {
+  background-color: #f4f4f4;
+}
+
 @media (min-width: 150px) and (max-width: 598px) {
   .contact-image {
 
@@ -232,6 +193,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
   .home-btn {
     margin-left: 20%;
     margin-top: 16%;
+    border-radius: 150px;
   }
 
   .paragraph {
@@ -253,7 +215,8 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
 
 }
 
-@media (min-width: 599px) and (max-width: 999px) {
+
+@media (min-width: 599px) and (max-width: 749px) {
 
   .contact-image {
     border-radius: 25px;
@@ -268,7 +231,45 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
     border-radius: 30px;
     width: 180px;
     min-width: 175px;
-    margin-left: 150%;
+    margin-left: 70%;
+  }
+
+  .h2-Participez-au-développement {
+    font-size: 2rem;
+    margin-top: -3%;
+    margin-bottom: 6%;
+  }
+
+
+  .paragraph {
+    font-size: 1.3rem;
+    text-align: justify;
+
+    margin-bottom: 4%;
+    margin-top: 3%;
+  }
+
+
+
+}
+
+
+@media (min-width: 750px) and (max-width: 999px) {
+
+  .contact-image {
+    border-radius: 25px;
+    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
+    max-width: 100%;
+    margin-top: 4%;
+  }
+
+  .home-btn {
+    margin-top: 5%;
+
+    border-radius: 30px;
+    width: 180px;
+    min-width: 175px;
+    margin-left: 74%;
   }
 
   .h2-Participez-au-développement {
@@ -424,7 +425,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
     border-radius: 30px;
     width: 180px;
     min-width: 175px;
-    margin-left: 93%;
+    margin-left: 75%;
     margin-top: 40%;
 
 
@@ -491,7 +492,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
 
   .home-btn {
     margin-top: 5%;
-    margin-left: 95%;
+    margin-left: 47%;
     border-radius: 30px;
     width: 180px;
     min-width: 175px;
@@ -562,7 +563,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
 
   .home-btn {
     margin-top: 5%;
-    margin-left: 66%;
+    margin-left: 33%;
     border-radius: 30px;
     width: 180px;
     min-width: 175px;