diff --git a/Signup.css b/Signup.css new file mode 100644 index 00000000..b2b8e87b --- /dev/null +++ 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 */ \ No newline at end of file diff --git a/Signup.html b/Signup.html new file mode 100644 index 00000000..891a471f --- /dev/null +++ b/Signup.html @@ -0,0 +1,56 @@ + + + + + + + Signup + + + +
+
+ +

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. +

+ +

+ Already signed up? Login +

+
+
+ travel_pics + travel_pics + travel_pics + travel_pics + travel_pics + travel_pics + travel_pics +
+
+ + + + \ No newline at end of file diff --git a/img/button.png b/img/button.png new file mode 100644 index 00000000..3a8b0cfd Binary files /dev/null and b/img/button.png differ diff --git a/img/login1.jpg b/img/login1.jpg new file mode 100644 index 00000000..a480cc47 Binary files /dev/null and b/img/login1.jpg differ diff --git a/img/login2.jpg b/img/login2.jpg new file mode 100644 index 00000000..90cfa950 Binary files /dev/null and b/img/login2.jpg differ diff --git a/img/login3.jpg b/img/login3.jpg new file mode 100644 index 00000000..48ce66ae Binary files /dev/null and b/img/login3.jpg differ diff --git a/img/login4.jpg b/img/login4.jpg new file mode 100644 index 00000000..5486bcdb Binary files /dev/null and b/img/login4.jpg differ diff --git a/img/login5.jpg b/img/login5.jpg new file mode 100644 index 00000000..a5795b41 Binary files /dev/null and b/img/login5.jpg differ diff --git a/img/login6.jpg b/img/login6.jpg new file mode 100644 index 00000000..5c571f1b Binary files /dev/null and b/img/login6.jpg differ diff --git a/img/login7.jpg b/img/login7.jpg new file mode 100644 index 00000000..88597759 Binary files /dev/null and b/img/login7.jpg differ diff --git a/login-modified.html b/login-modified.html index bcc8cef1..6fdda140 100644 --- a/login-modified.html +++ b/login-modified.html @@ -1,140 +1,54 @@ - + - Login Page - - - - + Login + - - -
- -
- -
-
-
-

Welcome Back !

- -

To keep connected with us please login with your personal information.

- -
-
-

LOGIN

-
- - - - - - - - - - -
-

OR

- -
- - - - -
-
+
+
+ +

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 +

+
+
+ travel_pics + travel_pics + travel_pics + travel_pics + travel_pics + travel_pics + travel_pics
- - - - + \ No newline at end of file diff --git a/login.css b/login.css new file mode 100644 index 00000000..20af43ab --- /dev/null +++ b/login.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 */ \ No newline at end of file diff --git a/registerPage.css b/registerPage.css deleted file mode 100644 index 3d43ee60..00000000 --- a/registerPage.css +++ /dev/null @@ -1,314 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap"); -*{ - margin: 0; - padding: 0; - box-sizing: border-box; - font-family:'Urbanist', sans-serif; -} -:root{ - --var-primary-color: #2888E8FF -} -html{ - font-size:62.5%; - -} -h1,h2,h3,h4{ - font-family:'Lexend Deca', sans-serif; -} -h1{ - font-size:4.8rem; -} -h2{ - font-size:3rem; -} -p{ - font-size: 1.6rem; - letter-spacing: 0.08rem; -} -button, input[type="submit"]{ - border: .1rem solid #fff; - outline: none; - padding: .6rem 1.2rem; - font-size: 1.7rem; - text-transform: capitalize; - letter-spacing: 0.01rem; - background-color: transparent; - color: #fff; - cursor: pointer; -} - -.registration-header{ - height: 100vh; - background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url("img/img1.jpeg"); - background-repeat: no-repeat; - background-size: cover; - background-position: center; -} -.container{ - height:10vh; - width: 80%; - margin:auto; - display: flex; - justify-content: space-between; - align-items: center; - -} -.logo a{ - font-size: 2.4rem; - font-weight: bold; - color: #fff; - text-decoration: none; -} - -main{ - min-height: 80vh; - display: flex; - justify-content: center; - align-items: center; -} -.registration, .login{ - min-height: 30rem; - min-width: 40vw; - /* - - - - Registration Page - - - - - - - -
- - - - -
-
-
-
- - - - - - - -