From c6617b3b9d25849b084c6d1bec79fd72a88cb0f8 Mon Sep 17 00:00:00 2001
From: Nimtharu jayasekara <sagn.jayasekara@gmail.com>
Date: Mon, 14 Oct 2024 11:47:30 +0530
Subject: [PATCH 1/2] Improve responsiveness of Contact Us page

---
 about-us.html   |  2 +-
 contact-us.html |  2 +-
 index.html      |  2 +-
 project.html    |  2 +-
 style.css       | 49 +++++++++++++++++++++++++++++++++++++++++++++++--
 5 files changed, 51 insertions(+), 6 deletions(-)

diff --git a/about-us.html b/about-us.html
index 3bf1f10..383069e 100644
--- a/about-us.html
+++ b/about-us.html
@@ -66,7 +66,7 @@
               
               <a href="contact-us.html">
                 <button class="add" onclick='window.open("contact-us.html","_self")'>
-                  Content Us &nbsp; <i class="fa-solid fa-address-book"></i>
+                  Contact Us &nbsp; <i class="fa-solid fa-address-book"></i>
                 </button>
               </a>
               <button class="dark-btn about-dark"><img id="icon" src="dark.png" alt="Dark" style="right: 0%;top: 0%;"></img></button>
diff --git a/contact-us.html b/contact-us.html
index a92b852..d8d69a1 100644
--- a/contact-us.html
+++ b/contact-us.html
@@ -48,7 +48,7 @@
                 </a>
                 <a href="contact-us.html">
                     <button class="add" onclick='window.open("contact-us.html","_self")'>
-                      Content Us &nbsp; <i class="fa-solid fa-address-book"></i>
+                      Contact Us &nbsp; <i class="fa-solid fa-address-book"></i>
                     </button>
                   </a>
                 <button class="dark-btn"><img id="icon" src="dark.png" alt="Dark"></img></button>
diff --git a/index.html b/index.html
index 505e091..f485015 100644
--- a/index.html
+++ b/index.html
@@ -49,7 +49,7 @@
                 
                     <a href="contact-us.html">
                         <button class="add" onclick='window.open("contact-us.html","_self")'>
-                          Content Us &nbsp; <i class="fa-solid fa-address-book"></i>
+                          Contact Us &nbsp; <i class="fa-solid fa-address-book"></i>
                         </button>
                     </a>
                     <button class="dark-btn"><img id="icon" src="dark.png" alt="Dark"></img></button>
diff --git a/project.html b/project.html
index 1a07cc0..8251ef1 100644
--- a/project.html
+++ b/project.html
@@ -46,7 +46,7 @@
                 
                         <a href="contact-us.html">
                             <button class="add" onclick='window.open("contact-us.html","_self")'>
-                            Content Us &nbsp; <i class="fa-solid fa-address-book"></i>
+                            Contact Us &nbsp; <i class="fa-solid fa-address-book"></i>
                             </button>
                         </a>
                         <button class="dark-btn"><img id="icon" src="dark.png" alt="Dark"></img></button>
diff --git a/style.css b/style.css
index 6ff3192..8e0d2d4 100644
--- a/style.css
+++ b/style.css
@@ -777,7 +777,7 @@ footer {
 
 /* Contact container styling */
 .contact-container {
-  max-width: 800px;
+  max-width: 50rem;
   margin: 50px auto;
   padding: 50px;
   background-color: #f9f9f9;
@@ -795,7 +795,8 @@ footer {
 /* Input and textarea styling */
 .contact-form input,
 .contact-form textarea {
-  width: 100%;
+  width: 30rem;
+  max-width: 30rem;
   padding: 15px;
   background-color: #fff;
   border: 1px solid #ddd;
@@ -854,3 +855,47 @@ footer {
   font-weight: bold;
   text-decoration: none;
 }
+
+@media (max-width: 768px) {
+  /* Contact container styling */
+.contact-container {
+  max-width: 90%;
+  margin: 5%;
+  padding: 5%;
+} 
+
+
+/* Button styling */
+.contact-form button {
+  width: 80%;
+}
+}
+
+@media (max-width: 620px) {
+
+  .contact-container {
+    max-width: 100%;
+    margin: 5%;
+    padding: 5%;
+  }
+
+  .contact-form .input-group {
+    width: 75%;
+  }
+
+  .contact-form input,
+  .contact-form textarea {
+    margin: 5% 40% 0 5%;
+    max-width: 100%;
+  }
+
+  .contact-form button {
+    width: 60%;
+  }
+}
+
+@media (max-width: 450px) {
+  .contact-form .input-group {
+    width: 55%;
+  }
+}

From 46aa657096e70ec4496afa55cc9aea632b6415aa Mon Sep 17 00:00:00 2001
From: Nimtharu jayasekara <sagn.jayasekara@gmail.com>
Date: Mon, 14 Oct 2024 17:43:13 +0530
Subject: [PATCH 2/2] Contact Us page responsiveness improvement

---
 style.css | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/style.css b/style.css
index 8e0d2d4..a0f56d3 100644
--- a/style.css
+++ b/style.css
@@ -786,6 +786,9 @@ footer {
   color: #333;
   font-family: "Poppins", sans-serif;
 } 
+.contact-form {
+  width: 100%;
+}
 
 /* Input group styling */
 .contact-form .input-group {
@@ -867,7 +870,7 @@ footer {
 
 /* Button styling */
 .contact-form button {
-  width: 80%;
+  width: 90%;
 }
 }
 
@@ -880,22 +883,18 @@ footer {
   }
 
   .contact-form .input-group {
-    width: 75%;
+    width: 90%;
   }
 
   .contact-form input,
   .contact-form textarea {
-    margin: 5% 40% 0 5%;
+    margin: 5% 20% 0 5%;
     max-width: 100%;
   }
-
   .contact-form button {
-    width: 60%;
+    width: 100%;
+    margin: 5% 20% 0 5%;
   }
-}
 
-@media (max-width: 450px) {
-  .contact-form .input-group {
-    width: 55%;
-  }
 }
+