From 52d7a46bed246d17d750dd9780317167c1023d48 Mon Sep 17 00:00:00 2001
From: srishti <srishtichoudhary52@gmail.com>
Date: Mon, 14 Oct 2024 19:34:56 +0530
Subject: [PATCH] Responsiveness to all pages

---
 Css-files/about.css         |   2 +-
 Css-files/content.css       |   5 +-
 Css-files/login1.css        |   2 +-
 Css-files/signup1.css       |   4 +-
 Html-files/booknow.html     |   8 +-
 Html-files/contact.html     |  25 +++---
 Html-files/forgot-pass.html |   4 +-
 Html-files/login.html       | 156 ++++++++++++++++++++++++------------
 Html-files/menu.html        |  46 +++++------
 Html-files/services.html    |  11 +--
 index.html                  |   4 +
 style.css                   |   3 +
 12 files changed, 161 insertions(+), 109 deletions(-)

diff --git a/Css-files/about.css b/Css-files/about.css
index 46e4c152..27ec4701 100644
--- a/Css-files/about.css
+++ b/Css-files/about.css
@@ -105,7 +105,7 @@
   }
   .mainhead h1 {
     font-family: Georgia;
-    font-size: 3.8rem;
+    font-size: 3rem;
     color: white;
     padding-bottom: 20px;
   }
diff --git a/Css-files/content.css b/Css-files/content.css
index 7dbdf3be..312b0685 100644
--- a/Css-files/content.css
+++ b/Css-files/content.css
@@ -123,7 +123,7 @@ body {
 }
 .mainhead h1 {
   font-family: Georgia;
-  font-size: 3.8rem;
+  font-size: 3rem;
   color: white;
   padding-bottom: 20px;
 }
@@ -240,6 +240,7 @@ input[type="submit"]:hover {
 
 .first_cont {
   display: flex;
+  flex-wrap: wrap;
   justify-content: center;
 }
 
@@ -288,6 +289,7 @@ input[type="submit"]:hover {
 }
 .second_cont{
   display: flex;
+  flex-wrap: wrap;
   padding: 40px;
   justify-content: center;
 }
@@ -562,7 +564,6 @@ td{
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  width: 20rem;
   height: max-content;
 }
 
diff --git a/Css-files/login1.css b/Css-files/login1.css
index 3ba147a6..cbe234ea 100644
--- a/Css-files/login1.css
+++ b/Css-files/login1.css
@@ -129,7 +129,7 @@ body {
 }
 
 .textfield > input {
-  width: 100%;
+  width: 95%;
   height: 45px;
   border-radius: 15px;
   border: 1px solid #b38484;
diff --git a/Css-files/signup1.css b/Css-files/signup1.css
index 11321066..ce2ce7f5 100644
--- a/Css-files/signup1.css
+++ b/Css-files/signup1.css
@@ -24,7 +24,6 @@ body {
   align-items: center;
   height: 100vh; /* Full viewport height */
   padding: 20px; /* Padding to avoid overflow */
-  overflow: hidden; /* Prevents overflow */
   position:relative;
 }
 
@@ -154,14 +153,13 @@ body {
 }
 
 /* Responsive design for smaller screens */
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 980px) {
   .main-login {
     flex-direction: column;
     padding: 0 20px; /* Added padding to avoid edge overflow */
   }
 
   .card-login {
-    width: 100%; /* Full width for mobile */
     padding: 20px; /* Adjust padding */
   }
 }
diff --git a/Html-files/booknow.html b/Html-files/booknow.html
index 20582276..50b03c84 100644
--- a/Html-files/booknow.html
+++ b/Html-files/booknow.html
@@ -66,16 +66,14 @@
             padding: 0.5em 0;
         }
         .gallery {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-around;
-            gap: 1em;
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 3 columns with a minimum size of 300px */
+            gap: 3rem;
         }
         .gallery .item {
             border: 1px solid #ddd;
             border-radius: 5px;
             overflow: hidden;
-            width: 23%;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
             transition: transform 0.2s;
             text-align: center;
diff --git a/Html-files/contact.html b/Html-files/contact.html
index d01a6289..29a10071 100644
--- a/Html-files/contact.html
+++ b/Html-files/contact.html
@@ -204,7 +204,7 @@
         .foot-panel2 {
             background-color: rgb(138, 37, 37);
             color: white;
-            height: 300px;
+            height: auto;
             /* height: fit-content; */
             display: flex;
             /* padding: 10px; */
@@ -237,7 +237,7 @@
             flex-direction: column;
             justify-content: center;
             align-items: center;
-            width: 20rem;
+            width: 100%;
             height: max-content;
         }
 
@@ -251,6 +251,7 @@
         }
 
         #contactForm h3 {
