From 94630ebef4c95fb656d9d85e412450a1759722ac Mon Sep 17 00:00:00 2001
From: Pontoporeia <spam3@happyngreen.fr>
Date: Wed, 21 Dec 2022 16:52:57 +0100
Subject: [PATCH] style du formulaire

---
 formulaire.html | 160 ++++++++++++++++++++++++------------------------
 style.css       |  89 +++++++++++++++++++--------
 2 files changed, 144 insertions(+), 105 deletions(-)

diff --git a/formulaire.html b/formulaire.html
index 89e5987..48b6e66 100644
--- a/formulaire.html
+++ b/formulaire.html
@@ -15,105 +15,105 @@
         <a href="index.html">Mémoire post-ERG / A life after ERG</a>
         <div class="menu">
             <div class="menu-content">
-                <input type="search" name="search" placeholder="Recherche..." button class="boutton boutton1"></input>
-                <a href="formulaire.html" button class="boutton boutton1">Partager un mémoire</a>
-                <a href="apropos.html" button class="boutton boutton1">À propos</a>
-                <a href="contact.html" button class="boutton boutton1">Contact</a>
-                <a href="licences.html" button class="boutton boutton1">Licences</a>
+                <input type="search" name="search" placeholder="Recherche..." button class="button"></input>
+                <a href="formulaire.html" button class="button">Partager un mémoire</a>
+                <a href="apropos.html" button class="button">À propos</a>
+                <a href="contact.html" button class="button">Contact</a>
+                <a href="licences.html" button class="button">Licences</a>
             </div>
         </div>
     </header>
 
     <!-- CONTENU PAGE -->
     <div id="page_content">
-                
-                <h3>Partager son mémoire</h3>
-                <form action=" partager.php" method="get">
 
-        <div class="button">
-            <label>Votre nom/prénom/pseudo</label>
-            <input type="text" name="nom" placeholder="...">
-        </div>
+        <h3>Partager son mémoire</h3>
+        <form action=" partager.php" method="get">
 
-        <div class="boutton">
-            <label>Année diplômante (2020, 2021, ...)</label>
-            <input type="text" name="année" placeholder="...">
-        </div>
+            <div class="button">
+                <label>Votre nom/prénom/pseudo</label>
+                <input type="text" name="nom" placeholder="...">
+            </div>
 
-        <div class="boutton">
-            <label>Contact : mail, insta, ...</label>
-            <input type="email" name="mail" placeholder="Votre contact">
-        </div>
+            <div class="button">
+                <label>Année diplômante (2020, 2021, ...)</label>
+                <input type="text" name="année" placeholder="...">
+            </div>
 
-        <div class="boutton">
-            <label>Titre du mémoire</label>
-            <input type="titre" name="mémoire" placeholder="...">
-        </div>
+            <div class="button">
+                <label>Contact : mail, insta, ...</label>
+                <input type="email" name="mail" placeholder="Votre contact">
+            </div>
 
-        <div class="boutton">
-            <label>Tag/mots-clefs sur le mémoire</label>
-            <input type="text" name="tag" placeholder="typographie, photographie, outils libre, post-colonial,..">
-        </div>
+            <div class="button">
+                <label>Titre du mémoire</label>
+                <input type="titre" name="mémoire" placeholder="...">
+            </div>
 
-        <div class="boutton">
-            <label>Promoteur.rice</label>
-            <input type="text" name="nom" placeholder="nom/prénom/pseudo">
-        </div>
+            <div class="button">
+                <label>Tag/mots-clefs sur le mémoire</label>
+                <input type="text" name="tag" placeholder="typographie, photographie, outils libre, post-colonial,..">
+            </div>
 
-        <div class="boutton">
-            <label>Problématique</label>
-            <input type="text" name="problématique" placeholder="...">
-        </div>
+            <div class="button">
+                <label>Promoteur.rice</label>
+                <input type="text" name="nom" placeholder="nom/prénom/pseudo">
+            </div>
 
-        <div class="boutton">
-            <label>Résumé en quelque lignes</label>
-            <input type="text" name="résumé" placeholder="...">
-        </div>
+            <div class="button">
+                <label>Problématique</label>
+                <input type="text" name="problématique" placeholder="...">
+            </div>
 
-        <div class="boutton">
-            <label>Orientation principale</label>
-            <select name="Orientation">
-                <option value="typographie">Typographie</option>
-                <option value="graphisme">Graphisme</option>
-                <option value="designnumérique">Design Numérique</option>
-                <option value="Cinéma d'animation">Cinéma d'animation</option>
-                <option value="Illustration">Illustration</option>
-                <option value="BD">Bande dessinée</option>
-                <option value="Photographie">Photographie</option>
-                <option value="Vidéographie">Vidéographie</option>
-                <option value="Sculpture">Sculpture</option>
-                <option value="Peinture">Peinture</option>
-                <option value="Art numérique">Art numérique</option>
-                <option value="Vidéographie">Vidéographie</option>
-                <option value="Photographie">Photographie</option>
-                <option value="Dessin">Dessin</option>
-                <option value="Installation performance">Installation performance</option>
-            </select>
-        </div>
+            <div class="button">
+                <label>Résumé en quelque lignes</label>
+                <input type="text" name="résumé" placeholder="...">
+            </div>
 
