Merged PR 4: updated Ui

images/likeicon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100">
+  <image x="4" y="6" width="92" height="84" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAABUCAYAAAAPvFA1AAAF/UlEQVR4nO2dW0gjVxjHk3hh1ULt1rQv3qrVgFC0Col5MYIiGi8PhaQJBvEeLG0KsVraLn0oxZdSWCi0bEzqlVLSJxFEsA9KBaMLKVJ9iGBTjRi7rhUvUdFcygk7YZNMaozfzJxOzg+yyC755js/3PCfb05mBIFAAOvX4ODgtMvlCtBxdnYWWFxcvB4eHv4F93VQL+wbjCU7kpmZmQuNRlNIhN//FTeLi4s3Wq32TZzXIxLwCIVCkarT6f5Sq9XpuK6KV8IRSqXyQWVl5VMMWqGHTx8pFB6PJ9DT09NNPlJYIjMzU6DVan/AsTdeCkfU1dWlGwyGbzFoJQzeCke0tbV9iEEbYfBaeH19fXpvb28vBq2E4LVwREVFxSMM2gjBe+FKpTJfrVanYNBKEN4LLyoqEmZnZ+sxaCUI74UjcnNzdRi0ESQphJeWlpZh0EaQpBBeXFz8CgZtBEkK4WKxGJt1Yi28vb29CKKOWCwWQtSBAGvhEolkGqKO1+uFKAMC1sIbGxulEHX29vYCEHUgwFa4Xq83SKVSkBOW/f39G4g6EGArXCaTfQFVy+l0/gNV675gKVytVj9sbW19A6qe0+nE5goQlsJLSkp+EovFYPXcbvcTsGL3RIgu++AG2mtSW1ubBtHW3t4eOrUnsTAW3d3d79fU1IDIRiwvL5+CN3kPsBNeVVX1jUgE19b6+vpvYMUAwEo42k/S1taWB1UPnfC4XK7PoOpBgJXwgoKCsbw8MN+C1dVV7/T09B9gBQHASnhtbe17kPVWV1f/hKwHATbCOzo6FA0NDQ8gazocDhNkPQiwEV5eXv4kLQ0snATj4PHx8WOwglAYjcaxnZ2dRHaU3Qm07XhwcHCSbvuXSqVK2dra8jPeBAucn58HNjc3/RaL5Vl/f78hcq2C3d1d1pp5cawo4QaD4TF3ipjD6/UGxsbGnqtUqoch4WjjI8tECbdarWd8FE6Bzpwp6SL0X53LjzSdTvdOS0sLNtccmUChUKQ1NTU5UGkknNNZcVlZ2VhGRgaXLbBCR0dHTn9//0cit9vt4bKR5ubmd7k8PlukpKQIpFLpI9Hh4eEhl42Ul5cnxc4BhFwuF4uOjo6cGPSSFOTn5wtFJycn9mQXwRZomCY6PT39NTmWyz1Op9Mvurq6Wrq8vEx2F6xgt9sPRVar1YfOAJNgvZyCTnpsNtvnwYTAdRZPBsxm899ms/nHoHCuszjfWVpaullYWJCgZaaiP15k8deSXQwTTE1NHc/Ozr5ltVpPBNQ8nGRx5ri5ufFSsgWUcJLFmaOrq0uMZijUAYLCSRZnDqFQiE7pv6QOEBROsjizyGSy16kDhLa6ORwOv0QiYWNLWOQxeH8O4PF4BFlZWcF1hyZ1JIszx/X1dah2SDjJ4syBZihU8ZBwrufifAbNUKjlhYSTLM4M1AyFKh4STrI4M1AzFKp4SDjJ4vC8PEOhSKV+oLJ4MlxBZ4PIGQpF6DeczMVhiZyhUIRdMSdZHI7IGQpFmHCSxeGInKFQhAknWRyWl2coFGHCSRaHpaCgIGo2FSacZHFY6L4DGyacZHFY6FJfmHAyF4fFZrMdRRYME06yOBx+vx8J/yqyYNTOVZLFYZicnDwymUzfRRaLEk6y+P1Bj0aYm5srpSuUGvkXZI9K4qCPEfSbjWRbrVbam+JE/YaTLJ4Y29vbgYGBgY87OztzYskW0AknWTwxCgsLhX6//+q2N0cJJ1k8MdB3eORy+de3vTlKOMniiVNdXZ1z25tpb8HE8B4V3u5Lubi4QA/8+E9vtN8gI1k8MeK5AyitcJLFEyOeb3XTCidz8cRYWVl5dtsbaYWTLH53fD6fYG1tLWp2EgmtcDaz+MrKio+tYzHJxMTEc5PJ9P1th6AVzmYWHx8f//TkJOri9v8KNDuZn59/O66eY92h5+DgAPy+IbFuUKPX6z+J90GlOIFuQGOxWA5VKtWr8T78LuY/DA0N/Yzuuw0p22g0TsQ6nkajyRsZGfndbrf7OLhpTtygxwJvbGz4R0dHD/r6+j6409MGAwHBv2b/H8RKg2wvAAAAAElFTkSuQmCC"/>
+</svg>

src/cssstyle/homeView.css

@@ -0,0 +1,49 @@
+.banner-image {
+   
+    margin: 0 auto;
+    width: 100%; /* Augmenter la largeur de l'image */
+    max-height: 40vh; /* Réduire légèrement la hauteur de l'image */
+    object-fit: cover;
+    object-position: center;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Ajouter une ombre à l'image */
+  }
+
+  .banner-images-row {
+    display: flex;
+    justify-content: space-between;
+    gap: 0; /* Supprime l'espacement entre les éléments */
+  }
+  
+  .banner-image-item-wrapper {
+    width: 76%; /* Définit la largeur du conteneur à 20% de la largeur de l'écran */
+    height: auto; /* Garde la hauteur d'origine */
+   
+  
+  }
+  
+  .banner-image-item {
+    width: 100%; /* Définit la largeur de l'image à 100% du conteneur */
+    height: 300x; /* Hauteur fixe pour l'exemple, à ajuster selon vos besoins */
+    object-fit: cover; /* Coupe l'image pour remplir le conteneur tout en conservant les proportions */
+}
+  .dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: white;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    padding: 10px;
+    border-radius: 5px;
+    display: none;
+  }
+  
+  .banner-image-item:hover .dropdown-menu {
+    display: block;
+  }
+
+  .custom-container {
+    width: 40%;
+  }
+
+ 

src/cssstyle/index.css

