flex formu

tartempion-sdr · Dec 11, 2024 · 46f652d · 46f652d
1 parent c46788e
commit 46f652d
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 10 deletions.
diff --git a/index.css b/index.css
@@ -41,7 +41,52 @@ button {
     color: white;
     text-decoration: none;
     font-size: 17px;
+    margin-left: auto;
 }
+
 header.header2 {
-    background-color: blue !important;
+    display: flex;
+    align-items: center;
+    background-color: rgb(68, 70, 106);
+    height: 250;
+    width: auto;
+    border-radius: 5px;
+    margin-left: 100px;
+    margin-right: 100px;
+    padding-top: 50px;
+    padding-bottom: 50px;
+    padding-left: 50px;
+    padding-right: 50px;
+}
+label {
+    color: white;
+}
+#b2 {
+    background: linear-gradient(to right, rgb(234, 76, 76), rgb(224, 130, 146));
+    height: 30px;
+    margin-top: 25px; 
+    margin-bottom: 10px;
+
 }
+.form-container { 
+    display: flex; 
+    justify-content: space-between; /* Espace entre les formulaires */ 
+} 
+
+.form { 
+    display: flex; 
+    flex-direction: column; 
+    margin-right: 20px; /* Espace entre les formulaires */ 
+} 
+
+label { 
+    font-size: 16px; 
+    color: #333; 
+    margin-bottom: 5px; /* Espace entre le label et le select */ 
+} 
+
+select { 
+    font-size: 16px; 
+    padding: 5px; 
+    margin-top: 5px; /* Espace entre le select et le label */ 
+}
diff --git a/index.html b/index.html
@@ -23,15 +23,35 @@
             </button>
         </div>
     </header>
-    <h1>Site web<br>
-        <spam id="p1">test</spam> et <spame id="p1">exercises</spame> 
-    </h1>
-    <h2>
-        <spam id="p1">Création site internet </spam> -
-    </h2>
-    <header class="header2">
-        coucou
-    </header>
+        <h1>Site web<br>
+            <spam id="p1">test</spam> et <spame id="p1">exercises</spame> 
+        </h1>
+        <h2>
+            <spam id="p1">Création site internet </spam> -
+        </h2>
+        <header class="header2">
+            <div class="form-container">
+                <form class="form">
+
+                    <label for="id-pays">pays ?</label>
+                    <select name="pays" id="id-pays" >
+                        <option value="france">france</option>
+                        <option value="belgique">belgique</option>
+                    </select>
+                </form> 
+                <form class="form">
+                    <label for="code-postale-select">code postale</label>
+                    <select name="code" id="id-code-postale">
+                        <option value="44000">44000</option>
+                        <option value="44100">44100</option>
+                    </select>
+                </form>    
+            </div>    
+
+            <button id="b2"> recherche
+            </button>
+
+        </header>
     <footer>
         m'envoyer <a href="mailto:test@gmail.com">un mail</a>
     </footer>