From 18187d8c18628a078aab8b3d8924835a4a4ef572 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Sat, 23 Mar 2024 20:14:15 -0400
Subject: [PATCH] Updating UI - ContactView.vue Modification pour que la page
 soit dynamique

---
 src/views/main/ContactView.vue | 719 ++++++++++++++++++++++++++-------
 1 file changed, 563 insertions(+), 156 deletions(-)

diff --git a/src/views/main/ContactView.vue b/src/views/main/ContactView.vue
index 53cc6b8..ec0ee90 100644
--- a/src/views/main/ContactView.vue
+++ b/src/views/main/ContactView.vue
@@ -1,203 +1,610 @@
 <template>
+
   <!--PC -->
+  <v-app style="background-color: #F4F4F4;">
 
 
-  <div class="md:flex hidden items-center justify-between flex-col" style="margin-top: 3%;">
-    <v-container class="d-flex justify-center align-center" sty>
-      <div style="margin-left: 20%; margin-bottom: 3%;">
+    <!--lg="8" md="10" sm="10" xs="10" -->
+    <div class="hidden-xs flex-col items-center justify-center">
+
+
+
+
+
+      <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">
+                Accueil
+              </v-btn>
+            </RouterLink>
+          </v-col>
+
+          <v-col>
+
+          </v-col>
+        </v-row>
+      </v-container>
+
+
+      <v-container class="row-between-logo-text">
         <v-row>
 
-          <img style=" max-width: 60%;" src="../../../images/hutopy.png">
+          <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>
+
+                <v-text-field label="Nom ($)" style="color: rgb(107, 0, 101);"></v-text-field>
+                <v-text-field label="Courriel ($)" style="color: rgb(107, 0, 101);"></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>
+                <RouterLink :to="{ name: 'home' }">
+                  <v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
+                    class="mt-4 send-btn" block>
+                    Envoyez
+                  </v-btn>
+                </RouterLink>
+
+
+              </v-col>
+            </v-row>
+
+            <v-row>
+              <v-container>
+                <p class="h3-text paragraph">Rejoignez l'aventure
+                  Hutopy : une
+                  invitation à façonner l'avenir de la création.
+                  Vous avez un talent, une passion, une vision ? Hutopy vous ouvre ses portes, non seulement comme
+                  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 {">
+                  Faire partie de Hutopy, c'est embrasser une opportunité unique de monétiser votre créativité,
+                  d'élargir
+                  votre réseau et de participer à un projet grandiose. C'est le moment de transformer votre passion en
+                  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
+                  visionnaires, nous vous invitons à inscrire vos informations. Partagez avec nous votre courriel et
+                  votre
+                  numéro de téléphone, et nous vous guiderons à travers chaque étape pour établir votre présence sur
+                  Hutopy.
+                  Laissez-nous votre marque, et ensemble, construisons un monde où la créativité connaît aucune limite.
+                  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-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 size="large"
-              style="margin-left: 50%; margin-top: 48%; min-width: 150px; max-width: 200px; border-radius: 40px;"
-              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>
           </RouterLink>
-
-        </v-row>
-      </div>
-    </v-container>
-
-  </div>
+        </v-col>
+      </v-row>
 
 
-  <v-container>
-    <v-row justify="center" align="center">
-      <v-col cols="auto">
-        <img src="../../../images/contactpage/contactpicture.png" alt="Bannière" class="contactpicture"
-          style="max-width: 400px; margin-top: 14%; height: auto; float:  right;">
-      </v-col>
-      <v-col style="max-width: 700px;">
-        <h1 style=" font-size: 3rem; margin-bottom: 5%;" class="h1-inscription-beta">Participez au
-          développement</h1>
-
-
-        <v-text-field label="Nom ($)" style=" color: rgb(107, 0, 101); background-color: #F4F4F4;"></v-text-field>
-
-        <v-text-field label="Courriel ($)" style="color: rgb(107, 0, 101); background-color: #F4F4F4"></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>
-
-
-        <RouterLink :to="{ name: 'home' }">
-          <v-btn style=" margin-bottom: 45px; background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
-            class="mt-4" block>Envoyez</v-btn>
-        </RouterLink>
-      </v-col>
-    </v-row>
-  </v-container>
-
-
-  <v-container style="max-width: 1200px;">
-    <p class="para-inscription" style="margin-top: -4%; font-size: 1.3rem;">Rejoignez l'aventure
-      Hutopy : une
-      invitation à façonner l'avenir de la création.
-      Vous avez un talent, une passion, une vision ? Hutopy vous ouvre ses portes, non seulement comme
-      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.
-      Devenez créateur sur Hutopy et plongez dans une expérience sans pareille où vos œuvres rejoindront un
-      écosystème florissant, prêtes à être découvertes, appréciées et soutenues. C'est l'occasion de laisser
-      votre empreinte, d'enseigner, d'apprendre et de grandir aux côtés d'âmes créatives partageant les mêmes
-      idées.
-      Faire partie de Hutopy, c'est embrasser une opportunité unique de monétiser votre créativité, d'élargir
-      votre réseau et de participer à un projet grandiose. C'est le moment de transformer votre passion en
-      profession, d'atteindre un public mondial et de contribuer à un mouvement qui valorise la créativité et
-      l'innovation.
-      Pour embarquer dans ce voyage vers la réalisation de vos rêves et rejoindre notre communauté de créateurs
-      visionnaires, nous vous invitons à inscrire vos informations. Partagez avec nous votre courriel et votre
-      numéro de téléphone, et nous vous guiderons à travers chaque étape pour établir votre présence sur Hutopy.
-      Laissez-nous votre marque, et ensemble, construisons un monde où la créativité connaît aucune limite.
-      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>
-
-  <!-- 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>
+      <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)"
+        label="Pourquoi voulez-vous participer au développement" placeholder="Écrivez votre message ici" rows="3"
+        auto-grow></v-textarea>
+      <v-textarea class="labelsize" 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>
+      <RouterLink :to="{ name: 'home' }">
+        <v-btn style="background-color: rgb(163, 14, 121); margin-bottom: 8%; color: white; font-weight: bold;"
+          class="mt-4 send-btn" block>
+          Envoyez
+        </v-btn>
+      </RouterLink>
 
 
 
