Add some style for the form

src/app/documentation/documentation.component.css

@@ -1,10 +1,10 @@
 .documentation {
     display: flex;
     flex-direction: column;
-    padding: 8rem;
+    padding: 4rem 8rem;
 
     .title {
-        font-size: 3.75rem;
+        font-size: 3rem;
         text-align: center;
     }
 
@@ -13,11 +13,11 @@
         flex-direction: column;
 
         .question {
-            font-size: 3rem;
+            font-size: 2rem;
         }
 
         .text {
-            font-size: 1.5rem;
+            font-size: 1.25rem;
         }
     }
 }

src/app/form/form.component.css

@@ -0,0 +1,53 @@
+.contact {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 2rem 8rem;
+
+    .title {
+        font-size: 2rem;
+        text-align: center;
+    }
+
+    .form {
+        display: flex;
+        flex-direction: column;
+        gap: 2rem;
+        width: 100%;
+        max-width: 600px;
+
+        & input, & textarea {
+            width: 100%;
+            min-height: 2rem;
+        }
+
+        & textarea {
+            resize: none;
+            height: 10rem;
+        }
+
+        .submit_button {
+            display: flex;
+            justify-content: center;
+
+            & button {
+                border: none;
+                background-color: #1976D2;
+                color: white;
+                border-radius: 10px;
+                width: 80%;
+                height: 2.5rem;
+
+                text-transform: uppercase;
+                cursor: pointer;
+
+                transition: scale .3s ease-in-out;
+
+                &:hover {
+                    scale: 1.05;
+                }
+            }
+
+        }
+    }
+}

src/app/form/form.component.html

@@ -1,30 +1,29 @@
-<div [formGroup]="form">
+<div class="contact">
+    <h1 class="title">Nous contacter</h1>
 
-    <h1>Nous contacter</h1>
+    <div [formGroup]="form" class="form">
-
-    <div>
             <div>
-                <label for="name">Nom</label>
+<!--                <label for="name">Nom</label>-->
                 <input type="text" id="name" name="name" placeholder="Votre nom" required formControlName="from_name">
             </div>
 
             <div>
-                <label for="email">Email</label>
+<!--                <label for="email">Email</label>-->
                 <input type="email" id="email" name="email" placeholder="Votre email" required formControlName="from_email">
             </div>
 
             <div>
-                <label for="subject">Sujet</label>
+<!--                <label for="subject">Sujet</label>-->
                 <input type="text" id="subject" name="subject" placeholder="Sujet" required formControlName="subject">
             </div>
 
             <div>
-                <label for="message">Message</label>
+<!--                <label for="message">Message</label>-->
                 <textarea id="message" name="message" placeholder="Votre message" required formControlName="message"></textarea>
             </div>
 
-            <div>
+            <div class="submit_button">
-                <button type="submit" (click)="send()" [disabled]="!form.valid">Envoyer</button>
+                <button class="submit_btn" type="submit" (click)="send()" [disabled]="!form.valid">Envoyer</button>
             </div>
     </div>