Merge pull request #858 from tanmaysrivastava45/shivam

feat : changes in the contact us section of blog page
PriyaGhosal · Oct 30, 2024 · 3973afc · 3973afc
2 parents 62bb97c + 67a5160
commit 3973afc
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 15 deletions.
diff --git 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
@@ -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">