Amélioration de la structure de la homepage

src/views/main/HomeView.vue

@@ -32,33 +32,25 @@
       <v-container>
         <v-row>
           <v-spacer></v-spacer>
-          <v-col cols="10" xs="12" sm="12" md="12" lg="12" xl="10" xxl="8">
+          <v-col cols="7" xs="12" sm="10" md="12" lg="10" xl="7" xxl="7">
-            <v-img class="profile-banner" src="../../../images/homepage/bannierehomepage.png"
+            <v-img class="profile-banner banner-homepage" src="../../../images/homepage/bannierehomepage.png"
               style="border-radius: 20px;"></v-img>
           </v-col>
           <v-spacer></v-spacer>
         </v-row>
       </v-container>
 
-
-
-      <!-- Colonnes Créer Partager Inspirer-->
-     
-         
-
-
       <!-- Créer Profiter Inspirer  -->
-          <v-row>
+      <v-container>
-            <v-spacer></v-spacer>
+        <v-row class="d-flex justify-center creer-profiter-inspirer-row">
-            <v-col cols=8>
+          <v-col cols="10" xs="12" sm="10" md="12" lg="10" xl="7" xxl="7">
-              <v-row justify="center" align="center">
+            <v-row justify="center" align="center" class="créer-profiter-inspirer-row">
-                <v-col cols="12" sm="6" md="4">
+              <v-col cols="4" sm="4" md="4">
                 <v-hover v-slot="{ isHovering, props }">
-                    <v-card style="border-radius: 20px; min-width: 325px;" class="mx-auto" v-bind="props">
+                  <v-card style="border-radius: 20px; min-width: 325px;" class="mx-auto card-size" v-bind="props">
                     <v-img src="../../../images/homepage/creer.png"
                       style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
-                      <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
+                    <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065" contained>
-                        contained>
                       <v-container>
                         <v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
                           <h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">CRÉER
@@ -73,13 +65,12 @@
                   </v-card>
                 </v-hover>
               </v-col>
-                <v-col cols="12" sm="6" md="4">
+              <v-col cols="4" sm="4" md="4">
                 <v-hover v-slot="{ isHovering, props }">
-                    <v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto" v-bind="props">
+                  <v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto card-size " v-bind="props">
                     <v-img src="../../../images/homepage/partager.png"
                       style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
-                      <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
+                    <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065" contained>
-                        contained>
                       <v-container>
                         <v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
                           <h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
@@ -95,13 +86,12 @@
                   </v-card>
                 </v-hover>
               </v-col>
-                <v-col cols="12" sm="6" md="4">
+              <v-col cols="4" sm="4" md="4">
                 <v-hover v-slot="{ isHovering, props }">
-                    <v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto"         v-bind="props">
+                  <v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto card-size" v-bind="props">
                     <v-img src="../../../images/homepage/inspirer.png"
                       style="border-radius: 20px; width: 80vw;"></v-img>
-                      <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
+                    <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065" contained>
-                        contained>
                       <v-container>
                         <v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
                           <h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
@@ -120,21 +110,22 @@
               </v-col>
             </v-row>
           </v-col>
-            <v-spacer></v-spacer>
+
         </v-row>
+      </v-container>
 
+      <!-- Votre Hutopy  -->
+      <v-container>
+        <v-row justify="center">
 
-      <!-- Description D'hutopy -->
+          <v-col cols="7" xs="12" sm="12" md="12" lg="10" xl="7" xxl="7">
+            <v-row justify="center">
+              <v-col cols="6" md="7" lg="6">
+                <v-img cols="12" style="margin-top: -5%; min-width: 350px;"
+                  src="../../../images/homepage/votrehutopy.png"></v-img>
 
-      <v-container style="max-width: 65%; min-width: 1150px;" class="custom-width">
-        <v-row class="justify-center">
-          <v-col cols="6">
-            <v-col cols="11" class="d-flex justify-center align-center">
-              <v-img style="margin-top: -5%; min-width: 350px;" src="../../../images/homepage/votrehutopy.png"></v-img>
-            </v-col>
-            <v-col cols="auto" md="10">
                 <p class="text-center text-justify votre_hutopy_fontsize"
