diff --git a/login-modified.html b/login-modified.html
index 6fdda140..ded482a6 100644
--- a/login-modified.html
+++ b/login-modified.html
@@ -1,54 +1,103 @@
-
-
-
-
+
+
+
+
Login
-
-
-
+
+
+
-
-
-
Tourguide|
-
- Welcome to TourGuide, where we firmly believe that life's
- true purpose unfolds amidst the thrill of exploration, the embrace of the unfamiliar, and the
- pursuit of the extraordinary! Our mission is to embolden you, the intrepid traveler, to unveil this
- purpose and elevate your journey by providing unparalleled assistance and guidance.
-
-
-
- Not signed up? Sign In
-
-
-
+
+
+
+ Tourguide|
+
+
+ Welcome to TourGuide, where we firmly believe that life's true purpose
+ unfolds amidst the thrill of exploration, the embrace of the
+ unfamiliar, and the pursuit of the extraordinary! Our mission is to
+ embolden you, the intrepid traveler, to unveil this purpose and
+ elevate your journey by providing unparalleled assistance and
+ guidance.
+
+
+
+
+ Not signed up? Sign In
+
+
+
-
-
\ No newline at end of file
+
+
diff --git a/login.css b/login.css
index 2c758567..7450b7e1 100644
--- a/login.css
+++ b/login.css
@@ -1,198 +1,237 @@
* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- font-family: 'Poppins', sans-serif;
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: "Poppins", sans-serif;
}
body {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100vh;
- background: linear-gradient(135deg, #f0f0f0, #e5f0ff);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ background: linear-gradient(135deg, #f0f0f0, #e5f0ff);
}
.container {
- width: 100%;
- height: 100%;
- background: rgb(240, 240, 240);
- display: flex;
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
- border-radius: 15px;
- overflow: hidden;
+ width: 100%;
+ height: 100%;
+ background: rgb(240, 240, 240);
+ display: flex;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+ border-radius: 15px;
+ overflow: hidden;
}
-.left-section, .right-section {
- padding: 20px;
+.left-section,
+.right-section {
+ padding: 20px;
}
.left-section {
- flex: 3;
- margin-top: 58px;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- background: rgb(240, 240, 240); /* Light Green */
- text-align: center;
+ flex: 3;
+ margin-top: 58px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background: rgb(240, 240, 240); /* Light Green */
+ text-align: center;
}
.animated-heading {
- font-size: 50px;
- font-weight: 600;
- margin-bottom: 20px;
- color: #000000; /* Yellow */
- animation: fadeIn 2s ease-in-out;
+ font-size: 50px;
+ font-weight: 600;
+ margin-bottom: 20px;
+ color: #000000; /* Yellow */
+ animation: fadeIn 2s ease-in-out;
}
.description {
- font-size: 16px;
- color: #000000;
- margin-bottom: 20px;
- line-height: 1.5;
+ font-size: 16px;
+ color: #000000;
+ margin-bottom: 20px;
+ line-height: 1.5;
}
.login-form {
- display: flex;
- flex-direction: column;
- gap: 20px;
- width: 100%;
- max-width: 300px;
- margin-bottom: 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ width: 100%;
+ max-width: 300px;
+ margin-bottom: 20px;
}
.input-field {
- padding: 12px 20px;
- border: 2px solid #000000; /* Yellow */
- border-radius: 90px;
- font-size: 16px;
- outline: none;
- transition: border-color 0.3s;
+ padding: 12px 20px;
+ border: 2px solid #000000; /* Yellow */
+ border-radius: 90px;
+ font-size: 16px;
+ outline: none;
+ transition: border-color 0.3s;
}
.input-field:focus {
- border-color: #000000; /* Darker Yellow */
+ border-color: #000000; /* Darker Yellow */
}
.submit-button {
- background-color: #000000; /* Yellow */
- border: none;
- color: white;
- padding: 12px 20px;
- font-size: 16px;
- cursor: pointer;
- border-radius: 90px;
- transition: background-color 0.3s, color 0.3s, transform 0.3s;
- width: 100%;
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ background-color: #000000; /* Yellow */
+ border: none;
+ color: white;
+ padding: 12px 20px;
+ font-size: 16px;
+ cursor: pointer;
+ border-radius: 90px;
+ transition: background-color 0.3s, color 0.3s, transform 0.3s;
+ width: 100%;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.submit-button:hover {
- background-color: #ffffff; /* Darker Yellow */
- transform: scale(1.05);
- color: #000000;
- border:#000000;
- border-style: groove;
+ background-color: #ffffff; /* Darker Yellow */
+ transform: scale(1.05);
+ color: #000000;
+ border: #000000;
+ border-style: groove;
}
-
.right-section {
- flex: 7;
- display: flex;
- justify-content: center;
- align-items: center;
- background: #f0f0f0;
- position: relative;
- overflow: hidden;
- padding: 0;
+ flex: 7;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #f0f0f0;
+ position: relative;
+ overflow: hidden;
+ padding: 0;
}
.transition-image {
- position: absolute;
- width: 100%;
- height: 100%;
- object-fit: cover;
- opacity: 0;
- transition: opacity 1s ease-in-out;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ opacity: 0;
+ transition: opacity 1s ease-in-out;
}
.transition-image:first-child {
- opacity: 1;
+ opacity: 1;
}
@keyframes fadeIn {
- 0% { opacity: 0; transform: translateY(-20px); }
- 100% { opacity: 1; transform: translateY(0); }
+ 0% {
+ opacity: 0;
+ transform: translateY(-20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
}
.blinking-cursor {
- font-weight: 100;
- font-size: 50px;
- color: #000000; /* Yellow */
- animation: blink 1s step-end infinite;
+ font-weight: 100;
+ font-size: 50px;
+ color: #000000; /* Yellow */
+ animation: blink 1s step-end infinite;
}
@keyframes blink {
- from, to {
- color: transparent;
- }
- 50% {
- color: #070707; /* Yellow */
- }
+ from,
+ to {
+ color: transparent;
+ }
+ 50% {
+ color: #070707; /* Yellow */
+ }
}
.back-button {
- position: absolute;
- top: 20px;
- left: 20px;
- background: rgb(240, 240, 240);
- border: none;
- color:rgb(240, 240, 240);
- padding: 0px;
- font-size: 16px;
- cursor: pointer;
- border-radius: 1%;
- transition: background-color 0.3s, color 0.3s, transform 0.3s;
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ background: rgb(240, 240, 240);
+ border: none;
+ color: rgb(240, 240, 240);
+ padding: 0px;
+ font-size: 16px;
+ cursor: pointer;
+ border-radius: 1%;
+ transition: background-color 0.3s, color 0.3s, transform 0.3s;
}
.back-button:hover {
- transform: scale(1.25);
- color: #000000; /* Yellow */
+ transform: scale(1.25);
+ color: #000000; /* Yellow */
}
+
.already-signed-up {
+ font-size: 14px;
+ color: #000000;
+ margin-top: 20px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ text-decoration: none;
+ gap: 5px; /* Add some space between the text and the link */
+}
+
+a {
+ font-size: 14px;
+ color: #000000;
+ text-decoration: none;
+ display: inline-block;
+}
+
+.small-screen-image {
+ display: none;
+ width: 100%;
+ max-width: 300px;
+ margin-bottom: 20px;
+}
+
+@media (max-width: 768px) {
+ .container {
+ flex-direction: column;
+ }
+
+ .left-section,
+ .right-section {
+ flex: 1;
+ width: 100%;
+ padding: 10px;
+ }
+
+ .animated-heading {
+ font-size: 32px;
+ }
+
+ .description {
font-size: 14px;
- color: #000000;
- margin-top: 20px;
- display: flex;
- flex-direction: row;
- align-items: center;
- text-decoration: none;
- gap: 5px; /* Add some space between the text and the link */
-}
-a{
+ }
+
+ .login-form {
+ max-width: 100%;
+ }
+
+ .input-field {
+ font-size: 14px;
+ padding: 10px 15px;
+ }
+
+ .submit-button {
font-size: 14px;
- color: #000000;
- text-decoration: none;
- display: inline-block;
-}
-
-/* .already-signed-up span {
- margin-bottom: 10px;
- font-weight: 600;
-} */
-
-/* .already-signed-up a {
- color: #FFA500; /* Yellow */
- /* text-decoration: none;
- font-weight: 600;
- background-color: #E0FFD8;
- padding: 10px 20px;
- border-radius: 20px;
- transition: color 0.3s, background-color 0.3s;
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-} */
-
-/* .already-signed-up a:hover {
- color: white;
- background-color: #FFA500; /* Darker Yellow */
\ No newline at end of file
+ padding: 10px 15px;
+ }
+
+ .transition-image {
+ display: none;
+ }
+
+ .small-screen-image {
+ display: block;
+ }
+}
diff --git a/newLogin.html b/newLogin.html
index b28e405d..977db71d 100644
--- a/newLogin.html
+++ b/newLogin.html
@@ -1,6 +1,6 @@
-
+