Responsiveness to all pages

Anjaliavv51 · Oct 14, 2024 · 52d7a46 · 52d7a46
1 parent 663100b
commit 52d7a46
Show file tree

Hide file tree

Showing 12 changed files with 161 additions and 109 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,33 +794,27 @@ <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>
                     </div>
 
                     <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
@@ -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
@@ -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">