modified changes

aditya-bhaumik · Oct 27, 2024 · 61be8f2 · 61be8f2
1 parent e3d8060
commit 61be8f2
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 20 deletions.
diff --git a/pages/contact/contact.css b/pages/contact/contact.css
@@ -35,8 +35,6 @@ h1 {
   background-color: rgb(40, 40, 154);
   color: white;
   text-align: center;
-  text-wrap: wrap;
-  justify-content: center;
   padding: 5px;
   margin: 10px;
 }
@@ -60,24 +58,22 @@ h1 {
 }
 
 .form-group {
-  display: flex; /* Use flexbox for alignment */
-  align-items: center; /* Align items center vertically */
+  display: flex;
+  flex-direction: column; /* Stack label, input, and error vertically */
   margin-bottom: 25px;
 }
 
 .form-group label {
-  width: 150px; /* Fixed width for labels */
   font-weight: bold;
-  margin-right: 15px; /* Space between label and input */
   color: #333;
   font-size: 16px;
+  margin-bottom: 8px; /* Space between label and input */
 }
 
 .form-group input,
 .form-group textarea {
-  flex: 1; /* Allow input to fill remaining space */
   padding: 12px 15px;
-  border: 1px solid #ccc; /* Grayish border */
+  border: 1px solid #ccc;
   border-radius: 8px;
   font-size: 16px;
   background-color: #f9f9f9;
@@ -86,22 +82,30 @@ h1 {
 
 .form-group input:hover,
 .form-group textarea:hover {
-  border-color: #161313; /* Slightly darker gray on hover */
+  border-color: #161313;
   background-color: #fff;
 }
 
 .form-group input:focus,
 .form-group textarea:focus {
-  border-color: #0f2d10; /* Green border on focus */
+  border-color: #0f2d10;
   background-color: #fff;
   outline: none;
   box-shadow: 0 0 8px rgba(76, 175, 80, 0.2);
 }
 
 .error-message {
+  display: none; /* Hidden initially */
   color: red;
-  font-size: 14px;
-  margin-top: 5px;
+  font-size: 0.9em;
+  margin-top: 5px; /* Space between input and error message */
+}
+
+.success-message {
+  color: green;
+  font-size: 1em;
+  margin-top: 10px;
+  display: none; /* Hidden initially */
 }
 
 .submit-button {
@@ -135,8 +139,6 @@ h1 {
     background-color: rgb(40, 40, 154);
     color: white;
     text-align: center;
-    text-wrap: wrap;
-    justify-content: center;
     padding: 5px;
     margin: 10px;
   }
@@ -145,4 +147,3 @@ h1 {
     width: 100%;
   }
 }
-
diff --git a/pages/contact/contact.html b/pages/contact/contact.html
@@ -51,23 +51,23 @@ <h1>Submit your Details</h1>
                     <div class="form-group">
                         <label for="name">Name</label>
                         <input type="text" id="name" name="name" placeholder="Your Name" required pattern="[a-zA-Z ]+" oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')" oninput="this.setCustomValidity('')" />
-                        <span class="error-message" id="nameError"style="display: none; color: red;"></span>
+                        <div class="error-message" id="nameError">Numbers and symbols are not allowed</div>
                     </div>
                     <div class="form-group">
                         <label for="email">Email</label>
                         <input type="email" id="email" name="email" placeholder="Your Email" required />
-                        <span class="error-message" id="emailError"style="display: none; color: red;"></span>
+                        <div class="error-message" id="emailError">Please enter a valid email address</div>
                     </div>
                     <div class="form-group">
                         <label for="phone">Phone</label>
                         <input type="tel" id="phone" name="phone" placeholder="Your Phone Number" required />
-                        <span class="error-message" id="phoneError"style="display: none; color: red;"></span>
+                        <div class="error-message" id="phoneError">Please enter a valid phone number</div>
                     </div>
                     <div class="form-group">
                         <label for="message">Message</label>
                         <textarea id="message" name="message" placeholder="Your Message" rows="5" required></textarea>
-                        <span class="error-message" id="messageError"style="display: none; color: red;"></span>
-                    </div>
+                        <div class="error-message" id="messageError">Please enter your message</div>
+                    </div>                    
                     <button type="submit" class="submit-button">Send Message</button>
                 </form>
                 <div id="successMessage" style="display: none; color: green; font-size: 18px; margin-top: 20px;"></div>