login and signup page improved

supriyagaut · Jul 5, 2024 · a67e4b3 · a67e4b3
1 parent 01122e3
commit a67e4b3
Show file tree

Hide file tree

Showing 14 changed files with 489 additions and 524 deletions.
diff --git a/Signup.css b/Signup.css
@@ -0,0 +1,197 @@
+* {
+  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);
+}
+
+.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;
+}
+
+.left-section, .right-section {
+  padding: 20px;
+}
+
+.left-section {
+  flex: 3;
+  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;
+}
+
+.description {
+  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;
+}
+
+.input-field {
+  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 */
+}
+
+.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);
+}
+
+.submit-button:hover {
+  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;
+}
+
+.transition-image {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  transition: opacity 1s ease-in-out;
+}
+
+.transition-image:first-child {
+  opacity: 1;
+}
+
+@keyframes fadeIn {
+  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;
+}
+
+@keyframes blink {
+  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;
+}
+
+.back-button:hover {
+  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;
+}
+
+/* .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 */
diff --git a/Signup.html b/Signup.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Signup</title>
+    <link rel="stylesheet" href="login.css"/>
+</head>
+<body>
+    <div class="container">
+        <div class="left-section">
+            <button class="back-button" onclick="window.location.href='index.html'"><img src="img/button.png" width="50px" height="50px"/></button>
+            <h1 class="animated-heading">Tourguide<span class="blinking-cursor">|</span></h1>
+            <p class="description">
+                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.
+            </p>
+            <form id="signupForm" class="login-form">
+                <input type="text" id="name" placeholder="Name" class="input-field">
+                <input type="text" id="username" placeholder="Username" class="input-field">
+                <input type="email" id="email" placeholder="Email" class="input-field">
+                <input type="password" id="password" placeholder="Password" class="input-field">
+                <button type="submit" class="submit-button">Sign up</button>
+            </form>
+            <p class="already-signed-up">
+                Already signed up? <a href="login-modified.html">Login</a>
+            </p>
+        </div>
+        <div class="right-section">
+            <img src="./img/login1.jpg" alt="travel_pics" class="transition-image">
+            <img src="./img/login2.jpg" alt="travel_pics" class="transition-image">
+            <img src="./img/login3.jpg" alt="travel_pics" class="transition-image">
+            <img src="./img/login4.jpg" alt="travel_pics" class="transition-image">
+            <img src="./img/login5.jpg" alt="travel_pics" class="transition-image">
+            <img src="./img/login6.jpg" alt="travel_pics" class="transition-image">
+            <img src="./img/login7.jpg" alt="travel_pics" class="transition-image">
+        </div>
+    </div>
+
+    <script>
+        const images = document.querySelectorAll('.transition-image');
+        let currentImageIndex = 0;
+
+        function showNextImage() {
+            images[currentImageIndex].style.opacity = 0;
+            currentImageIndex = (currentImageIndex + 1) % images.length;
+            images[currentImageIndex].style.opacity = 1;
+        }
+
+        setInterval(showNextImage, 3000);
+    </script>
+</body>
+</html>
diff --git a/img/button.png b/img/button.png
diff --git a/img/login1.jpg b/img/login1.jpg
diff --git a/img/login2.jpg b/img/login2.jpg
diff --git a/img/login3.jpg b/img/login3.jpg
diff --git a/img/login4.jpg b/img/login4.jpg
diff --git a/img/login5.jpg b/img/login5.jpg
diff --git a/img/login6.jpg b/img/login6.jpg
diff --git a/img/login7.jpg b/img/login7.jpg