-                style="margin-top: 3%; margin-bottom: 5%; max-width: 900px; ">
+                  style="margin-top: 3%; margin-bottom: 5%; max-width: 900px;">
                   Bienvenue sur Hutopy, votre nouvelle frontière de création, de connexion et d'innovation. Au
                   cœur de notre mission réside une ambition audacieuse : transformer l'espace numérique en un
                   écosystème où chaque créateur, chaque rêveur, chaque professionnel, peut non seulement imaginer
@@ -150,32 +141,48 @@
                   autre forme d'expression, Hutopy offre les outils nécessaires pour que chaque vision puisse
                   prendre vie.
                 </p>
-              <v-col cols="auto" class="d-flex justify-center align-center">
+
+                <v-col cols="12" class="text-center">
                   <RouterLink style="width: 450px;" :to="{ name: 'contact' }">
-                  <v-btn size="x-large" style="width: 400px; border-radius: 40px;" color="rgb(107, 0, 101)" outlined
+                    <v-btn size="x-large" style="width: 300px; border-radius: 40px;" color="rgb(107, 0, 101)" outlined
                       elevation="0">
                       Inscription
                     </v-btn>
                   </RouterLink>
                 </v-col>
-            </v-col>
+
               </v-col>
 
-          <!-- Colonne de droite -->
+
-          <v-col cols="3">
+              <v-col cols="6" md="5" lg="6">
-            <v-img src="../../../images/homepage/grinding.png"
+                <v-row justify="center">
-              style="margin-bottom: 4%; border-radius: 30px; width: 80px;"></v-img>
+                  <v-col cols="6" sm="12" md="12" lg="6">
-            <v-img src="../../../images/homepage/girlarmy.png" style="border-radius: 30px; min-width: 250px;"></v-img>
+                    <v-img style="border-radius: 30px;" src="../../../images/homepage/grinding.png"
+                      class="hidden-md-and-down" hidden-and-down></v-img>
+
                   </v-col>
-          <v-col cols="3" style>
+                  <v-col cols="6" sm="12" md="12" lg="6">
-            <v-img src="../../../images/homepage/microphone.png"
+                    <v-img style="border-radius: 30px;" src="../../../images/homepage/microphone.png"></v-img>
-              style="margin-bottom: 4%; border-radius: 30px; min-width: 250px; max-height: auto; height: auto;"></v-img>
+
-            <v-img src="../../../images/homepage/girlvr.png"
+                  </v-col>
-              style="border-radius: 30px; min-width: 250px; max-height: 350;"></v-img>
+                  <v-col cols="6" sm="3" md="12" lg="6">
+                    <v-img style="border-radius: 30px;" src="../../../images/homepage/girlarmy.png"></v-img>
+                  </v-col>
+                  <v-col cols="6" sm="3" md="12" lg="6">
+                    <v-img style="border-radius: 30px;" src="../../../images/homepage/girlvr.png"
+                      class="hidden-md-and-down" hidden-and-down></v-img>
+                  </v-col>
+                </v-row>
+              </v-col>
+            </v-row>
           </v-col>
         </v-row>
       </v-container>
 
+
+
+
+
       <!-- ILS SONT SUR HUTOPY -->
       <v-container style="max-width: 1500px;">
         <v-card-text>
@@ -190,14 +197,11 @@
 
               <v-col>
                 <router-link :to="{ name: 'creatorfolio' }">
-                  <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image  ">
+                  <img src="../../../images/anonymelarge.png" alt="Profile Image" class="profile-image  ">
 
                 </router-link>
                 <RouterLink :to="{ name: 'creatorfolio' }">
-                  <v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
+
-                    color="rgb(107, 0, 101)" outlined elevation="10">
-                    Inscription
-                  </v-btn>
                 </RouterLink>
 
 
@@ -209,10 +213,7 @@
 
                 </router-link>
                 <RouterLink :to="{ name: 'creatorfolio' }">
-                  <v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
+
-                    color="rgb(107, 0, 101)" outlined elevation="10">
-                    Inscription
-                  </v-btn>
                 </RouterLink>
 
 
@@ -221,14 +222,11 @@
 
               <v-col>
                 <router-link :to="{ name: 'creatorfolio' }">