+            margin-top: 10px;
             height: 30px;
             color: #141414;
         }
@@ -273,7 +274,7 @@
         .foot_panel4 {
             background-color: rgb(66, 16, 16);
             color: white;
-            height: 160px;
+            height: 0px;
             font-size: 0.9rem;
             text-align: center;
         }
@@ -793,16 +794,20 @@ <h1 style="color: hsl(357, 53%, 8%); font-family: Tahoma, sans-serif;">
                     <a href="./Html-files/payment2.html" style="color: black;">Mobile Wallets</a>
                     <a href="./Html-files/payment2.html" style="color: black;">Contactless Payments</a>
                 </ul>
+            </div>
+
+
+            <div class="foot_panel4" style="background-color: transparent;">
                 <form id="contactForm">
                     <h3 style="font-family: var(--ff-philosopher); color: hsl(357, 82%, 35%);">Contact Us!</h3>
                 
-                    <div style="position: relative; margin-bottom: 15px;">
+                    <div style="position: relative; margin-bottom: 15px; width: 50%;">
                         <i class="fas fa-envelope" style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 14px; color: gray;"></i>
                         <input type="email" id="email" name="email" placeholder="Your Email" required 
                                style="padding-left: 30px;">
                     </div>
                 
-                    <div style="position: relative; margin-bottom: 15px;">
+                    <div style="position: relative; margin-bottom: 15px; width: 50%;">
                         <i class="fas fa-comment" style="position: absolute; left: 10px; top: 10px; font-size: 14px; color: gray;"></i>
                         <textarea id="message" name="message" placeholder="Your Message" required 
                                   style="padding-left: 30px;"></textarea>
@@ -810,16 +815,6 @@ <h3 style="font-family: var(--ff-philosopher); color: hsl(357, 82%, 35%);">Conta
                 
                     <button id="butt" type="submit" style="font-family: ui-serif;">Send Message</button>
                 </form>
-                
-                
-                
-                  
-                
-
-            </div>
-
-
-            <div class="foot_panel4" style="background-color: transparent;">
                 <div class="pages">
                     <h4 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Follow Us</h4>
 
diff --git a/Html-files/forgot-pass.html b/Html-files/forgot-pass.html
index 07fe7eaf..63b7b183 100644
--- a/Html-files/forgot-pass.html
+++ b/Html-files/forgot-pass.html
@@ -32,7 +32,9 @@
       <div class="circle" style="background-color: rgb(96, 0, 95) !important; left: 504px; top: 59px; scale: 0.05;"></div>
   </div>
       <div class="home-btn"><a href="../index.html" style="font-family: var(--ff-philosopher);"><b>Retro</b></a></div>
-      <div class="container">
+      <div class="container" style="display: flex;
+      align-items: center;
+      justify-content: center;">
         <div class="card-forgot">
             <h1>Forgot Password</h1>
             <form id="forgotPassForm">
diff --git a/Html-files/login.html b/Html-files/login.html
index ecdbcf41..9ebeb68b 100644
--- a/Html-files/login.html
+++ b/Html-files/login.html
@@ -16,39 +16,59 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
     <style>
