Enhanced the contact us page (#36)

Rakesh9100 · Jan 7, 2025 · c39fa03 · c39fa03
1 parent 0e0c84c
commit c39fa03
Show file tree

Hide file tree

Showing 5 changed files with 138 additions and 94 deletions.
diff --git a/assets/contact/contact.css b/assets/contact/contact.css
@@ -1,3 +1,10 @@
+body {
+    margin: 0;
+    font-family: 'Poppins', sans-serif;
+    background-color: #f7f8fa;
+    color: #333;
+    line-height: 1.6;
+
 /* Dark mode Css */
 
 body.dark-mode .contact-section {
@@ -21,45 +28,54 @@ body.dark-mode .submit-button {
     color: #f4f4f4;
 }
 
-.contact-section {
-    padding: 80px 0;
-    background-color: #f8f9fa;
+/* Main container Css*/
+
+.contact-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    padding: 50px 20px 20px 20px;
+    min-height: calc(100vh - 120px);
+    gap: 100px;
 }
 
-.section-title {
-    font-size: 2.5rem;
-    margin-bottom: 40px;
-    text-align: center;
+.illustration-section img {
+    max-width: 100%;
+    width: 600px;
+    height: auto;
 }
 
-.contact-form {
-    max-width: 600px;
-    margin: 0 auto;
-    background-color: #ffffff;
-    padding: 40px;
+.form-section {
+    flex: 1;
+    max-width: 500px;
+    padding: 20px;
+    text-align: center;
+    background-color: #fff;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     border-radius: 8px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
-.form-group {
-    margin-bottom: 24px;
+.form-section h1 {
+    font-size: 2em;
+    color: #4a90e2;
+    margin-bottom: 10px;
 }
 
-label {
-    display: block;
-    margin-bottom: 8px;
-    font-weight: 600;
-    color: #555;
+.form-section p {
+    font-size: 1.1em;
+    margin-bottom: 20px;
 }
 
-input[type="text"],
-input[type="email"],
-textarea {
-    width: 100%;
-    padding: 12px;
-    border: 1px solid #e0e0e0;
-    border-radius: 4px;
-    font-size: 16px;
+.form-section input,
+.form-section textarea {
+    width: 99%;
+    padding: 10px;
+    margin: 10px 0;
+    border: 1px solid #ddd;
+    background-color: #e9eef5;
+    border-radius: 8px;
+    font-size: 1em;
     transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
 }
 
@@ -81,44 +97,74 @@ textarea:focus {
 }
 
 textarea {
-    height: 150px;
     resize: vertical;
 }
 
-.submit-button {
-    background-color: var(--primary-color);
-    color: #ffffff;
+.form-section button {
+    width: 100%;
+    padding: 10px;
+    background: #4a90e2;
+    color: #fff;
     border: none;
-    padding: 12px 24px;
-    font-size: 16px;
-    font-weight: 600;
-    border-radius: 4px;
+    border-radius: 8px;
+    font-size: 1em;
     cursor: pointer;
-    transition:
-        background-color 0.3s ease-in-out,
-        opacity 0.3s ease-in-out,
-        transform 0.3s ease-in-out,
-        box-shadow 0.3s ease-in-out;
+    transition: 0.3s ease;
 }
 
-.submit-button:hover {
-    background-color: var(--primary-color);
-    opacity: 0.9;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    transform: translateY(-2px);
+.form-section button:hover {
+    background: #3a78c2;
+    transform: scale(1.02);
 }
 
-.submit-button:active {
-    transform: translateY(0);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    transition: all 0.1s ease-in-out;
+.social-links {
+    margin-top: 20px;
 }
 
-.submit-button:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.3);
+.social-links a {
+    margin: 0 10px;
+    font-size: 1.5em;
+    color: #333;
+    text-decoration: none;
+    transition: color 0.3s ease;
 }
 
-.submit-button:focus:not(:active) {
-    transition: box-shadow 0.3s ease-in-out;
+.social-links a:hover {
+    color: #4a90e2;
+}
+
+/* Footer Css*/
+
+footer {
+    text-align: center;
+    padding: 15px 20px;
+    background-color: #333;
+    color: white;
+    font-size: 1em;
+}
+
+/* Media queries for responsiveness */
+
+@media (max-width: 768px) {
+    .contact-container {
+        gap: 10px;
+    }
+
+    .form-section {
+        max-width: 100%;
+    }
+}
+
+@media (max-width: 480px) {
+    .form-section h1 {
+        font-size: 1.5em;
+    }
+
+    .form-section p {
+        font-size: 0.9em;
+    }
+
+    footer {
+        font-size: 0.9em;
+    }
 }
diff --git a/assets/contact/contact.html b/assets/contact/contact.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="../../style.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap">
-    <title>Eventica | Contact Us</title>
+    <title>Eventica | Contact Us</title>    
 </head>
 
 <body>
@@ -57,37 +57,36 @@
 
     <!-- Contact form section -->
     <main>
-        <section class="contact-section">
-            <div class="container">
-                <h1 class="section-title">Contact Us</h1>
-                <form class="contact-form" name="Eventica Contact" autocomplete="off" netlify>
-                    <div class="form-group">
-                        <label for="name">Name</label>
-                        <input type="text" id="name" name="name" placeholder="Enter your name" required>
-                    </div>
-                    <div class="form-group">
-                        <label for="email">Email</label>
-                        <input type="email" id="email" name="email" placeholder="Enter your email" required>
-                    </div>
-                    <div class="form-group">
-                        <label for="message">Message</label>
-                        <textarea id="message" name="message" placeholder="Leave your message" required></textarea>
-                    </div>
-                    <button type="submit" class="submit-button">Send Message</button>
+        <div class="contact-container">
+            <div class="illustration-section">
+                <img src="../images/contact.png" alt="Contact Illustration">
+            </div>
+            <div class="form-section">
+                <h1>CONTACT US</h1>
+                <p>We would love to hear from you</p>
+                <form name="Eventica Contact" autocomplete="off" netlify>
+                    <input type="text" id="name" name="name" placeholder="Your Name" required>
+                    <input type="email" id="name" name="email" placeholder="Your Email" required>
+                    <textarea id="message" name="message" rows="5" placeholder="Your Message" required></textarea>
+
+                    <button type="submit">Send Message</button>
                 </form>
+                <div class="social-links">
+                    <a href="https://www.linkedin.com/in/rakesh-roshan-9100" target="_blank"><i class="fab fa-linkedin"></i></a>
+                    <a href="https://www.facebook.com/rakesh6203" target="_blank"><i class="fab fa-facebook"></i></a>
+                    <a href="https://twitter.com/rakeshroshan73" target="_blank"><i class="fab fa-twitter"></i></a>
+                </div>
             </div>
-        </section>
+        </div>
     </main>
 
     <!-- Footer section -->
-    <footer class="footer">
-        <div class="container">
-            <p class="copyright">Created By Rakesh Roshan ❤️ | ©
-                <script>
-                    document.write(new Date().getFullYear());
-                </script>: All Rights Reserved
-            </p>
-        </div>
+    <footer>
+        <p class="copyright">Created By Rakesh Roshan ❤️ | ©
+            <script>
+                document.write(new Date().getFullYear());
+            </script>: All Rights Reserved
+        </p>
     </footer>
 
     <!-- Scroll to top button -->

diff --git a/assets/images/contact.png b/assets/images/contact.png
diff --git a/index.html b/index.html
@@ -81,14 +81,12 @@ <h2 class="section-title">Upcoming Events</h2>
     </main>
 
     <!-- Footer section -->
-    <footer class="footer">
-        <div class="container">
-            <p class="copyright">Created By Rakesh Roshan ❤️ | ©
-                <script>
-                    document.write(new Date().getFullYear());
-                </script>: All Rights Reserved
-            </p>
-        </div>
+    <footer>
+        <p class="copyright">Created By Rakesh Roshan ❤️ | ©
+            <script>
+                document.write(new Date().getFullYear());
+            </script>: All Rights Reserved
+        </p>
     </footer>
 
     <!-- Scroll to top button -->

diff --git a/style.css b/style.css
@@ -456,11 +456,12 @@ body {
 
 /* Footer Css */
 
-.footer {
-    background-color: #333;
-    color: #fff;
+footer {
     text-align: center;
-    padding: 2rem 0;
+    padding: 15px 20px;
+    background-color: #333;
+    color: white;
+    font-size: 1em;
 }
 
 /* Dark mode Css */