From b17ff67ae935724b6a678bca0e29add53449dadc Mon Sep 17 00:00:00 2001
From: Bhavy_Zala <zalabhavy2004@gmail.com>
Date: Thu, 11 Jul 2024 19:29:01 +0530
Subject: [PATCH] Our plan page contact improve

---
 our plan.html | 115 +++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 96 insertions(+), 19 deletions(-)

diff --git a/our plan.html b/our plan.html
index 2c4f1cbb..7d0aaa19 100644
--- a/our plan.html	
+++ b/our plan.html	
@@ -68,6 +68,87 @@
       transform: rotate(-90deg);
       transform-origin: 50% 50%;
     }
+    .contact {
+      padding: 80px 0;
+      text-align: center;
+    }
+    
+    .container {
+      max-width: 600px;
+      margin: 0 auto;
+      background-color: #fff;
+      padding: 30px;
+      border-radius: 8px;
+      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+    }
+    
+    .container h2 {
+      font-size: 32px;
+      margin-bottom: 5px;
+    }
+    
+    .container p {
+      color: #666;
+      margin-bottom: 10px;
+    }
+    .contact-form
+    {
+      width: 500px;
+    }
+    
+    @media screen and (max-width: 768px) {
+      .contact-form
+      {
+        width: 350px;
+      }
+    }
+    
+    .contact-form .form-group {
+      margin-bottom: 10px;
+    }
+    
+    .contact-form label {
+      display: block;
+      font-size: 18px;
+      color: #333;
+      margin-bottom: 4px;
+    }
+    
+    .contact-form input[type="text"],
+    .contact-form input[type="email"],
+    .contact-form textarea {
+      width: 100%;
+      padding: 12px;
+      font-size: 16px;
+      border: 1px solid #ccc;
+      border-radius: 5px;
+      transition: border-color 0.3s ease;
+    }
+    
+    .contact-form textarea {
+      height: 120px;
+    }
+    
+    .contact-form input[type="text"]:focus,
+    .contact-form input[type="email"]:focus,
+    .contact-form textarea:focus {
+      border-color: #f1c11a;
+    }
+    
+    .contact-form button {
+      background-color: #f1c11a;
+      color: #fff;
+      border: none;
+      padding: 14px 20px;
+      font-size: 18px;
+      cursor: pointer;
+      border-radius: 5px;
+      transition: background-color 0.3s ease;
+    }
+    
+    .contact-form button:hover {
+      background-color: #d1a10a;
+    }
   </style>
 
 </head>
@@ -120,7 +201,7 @@
     let radius = circle.r.baseVal.value;
     let circumference = 2 * Math.PI * radius;
 
-    circle.style.strokeDasharray = `${circumference} ${circumference}`;
+    circle.style.strokeDasharray = ${circumference} ${circumference};
     circle.style.strokeDashoffset = circumference;
 
     window.onscroll = function () {
@@ -223,36 +304,32 @@ <h2>Project Contributions</h2>
       </ul>
     </section>
 
-    <section class="contact" id="contact">
-      <div style="padding-right: 0px; margin-right: 0px;">
-
-        <h2>Contact</h2>
-        <p>
-          If you have any questions or need support, feel free to reach out to
-          us:
-        </p>
-      </div>
-
-      <div>
-
+    <section class="contact">
+      <div class="container">
+        <h2>Contact Us</h2>
+        <p>If you have any questions or need support, feel free to reach out to us:</p>
+  
         <form class="contact-form" id="contact-form">
-          <div style="display: flex; gap:5px">
+          <div class="form-group">
             <label for="name">Name:</label>
-            <input type="text" id="name" name="name" required />
+            <input type="text" id="name" name="name" required>
           </div>
-          <div style="display: flex; gap:5px">
+  
+          <div class="form-group">
             <label for="email">Email:</label>
-            <input type="email" id="email" name="email" required />
+            <input type="email" id="email" name="email" required>
           </div>
-          <div style="display: flex; gap:5px">
+  
+          <div class="form-group">
             <label for="message">Message:</label>
             <textarea id="message" name="message" required></textarea>
           </div>
+  
           <button type="submit">Submit</button>
-
         </form>
       </div>
     </section>
+
   </main>
 
   <special-footer></special-footer>