-      <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;">
-        Rejoignez l'aventure Hutopy : une invitation à façonner l'avenir de la création.
-        Vous avez un talent, une passion, une vision ? Hutopy vous ouvre ses portes, non seulement comme 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.
-        Devenez créateur sur Hutopy et plongez dans une expérience sans pareille où vos œuvres rejoindront un écosystème
-        florissant, prêtes à être découvertes, appréciées et soutenues. C'est l'occasion de laisser votre empreinte,
-        d'enseigner, d'apprendre et de grandir aux côtés d'âmes créatives partageant les mêmes idées.
-        Faire partie de Hutopy, c'est embrasser une opportunité unique de monétiser votre créativité, d'élargir votre
-        réseau et de participer à un projet grandiose. C'est le moment de transformer votre passion en profession,
-        d'atteindre un public mondial et de contribuer à un mouvement qui valorise la créativité et l'innovation.
-        Pour embarquer dans ce voyage vers la réalisation de vos rêves et rejoindre notre communauté de créateurs
-        visionnaires, nous vous invitons à inscrire vos informations. Partagez avec nous votre courriel et votre numéro
-        de téléphone, et nous vous guiderons à travers chaque étape pour établir votre présence sur Hutopy.
-        Laissez-nous votre marque, et ensemble, construisons un monde où la créativité connaît aucune limite. 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 class="h3-text paragraph">Rejoignez l'aventure
+        Hutopy : une
+        invitation à façonner l'avenir de la création.
+        Vous avez un talent, une passion, une vision ? Hutopy vous ouvre ses portes, non seulement comme
+        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>
 
-      <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-bottom: 20px;">
-      </div>
+      <p class="h3-text paragraph">
+        Faire partie de Hutopy, c'est embrasser une opportunité unique de monétiser votre créativité,
+        d'élargir
+        votre réseau et de participer à un projet grandiose. C'est le moment de transformer votre passion en
+        profession, d'atteindre un public mondial et de contribuer à un mouvement qui valorise la créativité
+        et
+        l'innovation.
 