-                  <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
+                  <img src="../../../images/anonymelarge.png" alt="Profile Image" class="profile-image">
 
                 </router-link>
                 <RouterLink :to="{ name: 'creatorfolio' }">
-                  <v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
+
-                    color="rgb(107, 0, 101)" outlined elevation="10">
-                    Inscription
-                  </v-btn>
                 </RouterLink>
 
 
@@ -368,7 +366,8 @@
     </v-snackbar>
 
     <v-list style="background-color: #F4F4F4;" lines="one">
-      <v-list-item v-for=" item  in  itemList " :key="item" :title="item.firstName" :subtitle="item.lastName"></v-list-item>
+      <v-list-item v-for=" item  in  itemList " :key="item" :title="item.firstName"
+        :subtitle="item.lastName"></v-list-item>
     </v-list>
     <FooterLayout></FooterLayout>
   </div>
@@ -594,45 +593,149 @@ body {
   font-size: .2em;
 }
 
-@media (max-width: 475px) {
+@media (max-width: 600px) {
   .votre_hutopy_fontsize {
     font-size: 0.55em;
   }
 }
 
-@media (min-width: 476px) and (max-width: 640px) {
+
+@media (min-width: 601px) and (max-width: 889px) {
   .votre_hutopy_fontsize {
     font-size: 0.9em;
   }
+
+
+  .créer-profiter-inspirer-row {
+    margin-left: -120px;
+    margin-top: -120px
+  }
+
+  .card-size {
+    transform: scale(.7);
+
+  }
+
+  .banner-homepage {
+    transform: scale(1.19)
+  }
+
+
+
 }
 
-@media (min-width: 641px) and (max-width: 768px) {
+
+@media (min-width: 890px) and (max-width: 960px) {
   .votre_hutopy_fontsize {
     font-size: 0.9em;
   }
-}
 
-@media (min-width: 769px) and (max-width: 1024px) {
+  .card-size {
-  .votre_hutopy_fontsize {
+    transform: scale(.75);
-    font-size: 0.9em;
+
   }
-}
 
-@media (min-width: 1025px) and (max-width: 1536px) {
+  .créer-profiter-inspirer-row {
-  .votre_hutopy_fontsize {
+    margin-left: -80px;
-    font-size: 0.9em;
+    margin-top: -130px
   }
+
+  .banner-homepage {
+    transform: scale(1.07)
+  }
+
+
+
 }
 
-@media (min-width: 1537px) and (max-width: 1920px) {
+@media (min-width: 961px) and (max-width: 1280px) {
   .votre_hutopy_fontsize {
     font-size: 1.1em;
   }
+
+  .banner-homepage {
+    transform: scale(1.06)
+  }
+
+  .card-size {
+    transform: scale(.90);
+
+  }
+
+  .créer-profiter-inspirer-row {
+    margin-left: -55px;
+    margin-top: -90px
+  }
+
+  .in-between-image {
+    margin-left: -100px;
+
+  }
+
+
 }
 
-@media (min-width: 1921px) {
+@media (min-width: 1281px) and (max-width: 1920px) {
   .votre_hutopy_fontsize {
-    font-size: 1.5em;
+    font-size: 1.1em;
   }
+
+  .card-size {
+    transform: scale(1);
+  }
+
+
+
+  .banner-homepage {
+    transform: scale(1.03)
+  }
+
+  .créer-profiter-inspirer-row {
+    margin-left: -25px;
+    margin-top: -70px
+  }
+
+}
+
+@media (min-width: 1921px) and (max-width: 2560px) {
+  .votre_hutopy_fontsize {
+    font-size: 1.3em;
+  }
+
+  .créer-profiter-inspirer-row {
+    margin-top: -60px;
+
+  }
+
+
+
+  .banner-homepage {
+    transform: scale(1.0)
+  }
+
+}
+
+@media (min-width: 2561px) {
+  .votre_hutopy_fontsize {
+    font-size: 1.4em;
+
+
+  }
+
+  .créer-profiter-inspirer-row {
+    margin-top: -50px;
+
+  }
+
+
+  .card-size {
+    transform: scale(.98);
+  }
+
+
+  .banner-homepage {
+    transform: scale(.98)
+  }
+
 }
 </style>