From d44e6808ea95c061e8adcc30b8e2949f3a6efe07 Mon Sep 17 00:00:00 2001
From: Aditya Singh <aditya9855@gmail.com>
Date: Sun, 8 Oct 2023 16:57:55 +0530
Subject: [PATCH] Contact Form Ready

---
 index.html |  30 ++++++-------
 style.css  | 126 ++++++++++++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 128 insertions(+), 28 deletions(-)

diff --git a/index.html b/index.html
index bc19121..6fd1850 100644
--- a/index.html
+++ b/index.html
@@ -558,23 +558,19 @@ <h2>Contact us</h2>
                     </div>
                 </div>
                 <div class="form-container">
-                    <h2>Your Details</h2>
-                    <form action="#" method="POST">
-
-                        <label for="name">Name: </label>
-                        <input type="text" id="name" name="name" required>
-
-                        <label for="email">Email: </label>
-                        <input type="email" id="email" name="email" required>
-
-                        <label for="phone">Phone: </label>
-                        <input type="tel" id="phone" name="phone">
-
-                        <label for="message">Message: </label>
-                        <textarea id="message" name="message" rows="4" required></textarea>
-
-                        <button type="submit" class="submit-button">Submit</button>
-
+                    <h2 class="Git">Get In Touch</h2>
+                    <form action="#" method="POST"> 
+                        <div class="flname">
+                            <label for="name">Name: </label>
+                            <input class="input"type="text" id="name" name="name" required>
+                            <label for="email">Email: </label>
+                            <input class="input"type="email" id="email" name="email" required>
+                            <label for="phone">Phone: </label>
+                            <input class="input"type="tel" id="phone" name="phone">
+                            <label for="message">Message: </label>
+                            <textarea id="message" name="message" rows="4" required></textarea>   
+                            <button type="submit" class="submit-button">Submit</button>
+                        </div>                           
                     </form>
                 </div>
         </section>
diff --git a/style.css b/style.css
index 713dd91..97394ac 100644
--- a/style.css
+++ b/style.css
@@ -2,6 +2,7 @@
 
 html {
   scroll-behavior: smooth;
+  overflow-x: hidden;
 }
 
 body {
@@ -287,12 +288,16 @@ footer {
 }
 
 .form-container {
-    max-width: 55%;
-    margin: 0 auto;
-    padding: 20px;
-    background-color: #ffffff;
-    border-radius: 10px;
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+  width:60%;
+  margin: 0 auto;
+  padding: 20px;
+  background-color: #fceaea;
+  border-radius: 10px;
+  box-shadow: 0 0 5px 5px #f3cccc;
+}
+
+.form-container:hover {
+  box-shadow: 5px 5px 15px 15px #f3cccc;
 }
 
 .contact-form h2 {
@@ -308,24 +313,123 @@ footer {
   display: block;
   font-weight: bold;
 }
-.form-container input,
-textarea {
+
+.form-container input, textarea {
   width: 100%;
+  outline: none;
+  background-color: #f3cccc;
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 4px;
   margin-bottom: 1rem;
   resize: vertical;
 }
+
 .submit-button {
-    padding: 10px 20px;
-    background-color: #0dac30;
+  width: 120px;
+  padding: 10px;
+  margin-top: 20px;
+  background-color: #f0c5c5;
+  border: none;
+  color: white;
+  position: relative;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  font-size: 1rem;
+  transition: 0.3s;
+  cursor: pointer;
+}
+
+.submit-button:hover{
+  background-color: salmon;
+  box-shadow: 2px 3px 6px 3px #cfa9a9;
+  outline: none;
+}
+
+/*  media queries for making contact us form responnsive */
+@media only screen and (max-width: 768px) and (min-width: 330px)  {
+  .contact-form {
+    padding: 20px 0;
+    margin: 0 5px;
+  }
+  
+  .form-container {
+    width: 90%;
+    
+    padding: 20px;
+    background-color: #fceaea;
+    border-radius: 10px;
+    box-shadow: 0 0 4px 4px #f3cccc;
+  }
+  .form-container:hover {
+    box-shadow: 3px 3px 10px 10px #f3cccc;  
+  }
+  
+  .contact-form h2 {
+    text-align: center;
+    margin-bottom: 20px;
+  }
+  
+  .form-group {
+    margin-bottom: 10px;
+  }
+  
+  .form-container label {
+    display: block;
+    font-weight: bold;
+  }
+  label{
+    width: auto;
+    height: fit-content;
+    font-size: small;
+  }
+  .input{
+    width: auto;
+    height: 30px;
+  }
+  .Git{
+    font-size: larger;
+    font-weight: 800;
+  }
+  textarea {
+    width: 100%;
+    height: auto;
+    outline: none;
+    background-color: #f3cccc;
+    padding: 10px;
+    font-size: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    margin-bottom: 1rem;
+    resize: vertical;
+  } 
+  .submit-button {
+    width: 80px;
+    padding: 8px;
+    margin-top: 10px;
+    background-color: #f0c5c5;
     border: none;
     color: white;
+    position: relative;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    justify-content: center;
+    align-items: center;
     border-radius: 4px;
-    font-size: 1rem;
+    font-size: 0.8rem;
+    transition: 0.3s;
     cursor: pointer;
+  }
+  .submit-button:hover{
+    background-color: salmon;
+    box-shadow: 1px 2px 4px 2px #cfa9a9;
+    outline: none;
+  }
 }
+
 /* added css to correct the view of contact form for different devices */
 @media (min-width: 1200px){
     .form-container{