-      <FormInscriptionBeta></FormInscriptionBeta>
 
-      <v-btn style=" background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4"
-        block>Envoyez</v-btn>
+      </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
+        visionnaires, nous vous invitons à inscrire vos informations. Partagez avec nous votre courriel et
+        votre
+        numéro de téléphone, et nous vous guiderons à travers chaque étape pour établir votre présence sur
+        Hutopy.
+        Laissez-nous votre marque, et ensemble, construisons un monde où la créativité connaît aucune limite.
+        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>
-  </v-container>
 
-  <FooterLayout></FooterLayout>
+    <FooterLayout></FooterLayout>
+  </v-app>
 </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;
+@media (min-width: 150px) and (max-width: 598px) {
+  .contact-image {
 
-  /* 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 */
-}
+    width: auto;
+    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
+    clip-path: polygon(0 30%, 100% 30%, 100% 80%, 0 80%);
+    margin-top: -40%;
+    margin-bottom: -30%;
+  }
 
-.mallowbanner {
+  .hutopy-header-image {
 
-  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;
-}
+    height: 70px;
+    margin-left: 5%;
+    margin-top: 5%;
+  }
+
+
+  .h2-Participez-au-développement {
+    font-size: 1.8rem;
+    margin-top: 3%;
+    margin-bottom: 6%;
+    margin-left: 5%;
+  }
+
+  .home-btn {
+    margin-left: 20%;
+    margin-top: 16%;
+  }
+
+  .paragraph {
+    font-size: 1.2rem;
+    text-align: justify;
+
+    margin-bottom: 10%;
+    margin-top: 3%;
+    margin-left: 3%;
+    margin-right: 3%;
+  }
+
+  .labelsize {
+    max-width: 95%;
+    margin-left: 3%;
+  }
 
-.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;
-  color: #24393c;
 
 }
 
-.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 */
+@media (min-width: 599px) 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: 150%;
+  }
+
+  .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%;
+  }
+
+
 