-
-      .circle{
-      z-index: 998;
-      width: 20px;
-      height: 20px;
-      border-radius: 50%;
-      pointer-events: none;
-      animation: colors 5s infinite;
-      position: fixed;
-      transform: translate(-50%,-50%);
+      /* General styles for the circles */
+      .circle-container {
+        position: relative;
+      }
+    
+      .circle {
+        z-index: 998;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        pointer-events: none;
+        animation: colors 5s infinite;
+        position: fixed;
+        transform: translate(-50%, -50%);
       }
+    
       .circle::before {
-      content: "";
-      position: fixed;
-      width: 50px;
-      height: 50px;
-      opacity: 0.2;
-      transform: translate(-30%,-30%);
-      border-radius: 50%;
+        content: "";
+        position: fixed;
+        width: 50px;
+        height: 50px;
+        opacity: 0.2;
+        transform: translate(-30%, -30%);
+        border-radius: 50%;
       }
-      </style>
-      <style>
-        .container {
+    
+      /* Main container */
+      .main-login {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        min-height: 100vh;
+        overflow-y: auto;
+      }
+    
+      /* Styling for left side (login info) */
+      .left-login {
+        flex: 1;
+        text-align: center;
+        padding: 20px;
+      }
+    
+      .container {
         width: 350px;
         height: 500px;
         perspective: 800px;
       }
-      
+    
       .container:hover > .card {
         cursor: pointer;
         transform: rotateY(180deg);
       }
-      
+    
       .card {
         height: 100%;
         width: 100%;
@@ -57,7 +77,7 @@
         transform-style: preserve-3d;
         border-radius: 40px;
       }
-      
+    
       .front,
       .back {
         height: 100%;
@@ -67,14 +87,14 @@
         position: absolute;
         backface-visibility: hidden;
       }
-      
+    
       .front {
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
       }
-      
+    
       .back {
         background-color: #3a3a3a;
         transform: rotateY(180deg);
@@ -84,40 +104,72 @@
         align-items: center;
         gap: 5rem;
       }
-      :root{
-                  --ff-philosopher: "Philosopher", sans-serif;
-                  --ff-poppins: "Poppins", sans-serif;
-              }
-      </style>
-      <style>
-        /* Styles for the switch link */
-        .switch-link {
-          margin-top: 20px;
-          font-family: var(--ff-poppins);
-          text-align: center;
-          color: hsl(203, 30%, 26%);
+    
+
+    
+      /* Media Queries for smaller screens */
+      @media (max-width: 768px) {
+        .main-login {
+          flex-direction: column;
         }
     
-        .switch-link a {
-          color: hsl(0, 100%, 50%);
-          text-decoration: none;
-          font-weight: bold;
-          transition: color 0.3s ease;
+        .container {
+          width: 300px;
+          height: 400px;
+        }
+    
+        .left-login,
+        .right-login {
+          flex: unset;
+          width: 100%;
+          padding: 10px;
+        }
+    
+        .card-login {
+          padding: 15px;
+          width: 100%;
+        }
+        .right-login{
+          height: 60vh;
+        }
+    
+        .btn-login,
+        #google-login {
+          width: 100%;
+          padding: 12px;
+        }
+    
+        h1 {
+          font-size: 24px;
+        }
+      }
+    
+      @media (max-width: 480px) {
+        .container {
+          width: 250px;
+          height: 350px;
+        }
+    
+        .card-login {
+          padding: 10px;
         }
     
-        .switch-link a:hover {
-          color: hsl(203, 30%, 26%);
+        .textfield label {
+          font-size: 14px;
         }
-        .forgot-link{
-          text-decoration: none;
-          color: #3a3a3a;
-          margin-bottom: 10px;
+    
+        .textfield input {
+          padding: 8px;
         }
-        .forgot-link:hover{
-          text-decoration: underline;
-          color: #000;
+    
+        .btn-login,
+        #google-login {
+          padding: 10px;
+          font-size: 14px;
         }
-      </style>
+      }
+    </style>
+    
 </head>
 <body>
   <div class="circle-container">
diff --git a/Html-files/menu.html b/Html-files/menu.html
index 3a035e55..1fa4b29b 100644
--- a/Html-files/menu.html
+++ b/Html-files/menu.html
@@ -734,34 +734,32 @@ <h3 style="font-family:var(--ff-philosopher);">Palsnkin</h3>
                 <a style="font-family: var(--ff-poppins);color: black;">Mobile Wallets</a>
                 <a style="font-family: var(--ff-poppins);color: black;">Contactless Payments</a>
             </ul>
+            <form id="contactForm">
+                <h3 style="font-family: var(--ff-philosopher); color: hsl(357, 82%,35%); font-size: 26px; margin-bottom: 3px;">
+                    Contact Us!
+                </h3>
+            
+                <!-- Email Input with Icon -->
+                <div style="position: relative; margin-bottom: 15px;">
+                    <i class="fas fa-envelope" style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 14px; color: hsl(208, 7%,46%);"></i>
+                    <input type="email" id="email" name="email" placeholder="Your Email" required 
+                           style="padding-left: 30px; width: 100%;">
+                </div>
+            
+                <!-- Message Input with Icon -->
+                <div style="position: relative; margin-bottom: 15px;">
+                    <i class="fas fa-comment" style="position: absolute; left: 10px; top: 10px; font-size: 14px; color: hsl(208, 7%,46%);"></i>
+                    <textarea id="message" name="message" placeholder="Your Message" required 
+                              style="padding-left: 30px; width: 100%;"></textarea>
+                </div>
+            
+                <!-- Submit Button -->
+                <button id="butt" type="submit" style="font-family: var(--ff-poppins);">Send Message</button>
+            </form>
 
 <!-- Include Font Awesome -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 
-<form id="contactForm">
-    <h3 style="font-family: var(--ff-philosopher); color: hsl(357, 82%,35%); font-size: 26px; margin-bottom: 3px;">
-        Contact Us!
-    </h3>
-
-    <!-- Email Input with Icon -->
-    <div style="position: relative; margin-bottom: 15px;">
-        <i class="fas fa-envelope" style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 14px; color: hsl(208, 7%,46%);"></i>
-        <input type="email" id="email" name="email" placeholder="Your Email" required 
-               style="padding-left: 30px; width: 100%;">
-    </div>
-
-    <!-- Message Input with Icon -->
-    <div style="position: relative; margin-bottom: 15px;">
-        <i class="fas fa-comment" style="position: absolute; left: 10px; top: 10px; font-size: 14px; color: hsl(208, 7%,46%);"></i>
-        <textarea id="message" name="message" placeholder="Your Message" required 
-                  style="padding-left: 30px; width: 100%;"></textarea>
-    </div>
-
-    <!-- Submit Button -->
-    <button id="butt" type="submit" style="font-family: var(--ff-poppins);">Send Message</button>
-</form>
-
-
 
         </div>
 
diff --git a/Html-files/services.html b/Html-files/services.html
index 519e7817..cbf876d6 100644
--- a/Html-files/services.html
+++ b/Html-files/services.html
@@ -76,10 +76,14 @@
   transform: translate(-30%,-30%);
   border-radius: 50%;
 }
+html{
+    overflow-x: hidden;
+}
 body{
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
   background-size: cover;
   background-attachment: fixed;
+  overflow-x: hidden;
 }
 ::-webkit-scrollbar {
   width: 10px; 
@@ -609,7 +613,9 @@ <h3 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Retro
                         style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">Contactless
                         Payments</a>
                 </ul>
+            </div>
 
+            <div class="foot_panel4" style="font-family: Garamond;">
                 <form id="contactForm">
                     <h3 style="font-family: var(--ff-philosopher); color: hsl(203, 30%, 26%);">Contact Us!</h3>
                 
@@ -630,11 +636,6 @@ <h3 style="font-family: var(--ff-philosopher); color: hsl(203, 30%, 26%);">Conta
                     <!-- Submit Button -->
                     <button id="butt" type="submit" style="font-family: var(--ff-poppins); color: hsl(208, 7%, 46%);">Send Message</button>
                 </form>
-                
-
-            </div>
-
-            <div class="foot_panel4" style="font-family: Garamond;">
                 <div class="pages">
                     <h4
                         style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Follow
diff --git a/index.html b/index.html
index ca578726..15999309 100644
--- a/index.html
+++ b/index.html
@@ -333,6 +333,10 @@
     .card-image {
         max-height: 150px; /* Adjust max height for smaller screens */
     }
+    .foot-panel2{
+        display: flex;
+        flex-direction: column;
+    }
 }
 
 
diff --git a/style.css b/style.css
index e7549cae..85f9e748 100644
--- a/style.css
+++ b/style.css
@@ -392,6 +392,9 @@ body {
 
 .menu_items {
   display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+    align-items: center;
   overflow: hidden;
 }