Merge pull request #131 from srivishnu2805/main

5 webpages were made Responsive
vansh-codes · Oct 16, 2024 · 09759ec · 09759ec
2 parents 2c793a4 + ebff300
commit 09759ec
Show file tree

Hide file tree

Showing 6 changed files with 437 additions and 143 deletions.
diff --git a/ContactUs.html b/ContactUs.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,76 +9,129 @@
     <link rel="stylesheet" href="css/contactus.css">
     <style>
         body {
-            font-family: 'Arial', sans-serif; /* Default font */
-            font-weight: bold; /* Make all text bold */
-            margin: 0; /* Remove default margin */
-            padding: 20px; /* Add padding */
-            background-image: url('https://i.pinimg.com/736x/75/c6/55/75c655ef4817db78516e44a8ac2cde20.jpg'); /* Add your background image */
-            background-size: cover; /* Cover the entire background */
-            background-position: center; /* Center the background image */
-            color: #5c4b8a; /* Dark purple color for text */
+            font-family: 'Arial', sans-serif;
+            /* Default font */
+            font-weight: bold;
+            /* Make all text bold */
+            margin: 0;
+            /* Remove default margin */
+            padding: 0;
+            /* Remove padding */
+            height: 100vh;
+            /* Full height */
+            display: flex;
+            /* Use flexbox */
+            justify-content: center;
+            /* Center horizontally */
+            align-items: center;
+            /* Center vertically */
+            background-image: url('https://i.pinimg.com/736x/75/c6/55/75c655ef4817db78516e44a8ac2cde20.jpg');
+            /* Add your background image */
+            background-size: cover;
+            /* Cover the entire background */
+            background-position: center;
+            /* Center the background image */
+            color: #5c4b8a;
+            /* Dark purple color for text */
         }
 
         h1 {
-            margin-bottom: 20px; /* Spacing below the heading */
-            display: inline-block; /* Allow rotation */
-            animation: rotate 5s linear infinite; /* Animation applied */
-            font-size: 2.5em; /* Increase font size */
-            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Shadow for a cool effect */
+            margin-bottom: 20px;
+            /* Spacing below the heading */
+            display: inline-block;
+            /* Allow rotation */
+            animation: rotate 5s linear infinite;
+            /* Animation applied */
+            font-size: 2.5em;
+            /* Increase font size */
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+            /* Shadow for a cool effect */
         }
 
         @keyframes rotate {
             0% {
-                transform: rotate(0deg); /* Start position */
+                transform: rotate(0deg);
+                /* Start position */
             }
+
             100% {
-                transform: rotate(360deg); /* End position */
+                transform: rotate(360deg);
+                /* End position */
             }
         }
 
         .contact-form-container {
-            max-width: 400px; /* Set a max width for the form */
-            margin: 0 auto; /* Center the form */
-            position: relative; /* Position for layout */
-            padding: 20px; /* Padding around the form */
-            background: white; /* White background for form */
-            border-radius: 8px; /* Rounded corners */
-            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
-            opacity: 0.9; /* Slightly transparent to see background */
+            max-width: 400px;
+            /* Set a max width for the form */
+            width: 100%;
+            /* Full width */
+            /* Center the form */
+            position: relative;
+            /* Position for layout */
+            padding: 20px;
+            /* Padding around the form */
+            background: white;
+            /* White background for form */
+            border-radius: 8px;
+            /* Rounded corners */
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+            /* Soft shadow */
+            opacity: 0.9;
+            /* Slightly transparent to see background */
         }
 
         .form-group {
-            margin-bottom: 15px; /* Space between form groups */
-            width: 100%; /* Full width for inputs */
+            margin-bottom: 15px;
+            /* Space between form groups */
+            width: 100%;
+            /* Full width for inputs */
         }
 
         input[type="text"] {
-            width: 100%; /* Full width */
-            padding: 10px; /* Padding for inputs */
-            box-sizing: border-box; /* Include padding in width */
-            border: 1px solid #ccc; /* Border for inputs */
-            border-radius: 4px; /* Rounded corners */
-            font-size: 1em; /* Increase input font size */
+            width: 100%;
+            /* Full width */
+            padding: 10px;
+            /* Padding for inputs */
+            box-sizing: border-box;
+            /* Include padding in width */
+            border: 1px solid #ccc;
+            /* Border for inputs */
+            border-radius: 4px;
+            /* Rounded corners */
+            font-size: 1em;
+            /* Increase input font size */
         }
 
         button {
-            padding: 8px 12px; /* Smaller button size */
-            width: auto; /* Auto width for the button */
-            cursor: pointer; /* Pointer cursor on hover */
-            background-color: #5c4b8a; /* Dark purple button color */
-            color: white; /* Text color */
-            border: none; /* No border */
-            border-radius: 4px; /* Rounded corners */
-            margin-top: 10px; /* Space above button */
-            font-size: 1em; /* Button font size */
-            transition: background-color 0.3s; /* Transition effect for button */
+            padding: 8px 12px;
+            /* Smaller button size */
+            width: auto;
+            /* Auto width for the button */
+            cursor: pointer;
+            /* Pointer cursor on hover */
+            background-color: #5c4b8a;
+            /* Dark purple button color */
+            color: white;
+            /* Text color */
+            border: none;
+            /* No border */
+            border-radius: 4px;
+            /* Rounded corners */
+            margin-top: 10px;
+            /* Space above button */
+            font-size: 1em;
+            /* Button font size */
+            transition: background-color 0.3s;
+            /* Transition effect for button */
         }
 
         button:hover {
-            background-color: #452f63; /* Darker purple on hover */
+            background-color: #452f63;
+            /* Darker purple on hover */
         }
     </style>
 </head>
+
 <body>
     <!-- preloader -->
     <div class="container">
@@ -151,4 +205,5 @@ <h1>Contact Us</h1>
     <script src="js/script.js"></script>
     <script src="js/night_time.js"></script>
 </body>
+
 </html>