@@ -1,48 +1,112 @@
-/* Arrière-plan de la page */
-body {
-  background-color: #f0f0f0;
-  /* Couleur d'arrière-plan de la page */
-  margin: 0;
-  /* Supprimer les marges par défaut */
-  padding: 0;
-  /* Supprimer les espaces de remplissage par défaut */
+/* CSS pour ajuster la taille de l'image */
+.img-small {
+  width: 70px;
+  height: 70px;
+}
+
+.img-Logo {
+  width: 200px;
+  height: 70px;
+}
+
+
+.text-custom {
+  color: #000000;
+  /* Couleur de texte spécifique */
+}
+
+/* CSS pour le texte du menu-left */
+.menu-left a {
+  color: #000000;
+  /* Couleur du texte */
+  font-weight: bold;
+  /* Gras */
+  text-decoration: none;
+  /* Pas de soulignement */
+  font-size: 24px;
+  /* Taille de la police en pixels */
+}
+
+/* CSS pour le texte des liens du menu-center */
+.menu-center {
+  display: flex;
+  justify-content: center;
+  /* Centrer les éléments horizontalement */
+  align-items: center;
+  /* Centrer les éléments verticalement */
+  flex: 1;
+  /* Utiliser tout l'espace disponible */
+  margin-right: 8%
+}
+
+/* CSS pour le texte du menu-right */
+.menu-right a {
+  color: #e4e4e4;
+  /* Couleur du texte */
+}
+
+.bg-custom {
+  background-color: #ffffff;
+  /* Définissez la couleur de fond souhaitée */
+}
+
+.textLogo {
+  font-size: 35px;
+  /* Taille de la police en pixels */
+}
+
+
+
+.logo {
+  margin-right: 5px;
+  /* Réduire la marge entre le logo et le texte */
+
+}
+
+.profilePicture {
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
+  /* Ajouter une ombre à la photo */
+  border: 2px solid #a30e79;
+  /* Ajouter une bordure de 2px solide de couleur rouge (#f00) */
+}
+
+.bg-customdarker {
+  background-color: #ffffffa4;
+  /* Définissez la couleur de fond souhaitée */
 }
 
 .top-aligned-column {
   display: flex;
-  flex-direction: row;
-  /* Afficher les colonnes en ligne */
   justify-content: space-between;
-  /* Espacement égal entre les colonnes */
-  align-items: flex-start;
-  /* Aligner le contenu en haut */
-  min-height: 100vh;
-  /* Ajustez selon vos besoins */
-  padding: 20px;
-  /* Ajouter un espace autour du contenu */
-  box-sizing: border-box;
-  /* Inclure le padding dans la hauteur */
-  overflow-y: auto;
-  /* Activer le défilement vertical */
 }
 
-/* Style de la colonne */
 .column {
   flex: 1;
-  /* Chaque colonne occupe autant d'espace que possible */
-  padding: 20px;
-  /* Espacement interne */
 }
 
 .center-column {
-  flex: 1;
-  /* Augmenter la taille de la colonne centrale */
-  background-color: #ffffff;
-  /* Couleur de fond de la colonne */
-  border-radius: 20px;
-  /* Arrondir les coins de la colonne */
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  /* Ajouter une ombre à la colonne */
-  text-align: center;
-  /* Centrer le contenu */
+  flex: 3;
+  /* La colonne centrale occupe 3 fois plus d'espace que les autres */
+}
+
+
+.colum-aligncenter {
+  text-align: center;
+}
+
+.menu-center a:nth-child(1):hover svg {
+  color: rgba(163, 14, 121, 1);
+  /* Changer la couleur en rouge au survol */
+}
+
+/* Pour le deuxième bouton */
+.menu-center a:nth-child(2):hover svg {
+  color: rgba(163, 14, 121, 1);
+  /* Changer la couleur en bleu au survol */
+}
+
+/* Pour le troisième bouton */
+.menu-center a:nth-child(3):hover svg {
+  color: rgba(163, 14, 121, 1);
+  /* Changer la couleur en vert au survol */
 }

src/layouts/CardDonate.vue

@@ -0,0 +1,41 @@
+<template>
+
+
+    <div class="md:flex hidden items-center justify-between flex-col">
+
+    </div>
+
+
+
+
+
+    <div class="md:hidden flex flex-col items-center justify-center">
+        <v-container class=" footer-donate-container">
+
+            <h1 style="text-align: center; color: rgb(107, 0, 101); margin-bottom: 4%;"> ENCOURAGEZ-MOI </h1>
+
+
+            <v-text-field label="Montant"
+                style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
+
+            <v-text-field label="Message"
+                style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
+
+            <v-btn style="margin-bottom: 3px; background-color: rgb(163, 14, 121); color: white;" rounded="xl"
+                size="x-large" block>Faire un don</v-btn>
+
+        </v-container>
+    </div>
+</template>
+
+
+
+
+
+<style>
+.footer-donate-container {
+
+    background-color: rgb(255, 255, 255);
+
+}
+</style>

src/layouts/DefaultLayout.vue

@@ -1,55 +1,111 @@
 <template>
-  <nav class="py-4 px-8 border-b border-gray-200 bg-custom">
-    <div class="max-w-7xl mx-auto">
-      <div class="flex items-center justify-between">
-        <div class="menu-left flex items-center">
-          <router-link :to="{ name: 'home' }">
-            <img src="/images/Chevron.png" class="img-small mr-2 logo" alt="Logo">
-          </router-link>
-          <router-link :to="{ name: 'home' }">
-            <h1 class="textLogo">HUTOPIA</h1>
+  <div class="md:flex hidden items-center justify-between flex-col">
+    <!-- Version pour ordinateur -->
+    <v-container style="z-index: 2000;">
+      <v-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;">
 
-          </router-link>
+        <v-card-text justify="end" style="max-width: 22%; margin-top: .2%; margin-bottom: -1.2%;">
+          <v-text-field append-inner-icon="mdi-magnify" density="compact"
+            label="Recherche et comptes (Non fonctionnel pour le moment)" variant="solo" hide-details single-line
+            ></v-text-field>
+        </v-card-text>
 
-        </div>
-        <div class="menu-center flex space-x-12">
+        <v-col cols="2" class="d-flex align-center">
+          <router-link :to="{ name: 'yourprofile' }">
+            <v-row class="d-flex align-center">
+              <img src="/images/anonyme.png" class="img-small mr-2 logob rounded-full img-small profilePicture"
+                alt="Logo">
+              <h1 class="mb-0 text-h5">ANONYME</h1>
+            </v-row>
+          </router-link>
+        </v-col>
+      </v-row>
+
+    </v-container>
+
+  </div>
+
+
+  <!-- Version pour mobile -->
+  <div class="md:hidden flex flex-col items-center justify-center">
+    <v-container style="margin-top: -20px;">
+      <v-row>
+
+
+        <v-col cols="auto">
+          <!-- Logo -->
+          <router-link :to="{ name: 'home' }">
+            <img src="/images/Chevron2.png" class="img-Logo mr-2 logo rounded-full" alt="Logo">
+          </router-link>
+        </v-col>
+        <v-spacer></v-spacer> <!-- Espace flexible pour pousser la photo de profil à droite -->
+        <v-col cols="auto">
+          <!-- Photo de profil -->
+          <router-link :to="{ name: 'yourprofile' }" class="text-green-700">
+            <img src="/images/pascal.jpg" class="img-small mr-2 logob rounded-full img-small profilePicture" alt="Logo">
+          </router-link>
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <v-container class="text-center" style="margin-top: -30px;">
+      <v-row class="justify-center">
+
+        <!-- Premier lien avec icône -->
+        <v-col cols="auto" class="mx-4">
           <router-link :to="{ name: 'home' }" class="text-green-700">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-              stroke="currentColor" class="w-8 h-8 text-custom">
+              stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
               <path stroke-linecap="round" stroke-linejoin="round"
                 d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
             </svg>
           </router-link>
+        </v-col>
+        <!-- Deuxième lien avec icône -->
+        <v-col cols="auto" class="mx-4">
           <router-link :to="{ name: 'contact' }" class="text-green-700">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-              stroke="currentColor" class="w-8 h-8 text-custom">
+              stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
               <path stroke-linecap="round" stroke-linejoin="round"
                 d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" />
             </svg>
           </router-link>
+        </v-col>
+        <!-- Troisième lien avec icône -->
+        <v-col cols="auto" class="mx-4">
           <router-link :to="{ name: 'creatorfolio' }" class="text-green-700">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-              stroke="currentColor" class="w-8 h-8 text-custom">
+              stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
               <path stroke-linecap="round" stroke-linejoin="round"
                 d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
             </svg>
           </router-link>
-        </div>
+        </v-col>
+
+
+
         <div v-if="user">
             Hello, {{ user.email }}
         </div>
-        <div class="menu-right">
-          <router-link :to="{ name: 'yourprofile' }">
-       
-            <img src="/images/anonyme.png" class="img-small mr-2 logob rounded-full img-small" alt="Logo">
-          </router-link>
-        </div>
         <v-btn color="red" variant="text" @click="logout()">Logout</v-btn>
-      </div>
-    </div>
-  </nav>
 
-  <main class="px-8 py-6 bg-gray-100">
+
+
+        <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: 20px;"></div>
+
+      </v-row>
+
+
+    </v-container>
+  </div>
+
+
+
+
+
+
+
+  <main class="px-8 py-3 ">
     <router-view />
   </main>
 </template>
@@ -61,7 +117,6 @@ import { useRouter } from 'vue-router';
 const authStore = useAuthStore();
 const router = useRouter()
 
-
 const logout = () => {
   authStore.logout();
   router.push('/login');
@@ -70,60 +125,4 @@ const logout = () => {
 const user = authStore.user;
 </script>
 
-<style>
-/* CSS pour ajuster la taille de l'image */
-.img-small {
-  width: 70px;
-  height: 70px;
-}
-
-.text-custom {
-  color: #000000;
-  /* Couleur de texte spécifique */
-}
-
-/* CSS pour le texte du menu-left */
-.menu-left a {
-  color: #000000;
-  /* Couleur du texte */
-  font-weight: bold;
-  /* Gras */
-  text-decoration: none;
-  /* Pas de soulignement */
-  font-size: 24px;
-  /* Taille de la police en pixels */
-}
-
-/* CSS pour le texte des liens du menu-center */
-.menu-center {
-  display: flex;
-  justify-content: center;
-  /* Centrer les éléments horizontalement */
-  align-items: center;
-  /* Centrer les éléments verticalement */
-  flex: 1;
-  /* Utiliser tout l'espace disponible */
-}
-
-/* CSS pour le texte du menu-right */
-.menu-right a {
-  color: #e4e4e4;
-  /* Couleur du texte */
-}
-
-.bg-custom {
-  background-color: #ffffff;
-  /* Définissez la couleur de fond souhaitée */
-}
-
-.textLogo {
-  font-size: 35px;
-  /* Taille de la police en pixels */
-}
-
-.logo {
-  margin-right: 5px;
-  /* Réduire la marge entre le logo et le texte */
-
-}</style>
-  @/plugins/store/authStore
+<style src="../cssstyle/index.css"></style>

src/layouts/FooterLayout.vue

@@ -0,0 +1,104 @@
+<template>
+  <div style="background-color: rgb(107, 0, 101, 1); min-height: 10vh; display: flex; flex-direction: column;">
+    <v-container style="background-color: rgb(107, 0, 101, 1);">
+      <v-row justify="center" style="margin-top: 30px;">
+        <v-row cols="auto" class="d-flex justify-center">
+
+          <a href="https://www.facebook.com/profile.php?id=61556819217561"><img src="../../../images/facebookicon.png"
+              alt="Description image 2" style="width: 50px; height: 50px; margin-right: 40px;"></a>
+          <a href="https://www.instagram.com/hutopy.inc/"><img src="../../../images/instafacebook.png"
+              alt="Description image 3" style="width: 50px; height: 50px; margin-right:40px;"></a>
+          <router-link :to="{ name: 'home' }">
+            <img src="../../../images/ChevronBlanc.png" alt="Description image 1"
+              style="width: 50px; height: 50px; margin-right: 40px;">
+          </router-link>
+        </v-row>
+      </v-row>
+    </v-container>
+
+    <v-container class="text-center" style="flex-grow: 1;">
+      <v-btn v-for="link in links" :key="link" class="mx-2" color="white" rounded="xl" variant="text">
+        {{ link }}
+      </v-btn>
+    </v-container>
+
+    <v-container class="text-white text-center">
+      {{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong>
+    </v-container>
+
+
+    <v-container class="custom-footer">
+    </v-container>
+
+  </div>
+</template>
+
+
+
+<script>
+export default {
+  data: () => ({
+    links: [
+      'Aide & Contact',
+      'Conditions générales',
+      'Politique des contenus',
+      'Programme Ambassadeurs',
+      'conditions utilisation',
+      'anti-exploitation',
+    ],
+  }),
+}
+</script>
+
+<style>
+.custom-footer {
+  background-color: rgb(107, 0, 101, 1);
+  padding: 10px;
+  /* Ajoute un rembourrage intérieur de 10px autour du contenu du footer */
+  margin: 0;
+  /* Réinitialise les marges à zéro */
+}
+
+.no-margin {
+  margin: 0 !important;
+  /* Annule la marge de v-app */
+}
+
+footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  /* Pour aligner le contenu verticalement */
+  background-color: rgba(107, 0, 101, 1);
+}
+
+footer a:not(:last-child) {
+  margin-right: 20px;
+  /* Ajoute de l'espace entre les images et les liens */
+}
+
+.footertextcolor {
+  margin-top: 5px;
+  margin-bottom: 40px;
+  color: azure;
+}
+
+.socialiconspacer {
+  margin-top: 25px;
+}
+
+.custom-color-button {
+  background-color: rgb(255, 0, 0);
+  /* Your custom color */
+  color: white;
+  /* Text color */
+  font-size: 1.5rem;
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+
+.background {
+  background-color: rgba(107, 0, 101, 1);
+}
+</style>

src/layouts/FormInscriptionBeta.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+
+  </div>
+
+</template>
+
+
+
+<script setup>
+</script>
+
+<style>
+.h1-inscription-beta-Inscrivez-vous {
+  font-size: 20px;
+  /* Taille de la police de 20 pixels */
+  font-weight: bold;
+  /* Texte en gras */
+  text-align: center;
+  /* Centrer le texte */
+  margin-top: 5px;
+  margin-bottom: 15px;
+}
+</style>

src/layouts/SimpleVideoCard.vue

@@ -0,0 +1,36 @@
+<template>
+    <v-card class="vcard-descriptions-mobile" style="margin-top: 30px;">
+
+        <h1 class="h1profilemobile">Podcast #01</h1>
+
+
+        <h2 clase="card-date" style="margin-bottom: 4%; text-align: right; margin-right: 5%;">10-03-2024 </h2>
+        <iframe width="420" height="315" src="https://www.youtube.com/embed/CDlj1IUhBqg?si=ot1YPBMKbmviOXvD">
+        </iframe>
+
+        <p class="text-justify pa-4" style="font-size: 1.2em">
+            Voici mon nouveau podcast!
+
+        </p>
+    </v-card>
+</template>
+
+<style>
+.vcard-descriptions-mobile {
+    box-shadow: 0 6px 9px rgba(0, 0, 0, 0.6);
+
+}
+
+.h1profilemobile {
+    font-size: 2rem;
+    text-align: center;
+
+    color: rgba(163, 14, 121, 0.85);
+
+
+}
+
+.card-date {
+    text-align: right;
+}
+</style>

src/router/index.js

@@ -5,6 +5,7 @@ import LoginView from '../views/LoginView.vue'
 import ContactView from '../views/main/ContactView.vue'
 import CreatorFolio from '../views/main/CreatorFolio.vue'
 import YourProfile from '../views/main/YourProfile.vue'
+import ProjectRoadmap from '@/views/main/ProjectRoadmap.vue'
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
@@ -38,6 +39,11 @@ const router = createRouter({
       name: 'login',
       component: LoginView
     },
+    {
+      path: '/roadmap',
+      name: 'roadmap',
+      component: ProjectRoadmap
+    },
 
 
   ]

src/views/main/ContactView.vue

@@ -1,28 +1,192 @@
 <template>
-  <DefaultLayout></DefaultLayout>
-  <main class="top-aligned-column">
 
 
-    <div class="column">
+  <!--PC -->
+  <div class="md:flex hidden items-center justify-between flex-col">
+    <v-container style="margin-bottom: -.1%; margin-top: 2%;">
+      <v-row justify="center">
+        <v-col style="margin-left: 4%;" cols="6">
+          <img src="../../../images/hutopyblack.png" height="100px">
+        </v-col>
+      </v-row>
+
+      <v-row style="margin-bottom: -4%;" justify="end">
+        <v-col cols="auto">
+          <router-link :to="{ name: 'home' }">
+            <v-btn size="x-large" style="min-width: 200px; max-width: 200px;" elevation="0">
+              Accueil
+            </v-btn>
+          </router-link>
+        </v-col>
+      </v-row>
+
+
+
+
+
+
+
+    </v-container>
+
+    <img src="../../../images/homepage/bannierenousjoindre.png" class="banner-image" alt="Bannière"
+      style="min-height: 500px; margin-top: 3%;">
+
+
+
+
+    <main class="top-aligned-column grid grid-cols-3 gap-4">
+
+      <div class="column"></div>
+      <div class="center-column" style="width: 100vw; margin: auto;">
+        <h1 style="font-size: 3rem; margin-top: 7%; margin-bottom: 7%;" class="h1-inscription-beta">Participez au
+          développement de </h1>
+
+        <div class="grid grid-cols-2 gap-4" style="margin-bottom: 10%;">
+          <div class="rectangular-image h-full flex justify-center items-center">
+
+            <img src="../../../images/homepage/love.png" alt="Bannière" class="contactpicture" style="float: right;">
+
+          </div>
+
+          <div>
+
+
+
+            <p class="para-inscription" style="margin-top: 4%; font-size: 1.4rem;">
+              Étant au début de notre projet, vous pouvez nous contacter pour être ajouté à la liste des ambassadeurs et
+              nous aider à créer la plateforme de vos rêves pour partager votre contenu. Nous recherchons des personnes
+              passionnées et qui ont une vision d'un monde meilleur. Aidez-nous à grandir en nous donnant vos
+              rétroactions afin que l'on puisse développer des outils qui seront uniques pour les créateurs et les
+              utilisateurs de la plateforme. Nous voulons créer un réseau social qui fera une différence dans ce monde.
+            </p>
+
+            <v-text-field label="Nom ($)"
+              style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
+
+            <v-text-field label="Courriel ($)"
+              style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
+
+            <v-textarea style="color: rgb(107, 0, 101)" label="Pourquoi voulez-vous participer au développement"
+              placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
+
+            <v-textarea style="color: rgb(107, 0, 101)" label="Avez-vous déjà des comptes sur les réseaux sociaux ?"
+              placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
+
+            <v-btn style=" margin-bottom: 45px; background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
+              class="mt-4" block>Envoyez</v-btn>
+          </div>
+        </div>
+      </div>
+
+      <div class="column"></div>
+    </main>
+  </div>
+
+
+  <!-- Mobile -->
+
+  <v-container style="margin-top: -100px;">
+
+    <div class="md:hidden flex flex-col items-center justify-center">
+      <DefaultLayout></DefaultLayout>
+      <h1 class="h1-inscription-betacolor" style="margin-bottom: 35px;">Hutopy</h1>
+
+
+
+      <div class="w-screen flex justify-center" style="margin-left: -5px; margin-right: -5px;">
+        <img src="../../../images/contactpicturemobile.png" alt="Bannière">
+      </div>
+      <p class="text-justify pa-4" style="font-size: 1em;">
+        Étant au début de notre projet, vous pouvez nous contacter pour être ajouté à la liste des ambassadeurs et
+        nous aider à créer la plateforme de vos rêves pour partager votre contenu. Nous recherchons des personnes
+        passionnées et qui ont une vision d'un monde meilleur. Aidez-nous à grandir en nous donnant vos
+        rétroactions afin que l'on puisse développer des outils qui seront uniques pour les créateurs et les
+        utilisateurs de la plateforme. Nous voulons créer un réseau social qui fera une différence dans ce monde.
+      </p>
+
+      <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-bottom: 20px;">
+      </div>
+
+      <FormInscriptionBeta></FormInscriptionBeta>
+
+      <v-btn style=" background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4"
+        block>Envoyez</v-btn>
+
+
 
     </div>
+  </v-container>
 
-    <div class="center-column column">
-      <p>Contact2</p>
-    </div>
-
-    <div class="column">
-
-    </div>
-  </main>
+  <FooterLayout></FooterLayout>
 </template>
 
+
 <script setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
-
-
-
+import FooterLayout from '@/layouts/FooterLayout.vue';
+import FormInscriptionBeta from '@/layouts/FormInscriptionBeta.vue';
 </script>
 
+<style scoped>
+.contactpicture {
+  height: 800px;
+  width: auto;
 
+  /* ajustez cette valeur selon votre besoin */
+  margin-bottom: 45px;
+  border-radius: 12px;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);
+  /* ombre avec 2px de décalage vertical, 4px de flou et couleur noire transparente */
+  z-index: 2;
+  /* Met l'image derrière */
+}
 
+.mallowbanner {
+
+  top: 0;
+  left: 0;
+  z-index: -2;
+  /* Met l'image derrière */
+  margin-top: 5.5vw;
+  /* ajustez cette valeur selon votre besoin */
+  margin-bottom: 4.5vw;
+  margin-left: -1.0vw;
+}
+
+.center-column {
+  width: 70vw;
+  /* ajustez cette valeur selon votre besoin */
+  margin: auto;
+  /* centre le contenu horizontalement */
+}
+
+.h1-inscription-beta {
+  font-size: 25px;
+  /* Taille de la police de 20 pixels */
+  font-weight: bold;
+  /* Texte en gras */
+  text-align: center;
+  /* Centrer le texte */
+  margin-top: 20px;
+  margin-bottom: 5px;
+
+}
+
+.h1-inscription-betacolor {
+  font-size: 65px;
+  /* Taille de la police de 20 pixels */
+  font-weight: bold;
+  /* Texte en gras */
+  text-align: center;
+  /* Centrer le texte */
+
+  margin-bottom: 25px;
+  color: rgba(163, 14, 121, 0.85);
+  /* Couleur du texte (utilisez la couleur souhaitée) */
+}
+
+.para-inscription {
+  margin-bottom: 20px;
+  text-align: justify;
+}
+</style>

src/views/main/CreatorFeed.vue

@@ -0,0 +1,16 @@
+<v-container>
+    <v-container>
+      <div>
+        <img src="../../../images/guillaimeaime.png" class="banner-creator "
+          style="width: 98.25%; height: 100%; object-fit: cover; border-top-left-radius: 50px; border-top-right-radius: 50px;">
+      </div>
+
+      <v-countainer >
+        <v-card style="width: 100%; height: 600px;"> 
+
+        </v-card>
+
+
+      </v-countainer>
+    </v-container>
+  </v-container>

src/views/main/CreatorFolio.vue

@@ -1,23 +1,584 @@
 <template>
   <DefaultLayout></DefaultLayout>
-  <main class="top-aligned-column">
+
+  <!-- PC-->
+  <div class="md:flex hidden items-center justify-between flex-col">
+
+    <!-- Banner + Profile-->
+    <div style="margin-top: -1.6%;">
+      <v-row>
+        <v-col cols="12">
+          <img src="../../../images/guillaimeaime3x.png" class="banner-image" alt="Bannière"
+            style="width: 100vw; border-top: 5px solid rgba(107, 0, 101, 1);">
 
 
-    <div class="column">
-
+        </v-col>
+      </v-row>
     </div>
 
-    <div class="center-column column">
-      <p>CreatorFolio YOOOOOOO</p>
-    </div>
+    <v-card class="label-paiement-color"
+      style="max-width: 75%; max-height: 350px; min-width: 340px; position: sticky; top: 0;">
+    </v-card>
 
-    <div class="column">
 
-    </div>
-  </main>
+
+    <v-container class="pa-0">
+      <v-row no-gutters class="justify-center">
+        <!-- Left menu -->
+        <v-col cols="2" class="mx-0">
+          <v-container style="position: sticky; top: 0;">
+            <v-img src="../../../images/hutopy.png" alt="Description de l'image" width="300"
+              style="margin-bottom: 6%; margin-top: 10%; height: 150px;" class="mx-auto"></v-img>
+
+            <RouterLink :to="{ name: 'home' }">
+              <v-btn size="x-large" style="min-width: 370px; max-width: 370px;" elevation="0">
+                <v-icon left class="icon-size" style="margin-left: -95%;">mdi-home</v-icon>
+                Accueil
+              </v-btn>
+            </RouterLink>
+
+            <RouterLink :to="{ name: 'contact' }">
+              <v-btn size="x-large" style="min-width: 370px; max-width: 370px;" elevation="0">
+                <v-icon left class="icon-size">mdi-account-plus</v-icon>
+                Ajouter des amis
+              </v-btn>
+            </RouterLink>
+
+            <RouterLink :to="{ name: 'creatorfolio' }">
+              <v-btn size="x-large" style="min-width: 370px; max-width: 370px;" elevation="0">
+                <v-icon left class="icon-size" style="margin-left: -75%;">mdi-newspaper</v-icon>
+                Contenu
+              </v-btn>
+            </RouterLink>
+
+
+          </v-container>
+        </v-col>
+
+        <!-- center menu -->
+
+        <v-col cols="7" class="mx-0">
+
+
+
+
+          <v-card class="flow-menu m-0"
+            style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%;">
+
+
+
+
+            <div class="card-header"> <!-- Div pour l'en-tête de la carte -->
+              <v-col>
+                <h1 class="text-center" style=" margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
+                  MA MISSION</h1>
+              </v-col>
+
+              <v-col>
+                <h1 style="margin-top: 5%; margin-left: -20%;" class="card-date text-left">
+                  10-03-2024</h1>
+              </v-col>
+
+              <v-col style="margin-right: 4%;" class="text-right">
+                <v-btn dense icon color="white" style="margin-right: 5px;"><v-icon
+                    style="color: rgb(0, 0, 0);">mdi-pencil</v-icon></v-btn>
+              </v-col>
+            </div>
+
+
+            <div
+              style="background-color: rgba(255, 255, 255, 0.1); margin-left: -4%; margin-right: -4%; margin-bottom: -5%;">
+              <v-container>
+
+                <iframe width=100% height="650px" src="https://www.youtube.com/embed/CDlj1IUhBqg?si=ot1YPBMKbmviOXvD">
+                </iframe>
+
+
+                <p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1.2em">Ma mission est claire :
+                  mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une
+                  histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de
+                  créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que
+                  derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et
+                  comprises. Et toi, quel est ton objectif pour cette année?</p>
+
+                <div
+                  style="margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+                </div>
+
+                <v-row>
+                  <v-row class="fill-height">
+                    <!-- Bouton Like -->
+                    <v-col cols="3" class="text-center" style="margin-left: 3%;">
+                      <v-btn size="x-large" style="width: 500;" elevation="0">
+                        <v-icon left class="icon-size">mdi-thumb-up</v-icon>
+                        Aime
+                      </v-btn>
+                    </v-col>
+                    <!-- Bouton Dislike -->
+                    <v-col cols="3" class="text-center">
+                      <v-btn size="x-large" style="width: 500; margin-left: 40%;" elevation="0">
+                        <v-icon left class="icon-size">mdi-thumb-down</v-icon>
+                        Je n'aime pas
+                      </v-btn>
+                    </v-col>
+                    <!-- Bouton Partager -->
+                    <v-col cols="3" class="text-center">
+                      <v-btn size="x-large" style="width: 500; margin-left: 80%;" elevation="0">
+                        <v-icon left class="icon-size">mdi-share-variant</v-icon>
+                        Partagez
+                      </v-btn>
+                    </v-col>
+                  </v-row>
+
+
+                </v-row>
+
+
+
+                <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+                </div>
+
+                <!-- Champ Commentaire -->
+
+                <v-text-field style="margin-left: 2%;"
+                  placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
+
+
+              </v-container>
+            </div>
+          </v-card>
+
+
+
+          <v-card class="flow-menu m-0"
+            style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%;">
+
+
+
+
+            <div class="card-header"> <!-- Div pour l'en-tête de la carte -->
+              <v-col>
+                <h1 class="text-center" style=" margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
+                  MA MISSION</h1>
+              </v-col>
+
+              <v-col>
+                <h1 style="margin-top: 5%; margin-left: -20%;" class="card-date text-left">
+                  10-03-2024</h1>
+              </v-col>
+
+              <v-col style="margin-right: 4%;" class="text-right">
+                <v-btn dense icon color="white" style="margin-right: 5px;"><v-icon
+                    style="color: rgb(0, 0, 0);">mdi-pencil</v-icon></v-btn>
+              </v-col>
+            </div>
+
+
+            <div
+              style="background-color: rgba(255, 255, 255, 0.1); margin-left: -4%; margin-right: -4%; margin-bottom: -5%;">
+              <v-container>
+
+                <v-img
+                  style="margin-top: -2%; border-top: 6px solid rgb(107, 0, 101); border-bottom: 6px solid rgb(163, 14, 121);"
+                  src="../../../images/guillaumepublication.jpg"></v-img>
+
+
+                <p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1.2em">Ma mission est claire :
+                  mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une
+                  histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de
+                  créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que
+                  derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et
+                  comprises. Et toi, quel est ton objectif pour cette année?</p>
+
+                <div
+                  style="margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+                </div>
+
+                <v-row>
+                  <v-row class="fill-height">
+                    <!-- Bouton Like -->
+                    <v-col cols="3" class="text-center" style="margin-left: 3%;">
+                      <v-btn size="x-large" style="width: 500;" elevation="0">
+                        <v-icon left class="icon-size">mdi-thumb-up</v-icon>
+                        Aime
+                      </v-btn>
+                    </v-col>
+                    <!-- Bouton Dislike -->
+                    <v-col cols="3" class="text-center">
+                      <v-btn size="x-large" style="width: 500; margin-left: 40%;" elevation="0">
+                        <v-icon left class="icon-size">mdi-thumb-down</v-icon>
+                        Je n'aime pas
+                      </v-btn>
+                    </v-col>
+                    <!-- Bouton Partager -->
+                    <v-col cols="3" class="text-center">
+                      <v-btn size="x-large" style="width: 500; margin-left: 80%;" elevation="0">
+                        <v-icon left class="icon-size">mdi-share-variant</v-icon>
+                        Partagez
+                      </v-btn>
+                    </v-col>
+                  </v-row>
+
+
+                </v-row>
+
+
+
+                <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+                </div>
+
+                <!-- Champ Commentaire -->
+
+                <v-text-field style="margin-left: 2%;"
+                  placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
+
+
+              </v-container>
+            </div>
+          </v-card>
+
+
+        </v-col>
+
+        <!-- Right menu -->
+        <v-col cols="2" class="mx-0">
+
+          <!-- Profile menu -->
+          <v-card
+            style="margin-top: -25%; border-top-left-radius: 25px; border-top-right-radius: 25px; height: auto; max-height: 400; min-width: 200; min-height: 325; position: sticky; top: 0;">
+
+            <v-container class="text-center" style="background-color: #6b0065; margin-bottom: -10px;">
+              <h1 style="font-size:3rem; color: white;">
+                Je soutiens!
+              </h1>
+            </v-container>
+
+            <v-img src="../../../images/guillaume.jpg"></v-img>
+
+            <v-container style="background-color: #6b0065; margin-bottom: -1px">
+              <h1 style="font-size:1.5rem; color: white;">Guillaume Mousseau</h1>
+            </v-container>
+
+            <v-container style="background-color: #a30e79;">
+              <h1 style="font-size:1.5rem; color: white;">Créateur de contenus</h1>
+            </v-container>
+
+            <v-expansion-panels style="margin-top: -50px;">
+              <v-expansion-panel
+                text="Ma mission est claire : mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?"
+                title="À propos"></v-expansion-panel>
+            </v-expansion-panels>
+
+            <v-row style="margin-top: 20px;">
+              <v-col cols="6">
+                <v-sheet class="mx-auto" width="150">
+                  <v-form @submit.prevent>
+                    <v-text-field label="Montant ($)"
+                      style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
+                  </v-form>
+                </v-sheet>
+              </v-col>
+              <v-col cols="6">
+                <v-btn
+                  style=" margin-left: -15px; background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
+                  class="mt-4" block>Envoyez</v-btn>
+              </v-col>
+            </v-row>
+
+            <v-row>
+              <v-textarea style="color: rgb(107, 0, 101)" label="Votre message" placeholder="Écrivez votre message ici"
+                rows="3" auto-grow></v-textarea>
+            </v-row>
+
+            <v-container>
+              <v-row justify="center" style="margin-top: 10px;">
+                <router-link to="lien_facebook" class="mr-13">
+                  <img src="../../../images/facebook.svg" alt="Facebook" width="40">
+                </router-link>
+                <router-link to="lien_tiktok" class="mr-13">
+                  <img src="../../../images/tiktok.svg" alt="TikTok" width="40">
+                </router-link>
+                <router-link to="lien_instagram" class="mr-13">
+                  <img src="../../../images/instagram.svg" alt="Instagram" width="40">
+                </router-link>
+                <router-link to="lien_x">
+                  <img src="../../../images/x.svg" alt="X" width="40">
+                </router-link>
+              </v-row>
+            </v-container>
+
+
+
+
+
+
+          </v-card>
+
+
+
+
+        </v-col>
+      </v-row>
+    </v-container>
+
+
+
+
+
+
+
+
+
+  </div>
+
+
+
+  <!-- DonateMobile-->
+  <div class="md:hidden flex flex-col items-center justify-center">
+
+    <v-container style="width: 105%;">
+      <v-card class="vcard-descriptions-mobile">
+        <h1 class="h1profilemobile">Ma mission</h1>
+        <h2 clase="card-date" style="margin-bottom: 4%; text-align: right; margin-right: 5%;">10-03-2024 </h2>
+
+        <v-img src="../../../images/guillaumepublication.jpg"></v-img>
+
+
+
+
+
+        <p class="text-justify pa-4" style="font-size: 1.2em">Ma mission est claire : mettre en lumière le côté humain
+          des entrepreneurs. Chaque
+          service,
+          chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif
+          est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs
+          et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui
+          méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?</p>
+
+      </v-card>
+
+      <SimpleVideoCard> </SimpleVideoCard>
+
+
+
+    </v-container>
+
+    <v-container class="footer-donate footer-donate-container" style=" position: sticky; top: 0; margin-bottom: -4%;">
+
+      <h1 class="tips-h1" style="margin-bottom: 1%;">ENCOURAGEZ-MOI</h1>
+
+
+
+      <v-btn style=" background-color: rgb(163, 14, 121); color: white;" rounded="xl" size="small" block>Faire un
+        don</v-btn>
+
+    </v-container>
+
+
+
+
+
+  </div>
+
+
+
+
+
+
+
+  <FooterLayout></FooterLayout>
+
 </template>
 
 <script setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
+import FooterLayout from '@/layouts/FooterLayout.vue';
+
+
+
+import SimpleVideoCard from '@/layouts/SimpleVideoCard.vue';
+
 </script>
 
+<script>
+export default {
+  data() {
+    return {
+      overlayMenu: false,
+    };
+  },
+};
+</script>
+
+<style scoped>
+/*Banner */
+.image-container {
+  width: 100%;
+  overflow: hidden;
+}
+
+.image-banner {
+
+  width: 90%;
+  /* 100% de la largeur de la fenêtre visible */
+  margin: 0;
+  /* Enlève les marges par défaut */
+  z-index: -1000;
+  /* Met l'image en arrière-plan */
+
+
+}
+
+/*Profile */
+
+.image-profile {
+  border-radius: 50%;
+
+  margin-left: 15%;
+  margin-top: -7%;
+  border: 10px solid white;
+  z-index: 9999;
+
+}
+
+.description-text {
+  font-size: 1.3rem;
+  text-align: left;
+  align-items: center;
+  color: white
+}
+
+
+/*LeftMenu */
+.icon-size {
+  font-size: 30px;
+  /* ou toute autre taille de votre choix */
+}
+
+
+
+
+.sticky-column {
+  position: sticky;
+  top: 0;
+
+
+}
+
+.profile-picture-position {
+  margin-top: 25;
+}
+
+.label-paiement-color {
+  color: rgba(163, 14, 121, 0.5);
+  /* Couleur du texte (utilisez la couleur souhaitée) */
+  background-color: rgba(255, 255, 255, 0.2);
+  /* Couleur de fond */
+  box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
+  /* Ombre */
+
+}
+
+.card-header {
+  background-color: rgba(255, 255, 255, 0.6);
+  /* Couleur de l'en-tête */
+  padding: 10px;
+  /* Marge intérieure */
+  display: flex;
+  /* Utilisation de flexbox */
+  justify-content: space-between;
+  /* Alignement des éléments sur l'en-tête */
+  margin: 0 -24px 0;
+
+}
+
+.tips-h1 {
+  text-align: center;
+  font-weight: bold;
+  color: rgba(163, 14, 121, 0.85);
+  /* Couleur du texte (utilisez la couleur souhaitée) */
+  font-size: 25px;
+}
+
+.test-color {
+  background-color: rgba(163, 14, 121, 0.1);
+}
+
+
+.label-tips {
+  box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
+}
+
+
+
+.menu-creator-position {
+  margin-top: -25px;
+  position: relative;
+}
+
+
+
+
+.flow-menu {
+  background-color: rgba(255, 255, 255, 0.3);
+  box-shadow: 0 6px 9px rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+}
+
+
+
+
+
+
+.smooth-picture {
+  border-radius: 13px;
+}
+
+.column-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.column-creatorFolio {
+  flex-grow: 1.2;
+  /* La colonne centrale peut agrandir de 20% */
+  flex-shrink: 0;
+  /* Empêche la colonne centrale de rétrécir */
+  flex-basis: auto;
+  /* La colonne centrale prend sa taille de base */
+
+  text-align: center;
+  width: 100%;
+}
+
+.column-creatorFolio-side {
+  flex-grow: 0;
+  /* Les colonnes latérales ne peuvent pas agrandir */
+  flex-shrink: 0;
+  /* Empêche les colonnes latérales de rétrécir */
+  flex-basis: 200px;
+  /* Largeur fixe pour les colonnes latérales */
+  text-align: center;
+}
+
+.rgb-background {
+  background-color: rgba(163, 14, 121, 0.1);
+  width: 300px;
+  padding: 20px;
+}
+
+.top-aligned-column {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.center-column {
+  text-align: center;
+}
+
+.column {
+  flex: 1;
+}
+</style>

src/views/main/CreatorFolioLeftMenu.vue

@@ -0,0 +1,64 @@
+<template>
+    <v-card
+      class="mx-auto"
+      width="256"
+    >
+      <v-layout>
+        <v-navigation-drawer absolute permanent>
+         <h1>Test</h1>
+  
+          <v-divider></v-divider>
+  
+          <v-list
+            :lines="false"
+            density="compact"
+            nav
+          >
+            <v-list-item
+              v-for="(item, i) in items"
+              :key="i"
+              :value="item"
+              color="primary"
+              
+            >
+              <template v-slot:prepend>
+                <v-icon :icon="item.icon"></v-icon>
+              </template>
+  
+           
+            </v-list-item>
+          </v-list>
+        </v-navigation-drawer>
+  
+        <v-main style="height: 354px;"></v-main>
+      </v-layout>
+    </v-card>
+  </template>
+  
+  <script setup>
+    const items = [
+      { text: 'My Files', icon: 'mdi-folder'  },
+      { text: 'Shared with me', icon: 'mdi-account-multiple' },
+      { text: 'Starred', icon: 'mdi-star' },
+      { text: 'Recent', icon: 'mdi-history' },
+      { text: 'Offline', icon: 'mdi-check-circle' },
+      { text: 'Uploads', icon: 'mdi-upload' },
+      { text: 'Backups', icon: 'mdi-cloud-upload' },
+    ]
+  </script>
+  
+  <script>
+    export default {
+      data: () => ({
+        items: [
+          { text: 'My Files', icon: 'mdi-folder' },
+          { text: 'Shared with me', icon: 'mdi-account-multiple' },
+          { text: 'Starred', icon: 'mdi-star' },
+          { text: 'Recent', icon: 'mdi-history' },
+          { text: 'Offline', icon: 'mdi-check-circle' },
+          { text: 'Uploads', icon: 'mdi-upload' },
+          { text: 'Backups', icon: 'mdi-cloud-upload' },
+        ],
+      }),
+    }
+  </script>

src/views/main/HomeView.vue

@@ -1,22 +1,331 @@
 <template>
-  <DefaultLayout></DefaultLayout>
-  <main class="top-aligned-column">
-    <div class="column">
+  <main>
+    <!--PC -->
+    <div class="md:flex hidden items-center justify-between flex-col" style="margin-top: 2%;">
+      <v-container style="margin-bottom: -.1%;">
+        <v-row justify="center">
+          <v-col style="margin-left: 4%;" cols="6">
+            <img src="../../../images/hutopyblack.png" height="100px">
+          </v-col>
+        </v-row>
+        <v-row justify="end">
+          <v-col cols="1">
+            <RouterLink :to="{ name: 'contact' }">
+              <v-btn size="x-large" style="min-width: 200; max-width: 200;" elevation="0">
+                Connexion
+              </v-btn>
+            </RouterLink>
+          </v-col>
+          <v-col cols="1">
+            <RouterLink :to="{ name: 'contact' }">
+              <v-btn size="x-large" style="min-width: 200; max-width: 200;" elevation="0">
+                Inscription
+              </v-btn>
+            </RouterLink>
+          </v-col>
+        </v-row>
+      </v-container>
 
+
+
+      <img src="../../../images/homepage/banniere.png" class="banner-image" alt="Bannière" style="min-height: 500px;">
+
+
+
+
+      <!-- Colonnes -->
+      <v-container>
+        <v-row>
+          <v-col cols="1" class="ml-4 ml-sm-0">
+            <!-- vide de gauche -->
+          </v-col>
+
+          <v-col cols="9" style="margin-left: 3%;">
+
+
+
+            <!-- Créer Profiter Inspirer  -->
+
+            <div class="d-flex justify-center align-center">
+              <div>
+                <div style="margin-top: 30px;">
+                  <v-container class="d-flex ">
+
+                    <v-hover v-slot="{ isHovering, props }">
+                      <v-card class=" mx-auto" max-width="400" v-bind="props">
+                        <v-img src="../../../images/homepage/creer.png"
+                          style="border-radius: 20px; min-width: 344px;"></v-img>
+                        <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
+                          contained>
+                          <v-container>
+                            <v-card class="mx-auto" max-width="400" v-bind="props" color="#a30e79">
+                              <h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
+                                CRÉER</h3>
+                              <p class="text-justify pa-4" style="font-size: 1.2em; ">Libérez votre créativité sur
+                                Hutopy,
+                                où chaque idée trouve sa place et chaque créateur détient la clé d'un monde rempli
+                                de possibilités
+                                infinies. Rejoignez-nous et transformez votre passion en réalité.</p>
+                            </v-card>
+                          </v-container>
+                        </v-overlay>
+                      </v-card>
+                    </v-hover>
+
+                    <div style="margin-left: 30px;"></div>
+
+                    <v-hover v-slot="{ isHovering, props }">
+                      <v-card class="mx-auto" max-width="400" v-bind="props">
+                        <v-img src="../../../images/homepage/profiter.png"
+                          style="border-radius: 20px; min-width: 344px;"></v-img>
+                        <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
+                          contained>
+                          <v-container>
+                            <v-card class="mx-auto" max-width="400" v-bind="props" color="#a30e79">
+                              <h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
+                                PROFITER</h3>
+                              <p class="text-justify pa-4" style="font-size: 1.2em; ">Plongez dans l'univers Hutopy
+                                et découvrez un
+                                espace où profiter rime avec s'enrichir. Savourez des contenus uniques, des
+                                interactions authentiques
+                                et une expérience personnalisée conçue pour éveiller vos sens et enrichir votre
+                                quotidien.</p>
+                            </v-card>
+                          </v-container>
+                        </v-overlay>
+                      </v-card>
+                    </v-hover>
+
+                    <div style="margin-left: 30px;"> </div>
+
+
+
+                    <v-hover v-slot="{ isHovering, props }">
+                      <v-card class="mx-auto" max-width="400" v-bind="props">
+                        <v-img src="../../../images/homepage/inspirer.png"
+                          style="border-radius: 20px; min-width: 344px;"></v-img>
+                        <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
+                          contained>
+                          <v-container>
+                            <v-card class="mx-auto" max-width="400" v-bind="props" color="#a30e79">
+                              <h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
+                                INSPIRER</h3>
+                              <p class="text-justify pa-4" style="font-size: 1.2em; ">Devenez une source
+                                d'inspiration sur Hutopy, en
+                                partageant votre vision, votre talent et vos histoires. Influencez positivement la
+                                communauté, éveillez
+                                la curiosité et inspirez les autres à poursuivre leurs rêves dans un cercle
+                                vertueux de créativité et
+                                d'inspiration.</p>
+                            </v-card>
+                          </v-container>
+                        </v-overlay>
+                      </v-card>
+                    </v-hover>
+
+                  </v-container>
+                </div>
+              </div>
+            </div>
+
+
+            <!-- Description D'hutopy -->
+            <v-container style="margin-top: 4%;">
+              <v-row>
+                <v-col>
+                  <h1 style="margin-bottom: 5%; font-size: 3rem; font-weight: bold; color: rgb(163, 14, 121);">C'est
+                    quoi Hutopy</h1>
+
+                  <p style="margin-bottom: 5%; font-size: 1.2rem; text-align: justify;">Découvrez Hutopy, une plateforme
+                    révolutionnaire
+                    conçue pour célébrer la
+                    créativité, l'authenticité
+                    et l'inspiration. Ici, chaque créateur trouve un espace pour exprimer sa passion et partager ses
+                    œuvres avec une communauté engagée. Hutopy se distingue par son engagement envers une expérience
+                    numérique enrichissante, offrant une interface intuitive où profiter, créer et inspirer deviennent
+                    un quotidien enrichi et significatif. Hutopy n'est pas seulement une plateforme, c'est un mouvement
+                    vers une interaction plus humaine et créative dans l'espace numérique. Avec un modèle économique
+                    équitable et une variété de contenus, nous offrons un lieu où les inspirations se rencontrent et où
+                    les idées prennent vie. Rejoindre Hutopy, c'est faire partie d'une communauté qui valorise
+                    l'expression authentique et construit un avenir où la technologie enrichit véritablement nos vies.
+                    Nous vous invitons à explorer Hutopy, à contribuer à sa vision et à faire partie de notre communauté
+                    mondiale. Ensemble, façonnons l'avenir de la création et du partage de contenu. Bienvenue sur
+                    Hutopy, où vous pouvez créer votre propre univers.</p>
+
+
+                  <v-row>
+                    <v-col>
+
+                    </v-col>
+
+                    <v-col>
+                      <RouterLink :to="{ name: 'contact' }">
+                        <v-btn color="rgb(0, 0, 0)" style="width: 300px;" class="ml-auto">CRÉER UN COMPTE</v-btn>
+                      </RouterLink>
+                    </v-col>
+                  </v-row>
+                </v-col>
+                <v-col>
+                  <v-img src="../../../images/homepage/cestquoihutopy.png"
+                    style="border-radius: 90px; min-width: 344px;"></v-img>
+                </v-col>
+              </v-row>
+            </v-container>
+
+
+            <!-- Fin Description D'hutopy -->
+
+
+
+            <!-- ILS SONT SUR HUTOPY -->
+            <v-container>
+              <v-card-text>
+                <h1
+                  style="text-align: center; margin-top: 4%; margin-bottom: 2%; font-size: 3rem; font-weight: bold; color: rgb(163, 14, 121);">
+                  Ils sont sur Hutopy</h1>
+
+
+                <v-container style="margin-top: 25px;">
+
+                  <div style="background-color: rgba(0, 0, 0, 1); height: 2px; width: 100%; margin-bottom: 70px;">
+                  </div>
+                  <v-row justify="center" class="profile-images">
+                    <router-link :to="{ name: 'creatorfolio' }">
+                      <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image"
+                        style="border: 3px solid rgb(163, 14, 121);">
+                    </router-link>
+                    <router-link :to="{ name: 'creatorfolio' }">
+                      <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image"
+                        style="border: 3px solid rgb(163, 14, 121);">
+                    </router-link>
+
+                    <router-link :to="{ name: 'creatorfolio' }">
+                      <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image"
+                        style="border: 3px solid rgb(163, 14, 121);">
+                    </router-link>
+                  </v-row>
+
+                  <div style="background-color: rgba(0, 0, 0, 1); height: 2px; width: 100%; margin-top: 70px;">
+                  </div>
+
+                </v-container>
+              </v-card-text>
+            </v-container>
+          </v-col>
+
+
+          <!-- vide de droite -->
+          <v-col cols="2" class="mr-4 mr-sm-0">
+          </v-col>
+        </v-row>
+      </v-container>
     </div>
 
-    <div class="center-column column">
-      <p>Home</p>
-    </div>
+    <!-- Mobile -->
+    <div class="md:hidden flex flex-col items-center justify-center">
+      <div>
 
-    <div class="column">
+        <DefaultLayout></DefaultLayout>
 
+        <img src="../../../images/bannieremobile.png" class="banner-image" alt="Bannière" style="margin-top: -100px;">
+
+        <div>
+          <v-card-text>
+            <div>
+              <h2 style="text-align: center;">C'EST QUOI HUTOPY</h2>
+              <p class="textjustify pa-4">Découvrez Hutopy, une plateforme révolutionnaire conçue pour célébrer
+                la créativité, l'authenticité et l'inspiration. Ici, chaque créateur trouve un espace pour
+                exprimer sa passion et partager ses œuvres avec une communauté engagée. Hutopy se distingue
+                par son engagement envers une expérience numérique enrichissante, offrant une interface
+                intuitive où profiter, créer et inspirer deviennent un quotidien enrichi et significatif.
+                Hutopy n'est pas seulement une plateforme, c'est un mouvement vers une interaction plus
+                humaine et créative dans l'espace numérique. Avec un modèle économique équitable et une
+                variété de contenus, nous offrons un lieu où les inspirations se rencontrent et où les idées
+                prennent vie. Rejoindre Hutopy, c'est faire partie d'une communauté qui valorise
+                l'expression authentique et construit un avenir où la technologie enrichit véritablement nos
+                vies. Nous vous invitons à explorer Hutopy, à contribuer à sa vision et à faire partie de
+                notre communauté mondiale. Ensemble, façonnons l'avenir de la création et du partage de
+                contenu. Bienvenue sur Hutopy, où vous pouvez créer votre propre univers.</p>
+            </div>
+
+            <v-img src="../../../images/world.png" class="v-card-imagecontainerpos" alt="Image"></v-img>
+            <router-link :to="{ name: 'contact' }">
+              <v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4" block>
+                CONNECTEZ-VOUS
+              </v-btn>
+            </router-link>
+
+          </v-card-text>
+        </div>
+
+        <v-container style="margin-top: 25px;" class="layer1-backgroundmobile">
+          <v-img src="../../../images/creermobile.png" width="400" height="300"></v-img>
+          <p class="text-justify pa-4" style="font-size: 1em;">Libérez votre créativité sur Hutopy,
+            où chaque idée trouve sa place et chaque créateur détient la clé d'un monde rempli de
+            possibilités infinies. Rejoignez-nous et transformez votre passion en réalité.</p>
+
+        </v-container>
+
+        <v-container style="margin-top: 25px;" class="layer2-backgroundmobile">
+          <v-img src="../../../images/profitezmobile.png" width="400" height="300"></v-img>
+          <p class="text-justify pa-4" style="font-size: 1em;">Plongez dans l'univers Hutopy et découvrez un
+            espace où profiter rime avec s'enrichir. Savourez des contenus uniques, des interactions authentiques et une
+            expérience
+            personnalisée conçue pour éveiller vos sens et enrichir votre quotidien.</p>
+
+        </v-container>
+
+
+        <v-container style="margin-top: 25px;" class="layer1-backgroundmobile">
+          <v-img src="../../../images/inspirermobile.png" width="400" height="300"></v-img>
+          <p class="text-justify pa-4" style="font-size: 1em;">Devenez une source d'inspiration sur Hutopy, en
+            partageant votre vision,
+            votre talent et vos histoires. Influencez positivement la communauté, éveillez la curiosité et inspirez les
+            autres à poursuivre leurs rêves dans un cercle vertueux de créativité et
+            d'inspiration.</p>
+
+        </v-container>
+
+        <v-container>
+          <v-card-text>
+            <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -50px;">
+            </div>
+            <h1 style="text-align: center; color: #a30e79; font-size: 2.2em; margin-bottom: 10%;">ILS SONT SUR HUTOPY
+            </h1>
+            <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -40px;">
+            </div>
+
+            <div class="d-flex justify-content-center"
+              style="margin-left: -10px; margin-right: 10px; margin-top: 50px;">
+              <router-link :to="{ name: 'creatorfolio' }">
+                <img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
+                  style="border-radius: 50%; margin-right: 20px; width: 120px; height: 120px;" />
+              </router-link>
+
+              <router-link :to="{ name: 'creatorfolio' }">
+                <img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
+                  style="border-radius: 50%; margin: 0 20px; width: 120px; height: 120px;" />
+              </router-link>
+
+              <router-link :to="{ name: 'creatorfolio' }">
+                <img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
+                  style="border-radius: 50%; margin-left: 20px; width: 120px; height: 120px;" />
+              </router-link>
+            </div>
+
+
+          </v-card-text>
+        </v-container>
+
+      </div>
     </div>
 
     <v-btn variant="outlined" @click="callBackend()">
       Get items
     </v-btn>
 
+
+
     <v-snackbar v-model="errorNoAccessSnackBar">
         Vous n'etes pas connecter !
         <template v-slot:actions>
@@ -37,7 +346,7 @@
         :subtitle="item.title"
       ></v-list-item>
     </v-list>
-
+    <FooterLayout></FooterLayout>
   </main>
 </template>
 
@@ -46,6 +355,8 @@ import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import { useClient } from '@/plugins/clientPlugin';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
+import FooterLayout from '@/layouts/FooterLayout.vue';
+
 
 const router = useRouter()
 const client = useClient();
@@ -71,3 +382,183 @@ const goToLoginPage = () => {
 
 
 </script>
+
+<style src="../../cssstyle/index.css"></style>
+
+<style src="../../cssstyle/homeView.css"></style>
+
+<style>
+.phototexte {
+  margin-left: 10px;
+  margin-right: 10px;
+
+}
+
+.layer1-background {
+  background-color: rgba(163, 14, 121, 0.03);
+  border-radius: 20px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+
+}
+
+.layer1-backgroundmobile {
+  background-color: rgba(163, 14, 121, 0.1);
+  border-radius: 20px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+
+}
+
+.layer2-backgroundmobile {
+
+  border-radius: 20px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+
+}
+
+
+
+.layer2-background {
+  background-color: rgba(107, 0, 101, 0.02);
+  border-radius: 20px;
+}
+
+.v-container {
+  margin-bottom: 50px;
+  /* Augmente l'espace entre les v-containers */
+}
+
+.h2ilssontsurutopy {
+  font-weight: bold;
+  font-size: 2rem;
+  margin-bottom: 100px;
+  /* Ajoute de l'espace en bas du titre */
+  margin-top: 25px;
+}
+
+.h2ilssontsurutopytitle {
+  color: rgba(107, 0, 101, 0.85);
+}
+
+.profile-images {
+  gap: 90px;
+  /* Espace entre les images */
+  margin-top: 50px;
+  /* Ajoute de l'espace en haut des images */
+
+
+
+}
+
+.profile-image {
+  width: auto;
+  /* Largeur des images */
+  height: 180px;
+  /* Hauteur des images */
+  border-radius: 20%;
+  /* Coins arrondis */
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+}
+
+.image-wrapper {
+  display: flex;
+  justify-content: center;
+  margin-top: 30px;
+  margin-bottom: 30px;
+}
+
+.image-container {
+  position: relative;
+  width: 23vw;
+  /* Utilisation de 20% de la largeur de la vue */
+  margin: 5px 8px;
+}
+
+.image {
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+
+}
+
+.v-card-text h2 {
+  margin-bottom: 20px;
+  /* Ajoute de l'espace en bas du titre h2 */
+  font-size: 2rem;
+  /* Taille du texte */
+  font-weight: bold;
+  /* Texte en gras */
+  color: rgba(163, 14, 121, 0.85);
+  /* Couleur du texte (utilisez la couleur souhaitée) */
+}
+
+.v-card-text p {
+  font-size: 1rem;
+  /* Taille du texte */
+}
+
+.textjustify {
+  text-align: justify;
+}
+
+.overlay {
+  position: absolute;
+  border-radius: 8px;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(163, 14, 121, 0.80);
+  /* Voile noir avec une opacité de 0.5 */
+  display: flex;
+  text-align: left;
+  font-size: 1.5rem;
+
+
+  align-items: center;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.banner-image {
+
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+  /* Ombre douce */
+}
+
+.image-container:hover .overlay {
+  opacity: 1;
+}
+
+.overlay p {
+  color: white;
+  font-size: 1.5rem;
+  text-align: center;
+}
+
+.custom-container {
+  position: relative;
+  max-width: 100vw;
+  /* Limiter la largeur de la v-container à la largeur de l'écran */
+
+
+}
+
+.v-card {
+  max-width: calc(100% - 20px);
+  /* Limiter la largeur de la v-card à la largeur des trois photos avec un espacement de 10px de chaque côté */
+}
+
+.v-card-imagecontainerpos {
+  margin-top: 55px;
+  /* Déplace l'image vers le bas de 10 pixels */
+  border-radius: 8px;
+}
+
+.overlay p.image-text {
+  display: none;
+}
+
+.overlay:hover p.image-text {
+  display: block;
+}
+</style>

src/views/main/ProjectRoadmap.vue

@@ -0,0 +1,43 @@
+<template>
+    <DefaultLayout></DefaultLayout>
+    <v-container>
+        <v-img class="roadmap-image" src="../../../images/roadmapbanner.png"></v-img>
+
+    </v-container>
+
+    <FooterLayout></FooterLayout>
+</template>
+
+
+<script setup>
+import DefaultLayout from '@/layouts/DefaultLayout.vue';
+import FooterLayout from '@/layouts/FooterLayout.vue';
+
+
+</script>
+
+
+<style>
+.footer-donate {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 3;
+}
+
+.footer-donate-container {
+
+    background-color: rgb(255, 255, 255);
+
+}
+
+.roadmap-image {
+    border-radius: 35px;
+    width: 50%;
+    /* reduces width by 50% */
+    height: auto;
+    /* maintains aspect ratio */
+
+}
+</style>