-  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;
+@media (min-width: 1000px) and (max-width: 1279px) {
+
+  .hutopy-header-image {
+    margin: 0 auto;
+    height: 120px;
+    margin-left: -0%;
+  }
+
+
+  .home-btn {
+    margin-top: 5%;
+
+    border-radius: 30px;
+    width: 180px;
+    min-width: 175px;
+    margin-left: 22%;
+    margin-top: 37%;
+
+
+  }
+
+  .h2-Participez-au-développement {
+    font-size: 3rem;
+    margin-top: 3%;
+    margin-bottom: 6%;
+  }
+
+
+
+  .contact-image {
+    border-radius: 25px;
+    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
+
+  }
+
+
+  .row-joinus {
+    margin-right: -4%;
+    margin-left: -1%;
+  }
+
+  .paragraph {
+    font-size: 1.5rem;
+    text-align: justify;
+    margin-right: -4%;
+    margin-bottom: 4%;
+    margin-top: 3%;
+  }
+
+
+
+}
+
+
+@media (min-width: 1280px) and (max-width: 1600px) {
+
+  .hutopy-header-image {
+    margin: 0 auto;
+    height: 165px;
+    margin-left: -4%;
+  }
+
+  .home-btn {
+    margin-top: 5%;
+
+    border-radius: 30px;
+    width: 180px;
+    min-width: 175px;
+    margin-left: 50%;
+    margin-top: 45%;
+
+
+  }
+
+
+
+
+  .row-between-logo-text {
+    margin-top: 2%;
+
+  }
+
+  .contact-image {
+    border-radius: 25px;
+    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
+    margin-top: 0%;
+    margin-left: -13%
+  }
+
+  .h2-Participez-au-développement {
+    font-size: 3rem;
+    margin-top: 15%;
+    margin-bottom: 6%;
+  }
+
+  .h3-text {
+    font-size: 1.3rem;
+    margin-top: 2%;
+    text-align: justify;
+  }
+
+  .h3-last-text {
+    margin-bottom: 5%;
+  }
+
+  .row-joinus {
+    margin-right: -8%;
+    margin-left: -10%;
+  }
+
+  .paragraph {
+    margin-right: -6%;
+    margin-left: -7%;
+  }
+
+
+
+}
+
+
+@media (min-width: 1600px) and (max-width: 1919px) {
+
+  .hutopy-header-image {
+    margin: 0 auto;
+    height: 165px;
+    margin-left: -5%;
+  }
+
+  .home-btn {
+    margin-top: 5%;
+
+    border-radius: 30px;
+    width: 180px;
+    min-width: 175px;
+    margin-left: 93%;
+    margin-top: 40%;
+
+
+  }
+
+
+
+
+  .row-between-logo-text {
+    margin-top: 2%;
+
+  }
+
+  .contact-image {
+    border-radius: 25px;
+    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
+    margin-top: 0%;
+    margin-left: -13%
+  }
+
+  .h2-Participez-au-développement {
+    font-size: 3rem;
+    margin-top: 15%;
+    margin-bottom: 6%;
+  }
+
+  .h3-text {
+    font-size: 1.3rem;
+    margin-top: 2%;
+    text-align: justify;
+  }
+
+  .h3-last-text {
+    margin-bottom: 5%;
+  }
+
+  .row-joinus {
+    margin-right: -15%;
+    margin-left: -13%;
+  }
+
+  .paragraph {
+    margin-right: -16%;
+    margin-left: -9%;
+  }
+
+
+
+}
+
+@media (min-width: 1920px) and (max-width: 2559px) {
+
+  .hutopy-header-image {
+    margin: 0 auto;
+    height: 160px;
+    margin-left: -8%;
+  }
+
+  .contact-image {
+    border-radius: 25px;
+    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
+  }
+
+
+  .home-btn {
+    margin-top: 5%;
+    margin-left: 95%;
+    border-radius: 30px;
+    width: 180px;
+    min-width: 175px;
+    margin-bottom: -15%;
+
+  }
+
+  .send-btn {
+    margin-bottom: 4%;
+    margin-top: -1%;
+  }
+
+  .row-between-logo-text {
+    margin-top: 3%;
+
+
+  }
+
+  .home-row {
+    margin-left: 20%;
+  }
+
+  .h2-Participez-au-développement {
+    font-size: 3rem;
+    margin-top: 15%;
+    margin-bottom: 6%;
+  }
+
+  .h3-text {
+    font-size: 1.3rem;
+    margin-top: 2%;
+    text-align: justify;
+  }
+
+  .h3-last-text {
+    margin-bottom: 5%;
+  }
+
+  .row-joinus {
+    margin-right: -18%;
+    margin-left: -10%;
+  }
+
+  .paragraph {
+    margin-right: -20%;
+  }
+
+}
+
+@media (min-width: 2559px) {
+
+  .hutopy-header-image {
+    margin: 0 auto;
+    height: 180px;
+    margin-left: 7%;
+  }
+
+  .contact-image {
+    border-radius: 25px;
+    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
+    margin-left: 20%;
+  }
+
+
+  .home-btn {
+    margin-top: 5%;
+    margin-left: 66%;
+    border-radius: 30px;
+    width: 180px;
+    min-width: 175px;
+    margin-bottom: -15%;
+
+  }
+
+  .send-btn {
+    margin-bottom: 4%;
+    margin-top: -1%;
+  }
+
+  .row-between-logo-text {
+    margin-top: 3%;
+
+
+  }
+
+  .home-row {
+    margin-left: 20%;
+
+  }
+
+  .h2-Participez-au-développement {
+    font-size: 3rem;
+    margin-top: 15%;
+    margin-bottom: 6%;
+  }
+
+  .h3-text {
+    font-size: 1.3rem;
+    margin-top: 2%;
+    text-align: justify;
+  }
+
+  .h3-last-text {
+    margin-bottom: 5%;
+  }
+
+  .paragraph {
+    margin-left: 10%;
+  }
 }
 </style>