Enhanced contact us page

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5501
+    "liveServer.settings.port": 5502
 }

contact.css

@@ -410,9 +410,86 @@ text-align: left; /* Adjusts text alignment, optional */
     position: relative;
 }
 
-footer {
-    padding: 10px;
-    background-color: #f0cd9e66;
+.container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    min-height: calc(100vh - 120px);
+    gap: 20px;
+}
+
+.illustration-section img {
+    max-width: 100%;
+    width: 800px;
+    height: auto;
+
+}
+
+.form-section {
+    flex: 1;
+    max-width: 500px;
+    padding: 20px;
     text-align: center;
-    border: 4px solid #faebd7;
-  }
+    background-color: #fff;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+}
+
+.form-section h1 {
+    font-size: 2em;
+    color:  #d6a52b;
+    margin-bottom: 10px;
+}
+
+.form-section p {
+    font-size: 1.1em;
+    margin-bottom: 20px;
+}
+
+.form-section input,
+.form-section textarea {
+    width: 99%;
+    padding: 10px;
+    margin: 10px 0;
+    border: 1px solid #ddd;
+    background-color: #ffebb7;
+    border-radius: 8px;
+    font-size: 1em;
+}
+
+.form-section button {
+    width: 100%;
+    padding: 10px;
+    background:#e2b43d ;
+    color: #ffffff;
+    border: none;
+    border-radius: 8px;
+    font-size: 1em;
+    cursor: pointer;
+    transition: 0.3s ease;
+}
+
+.form-section button:hover {
+    background: #d6a52b ;
+
+    transform: scale(1.02);
+}
+
+.social-links {
+    margin-top: 20px;
+}
+
+.social-links a {
+    margin: 0 10px;
+    font-size: 1.5em;
+    color: #333;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.social-links a:hover {
+    color:  #d6a52b;
+}
+

contact.html

@@ -101,38 +101,31 @@ <h2>Ajivika</h2>
     </button>
 
     <!-- Contact Form Section -->
-    <section class="contact-section">
-      <h1><i class="fas fa-envelope icon"></i> Contact Us</h1>
-      <p>
-        We'd love to hear from you! Please fill out the form below with your
-        queries or feedback.
-      </p>
 
-      <form id="ContactForm">
-        <label for="name"><i class="fas fa-user icon"></i> Name:</label>
-        <!-- <input type="text" name="name" pattern="[A-Za-z\s\-']+" title="Name must only contain letters, spaces, hyphens, or apostrophes" required> -->
-        <input
-          type="text"
-          id="name"
-          name="name"
-          pattern="[A-Za-z\s\-']+"
-          title="Name must only contain letters,spaces,hyphens or apostrophes"
-          required
-        />
-
-        <label for="email"><i class="fas fa-envelope icon"></i> Email:</label>
-        <input type="email" id="email" name="email" required />
+    <div class="container">
+        <div class="illustration-section">
+            <img src="image copy.png" alt="Contact Illustration">
+        </div>
+        <div class="form-section">
+            <h1>CONTACT US</h1>
+            <p>We would love to hear from you</p>
+            <form>
+                <input type="text" name="name" placeholder="Your Name" required>
+                <input type="email" name="email" placeholder="Your Email" required>
+                <textarea name="message" rows="5" placeholder="Your Message" required></textarea>
+                <button type="submit">Send Message</button>
+            </form>
+            <div class="social-links">
+                <a href="https://facebook.com" target="_blank"><i class="fab fa-facebook"></i></a>
+                <a href="https://twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>
+                <a href="https://instagram.com" target="_blank"><i class="fab fa-instagram"></i></a>
+                <a href="https://linkedin.com" target="_blank"><i class="fab fa-linkedin"></i></a>
+            </div>
+        </div>
+    </div>
 
-        <label for="message"
-          ><i class="fas fa-comment icon"></i> Message:</label
-        >
-        <textarea id="message" name="message" rows="3" required></textarea>
+
 
-        <button type="submit" class="submit">
-          <i class="fas fa-paper-plane"></i> Submit
-        </button>
-      </form>
-    </section>
     <!-- Floating Image Button -->
     <button class="image-button">
       <img src="./image.png" alt="Image Button" class="image-icon" />