From 67a5160c58f582c7c652a8701217db782e60f288 Mon Sep 17 00:00:00 2001
From: tanmaysrivastava45 <tanmaysrivastava9868@gmail.com>
Date: Sat, 26 Oct 2024 21:23:26 +0530
Subject: [PATCH] changes in the contact us section of blog page

---
 assets/css/style.css | 70 ++++++++++++++++++++++++++++++++++++++++++++
 pages/blog.html      | 29 +++++++++---------
 2 files changed, 84 insertions(+), 15 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 158aa2b4..97dba357 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1469,6 +1469,76 @@ button:hover {
   transform: scale(1.1);
 }
 
+/*-----------------------------------*\
+  #CONTACT US SECTION IN BLOG
+\*-----------------------------------*/
+/* Styling for the custom contact section */
+#custom-contact.cta-custom {
+  background-color: #008080; /* Keeping the theme's teal color */
+  padding: 50px 0;          /* Reduced padding for a balanced height */
+}
+
+#custom-contact .container-custom {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 600px;
+  margin: 0 auto;           /* Center the form within the container */
+}
+
+/* Section title */
+#custom-contact .section-title-custom {
+  color: #ffffff;           /* White text for contrast */
+  margin-bottom: 30px;
+  font-size: 28px;          /* Larger title but keeping it compact */
+  text-align: center;       /* Center the title */
+}
+
+/* Custom contact form styling */
+#custom-contact-form {
+  width: 100%;
+  background-color: #ffffff;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Light shadow */
+}
+
+/* Input fields and textarea */
+#custom-contact-form input, #custom-contact-form textarea {
+  width: 100%;
+  padding: 12px;
+  margin-bottom: 15px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  font-size: 16px;
+}
+
+/* Textarea size adjustment */
+#custom-contact-form textarea {
+  height: 120px;
+}
+
+/* Button styling */
+#custom-contact-form button {
+  display: block;
+  width: 100%;
+  padding: 12px;
+  background-color: #008080;
+  color: #ffffff;
+  border: none;
+  border-radius: 5px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+/* Button hover effect */
+#custom-contact-form button:hover {
+  background-color: #006666; /* Darken on hover */
+}
+
+
+
 /*-----------------------------------*\
   #CONTAINER QUERIES
 \*-----------------------------------*/
diff --git a/pages/blog.html b/pages/blog.html
index 1d2fdfc0..3b1160b8 100644
--- a/pages/blog.html
+++ b/pages/blog.html
@@ -405,21 +405,20 @@ <h3 class="title-lg card-title">
       - #Contact Us
     -->
   
-      <section id="contact" class="cta" aria-labelledby="cta-label">
-        <div class="container">
-  
-          <h2 class="headline-md section-title" id="cta-label" data-aos="fade-right">
-            Contact Us
-          </h2>
-  
-          <form id="contact-form" data-aos="fade-left">
-            <input type="text" name="name" placeholder="Your Name" required>
-            <input type="email" name="email" placeholder="Your Email" required>
-            <textarea name="message" placeholder="Your Message" required></textarea>
-            <button type="submit">Send</button>
-          </form>
-        </div>
-      </section>
+    <section id="custom-contact" class="cta-custom" aria-labelledby="cta-label-custom">
+      <div class="container-custom">
+        <h2 class="headline-md section-title-custom" id="cta-label-custom" data-aos="fade-right">
+          Contact Us
+        </h2>
+      
+        <form id="custom-contact-form" data-aos="fade-left">
+          <input type="text" name="name" placeholder="Your Name" required>
+          <input type="email" name="email" placeholder="Your Email" required>
+          <textarea name="message" placeholder="Your Message" required></textarea>
+          <button type="submit">Send</button>
+        </form>
+      </div>
+    </section>
   
   
       <div class="footer-bottom">