-        <div class="boutton">
-            <label>Atelier Pratique</label>
-            <select name="AP">
-                <option value="DPM">Design et politique du multiple</option>
-                <option value="APS">Art et pratique situé</option>
-                <option value="R&E">Récits et expérimentation</option>
-                <option value="PAOC">Pratique de l'art et outils critiques</option>
-            </select>
-        </div>
+            <div class="button">
+                <label>Orientation principale</label>
+                <select name="Orientation">
+                    <option value="typographie">Typographie</option>
+                    <option value="graphisme">Graphisme</option>
+                    <option value="designnumérique">Design Numérique</option>
+                    <option value="Cinéma d'animation">Cinéma d'animation</option>
+                    <option value="Illustration">Illustration</option>
+                    <option value="BD">Bande dessinée</option>
+                    <option value="Photographie">Photographie</option>
+                    <option value="Vidéographie">Vidéographie</option>
+                    <option value="Sculpture">Sculpture</option>
+                    <option value="Peinture">Peinture</option>
+                    <option value="Art numérique">Art numérique</option>
+                    <option value="Vidéographie">Vidéographie</option>
+                    <option value="Photographie">Photographie</option>
+                    <option value="Dessin">Dessin</option>
+                    <option value="Installation performance">Installation performance</option>
+                </select>
+            </div>
 
-        <div class="boutton">
-            <label>Formats de fichiers de mémoire</label>
-            <input type="text" name="tag" placeholder="png, jpeg, pdf, mp3, html,... ">
-        </div>
+            <div class="button">
+                <label>Atelier Pratique</label>
+                <select name="AP">
+                    <option value="DPM">Design et politique du multiple</option>
+                    <option value="APS">Art et pratique situé</option>
+                    <option value="R&E">Récits et expérimentation</option>
+                    <option value="PAOC">Pratique de l'art et outils critiques</option>
+                </select>
+            </div>
 
-        <div class="boutton">
-            <label>Importer les divers fichers de son mémoire</label>
-            <input type="text" name="upload" placeholder="upload ">
-        </div>
+            <div class="button">
+                <label>Formats de fichiers de mémoire</label>
+                <input type="text" name="tag" placeholder="png, jpeg, pdf, mp3, html,... ">
+            </div>
 
-        <div class="boutton boutton1">
-            <input type="submit" name="go" value="envoyer">
-        </div>
+            <div class="button">
+                <label>Importer les divers fichers de son mémoire</label>
+                <input type="text" name="upload" placeholder="upload ">
+            </div>
+
+            <div id="enter"class="button">
+                <input type="submit" name="go" value="envoyer">
+            </div>
 
 
 
diff --git a/style.css b/style.css
index 217f42f..cf0df35 100644
--- a/style.css
+++ b/style.css
@@ -5,10 +5,17 @@
 
   body {
     background-color: white;
-    /* overflow-x: hidden; */
-    /* width: 100%; */
   }
 
+  /* PARAMÈTRE DE BASE DE BOUTTON */
+  .button {
+    margin: 0;
+    width: auto;
+    padding: 0.8rem;
+    background-color: white;
+  }
+
+
   /* ENTÊTE */
   header {
     z-index: 10000;
@@ -44,46 +51,73 @@
     width: 100vw;
     left: 0;
     background-color: white;
-    background: linear-gradient(0deg, rgba(2,0,36,0) 0%, rgba(255,255,255,1) 40%); 
+    background: linear-gradient(0deg, rgba(2, 0, 36, 0) 0%, rgba(255, 255, 255, 1) 40%);
   }
 
-  .menu-content{
+  .menu-content {
     display: flex;
     flex-direction: row;
     justify-content: center;
-    /* align-items: flex; */
-    /* margin-top: 8vh; */
     padding: 2rem;
     gap: 1rem;
-    /* align-self: flex-start; */
-   
   }
 
-  .boutton {
-    margin: 0;
-    width: auto;
-    padding: 0.8rem;
-    text-align: center;
-    text-decoration: none;
-    font-size: 0.8rem;
-    font-family: police1;
-    transition-duration: 0.4s;
-    cursor: pointer;
-    border-radius: 16px;
-    background-color: white;
-  }
-
-  .boutton1 {
+  header .button {
     background-color: none;
     color: rgb(193, 4, 252);
     border: 1px solid rgb(193, 4, 252);
+    text-align: center;
+    text-decoration: none;
+    font-size: 0.8rem;
+    transition-duration: 0.4s;
+    cursor: pointer;
+    border-radius: 16px;
   }
 
-  .boutton1:hover {
+  header input {
+    font-family: police1;
+  }
+
+  header .button:hover {
     background-color: rgb(193, 4, 252);
     color: white;
   }
 
+  /* FORMULAIRE */
+
+  form label {
+    font-family: police1;
+    font-size: 1rem;
+  }
+  form input{
+    position: relative;
+    border-color: #c104fc;
+    border-radius: 5px;
+    border-style: solid;
+    margin: 1rem;
+    padding: 0.5rem;
+    width: auto;
+    overflow:visible;
+  }
+
+  form select{
+    position: relative;
+    border-color: #c104fc;
+    border-radius: 5px;
+    border-style: solid;
+    margin: 1rem;
+    padding: 0.5rem;
+    background-color: white;
+  }
+
+  #enter input{
+    font-family: police1;
+    font-size: 1rem;
+    font-weight: bold;
+    padding: 1.2rem;
+    border-radius: 16px;
+  }
+
   /* CONTENUS DE LA PAGE */
   #page_content {
     position: relative;
@@ -96,7 +130,7 @@
   }
 
   /* GRILLE */
-  .grid-section{
+  .grid-section {
     position: relative;
     /* display: block; */
     /* position: fixed; */
@@ -122,4 +156,9 @@
     grid-column: 5 / 5;
     grid-row: 1 / 12;
     background-color: #4da870;
+  }
+
+  form .boutton {
+    position: inherit;
+    margin: 0;
   }
\ No newline at end of file