From 70f3894ee6ac3ffe4d1e17a832850410ba480330 Mon Sep 17 00:00:00 2001 From: Tasnuva12 Date: Sun, 26 May 2024 16:30:55 +0600 Subject: [PATCH 1/4] Added new Login Page and Registration page path I modified the existing page's code and added new login and registration page --- index.html | 2 +- loginPage.css | 161 ++++++++++++++++++++++++ loginPage.html | 35 ++++++ registerPage.css | 314 ++++++++++++++++++++++++++++++++++++++++++++++ registerPage.html | 87 +++++++++++++ 5 files changed, 598 insertions(+), 1 deletion(-) create mode 100644 loginPage.css create mode 100644 loginPage.html create mode 100644 registerPage.css create mode 100644 registerPage.html diff --git a/index.html b/index.html index 08f48172..de860139 100644 --- a/index.html +++ b/index.html @@ -115,7 +115,7 @@

TourGuide . . .

-
diff --git a/loginPage.css b/loginPage.css new file mode 100644 index 00000000..2869feba --- /dev/null +++ b/loginPage.css @@ -0,0 +1,161 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Roboto", sans-serif; + font-weight: 500; + font-style: normal; +} +.main-container { + min-height: 100vh; + min-width: 100vw; + background-image: url("./img/img1.jpeg"); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; +} + +.form-container { + display: flex; + gap: 2rem; + justify-content: center; + align-items: center; + color: white; + backdrop-filter: blur(8px); + padding: 2rem 1rem; + background-color: rgba(44, 57, 104, 0.2); + border-radius: 20px; +} +.content { + display: flex; + flex-direction: column; + gap: 2rem; + justify-content: center; + align-items: center; + padding: 2rem 0; + font-weight: 600; + flex-wrap: wrap; +} + +.content h1 { + font-weight: 700; + font-size: 3rem; + text-shadow: 0px 0px 20px #010618, 0px 0px 40px #010618; + text-align: center; + position: relative; +} +.content p { + width: 100%; + font-size: 1.5rem; + color: white; + opacity: 1; + font-weight: 600; + text-shadow: 0px 0px 20px #010618, 0px 0px 40px #010618; + text-align: center; +} +text{ + color:aquamarine +} +.register-link { + font-weight: bold; + color: white; + text-decoration: none; + transition: color 0.2s ease-in-out; +} + +.register-link:hover { + color: #f39c12; /* Change to your desired hover color */ +} +.passForget{ + color: rgb(234, 35, 35); + font-weight: bold; + + +} + +.content button { + font-size: 1.5rem; + padding: 1rem 2rem; + border-radius: 0.5rem; + border: none; + background: linear-gradient( + 109.6deg, + rgb(5, 85, 84) 11.2%, + rgb(64, 224, 208) 91.1% + ); + color: white; + font-weight: 700; + box-shadow: 0px 0px 10px rgb(10, 64, 88); + transition: all 0.2s ease-in-out; + letter-spacing: 1.1px; +} + +.content button:hover { + transform: scale(1.02); + box-shadow: 0px 0px 10px rgb(10, 64, 88), 0px 0px 20px rgb(10, 64, 88), + 0px 0px 30px rgb(10, 64, 88); + transition: all 0.2s ease-in-out; +} +form { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 1rem; +} + +form > input { + font-size: 1.3rem; + padding: 0.5rem 0.5rem; + width: 20rem; + background: transparent; + border: 2px solid white; + border-radius: 6px; + color: white; + transition: outline 0.2s ease-in-out; + outline: none; +} + +form > input::placeholder { + color: white; +} + +form > input:focus { + outline: 3px solid #010618; + transition: outline 0.2s ease-in-out; + border: none; +} + +@media screen and (max-width: 815px) { + .form-container { + flex-direction: column; + } + + .content { + box-shadow: 0px 0px 20px #010618, 0px 0px 40px #010618; + padding: 2rem 0rem; + border-radius: 10px; + } +} + +@media screen and (max-width: 510px) { + .content h1 { + font-size: 2rem; + } + + .content p { + width: 50%; + } +} +form>input { + font-size: 1rem; + padding: 0.5rem 0.5rem; + width: 14rem; + background: transparent; + } diff --git a/loginPage.html b/loginPage.html new file mode 100644 index 00000000..c2bdb1d7 --- /dev/null +++ b/loginPage.html @@ -0,0 +1,35 @@ + + + + + + + Login Page + + + + + +
+
+
+

Welcome Back !

+

Login with your personal information.

+
+ + + +
+
Forgot your password?
+ Don't have an account? Please Register here. +
+
+
+ +
+ + \ No newline at end of file diff --git a/registerPage.css b/registerPage.css new file mode 100644 index 00000000..3d43ee60 --- /dev/null +++ b/registerPage.css @@ -0,0 +1,314 @@ +@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 + + + + + + + +
+ + + + +
+
+
+ +
+
+ + + + From a69a0b9ce0b08820ecf95e800b48a853e8b7b572 Mon Sep 17 00:00:00 2001 From: nagalakshmi08 Date: Mon, 27 May 2024 15:22:57 +0530 Subject: [PATCH 2/4] Fix: Made header responsive. --- styles.css | 74 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 73 insertions(+), 1 deletion(-) diff --git a/styles.css b/styles.css index 559a1b24..9620c974 100644 --- a/styles.css +++ b/styles.css @@ -2083,4 +2083,76 @@ margin-left: 20px; .swiper-container-3d .swiper-slide-shadow-left { background-image: none; -} \ No newline at end of file +} + + + +/* CSS for small devices */ +@media (max-width: 1200px) { + .header__image img:nth-child(1) { + max-width: 30vw; + transform: translate(-75%, -50%); + } + + .header__image img:nth-child(2) { + max-width: 20vw; + transform: translate(0%, -25%); + } +} + +@media (max-width: 1000px) { + .nav__links { + display: none; + } + + .header__container { + grid-template-columns: repeat(1, 1fr); + padding: 0 1rem; /* Adjust padding for smaller devices */ + } + + .header__image { + /* Remove minimum height for smaller devices */ + padding-top: 20px; /* Add padding to center content vertically */ + } + + .header__image img:nth-child(1) { + max-width: 60vw; /* Adjust image size for smaller devices */ + transform: translate(-90%, -40%); /* Center image horizontally and vertically */ + } + + .header__image img:nth-child(2) { + max-width: 30vw; /* Adjust image size for smaller devices */ + transform: translate(-30%, -75%); /* Center image vertically */ + } + + .header__content {/* Adjust padding for smaller devices */ + padding-top: 0; + text-align: center; /* Center align text */ + } + + .header__content h1 { + font-size: 1rem; /* Adjust font size for smaller devices */ + line-height: 1rem; /* Adjust line height for smaller devices */ + width: auto; /* Remove fixed width */ + height: auto; /* Remove fixed height */ + } + .header__content p + { + padding: 10px; + font-size: 1rem; + } + + .header__content .action__btns { + flex-direction: column; /* Stack buttons vertically */ + gap: 1rem; /* Add gap between buttons */ + margin-top: 1rem; /* Adjust top margin */ + } + + .section__subtitle { + font-size: 0.7rem; /* Adjust font size for smaller devices */ + padding: 0 10px; /* Add vertical padding */ + text-align: center; /* Center align text */ + max-width: 30%; /* Limit width to prevent overflow */ + margin: 0 auto; /* Center the subtitle */ + } +} From 7bfb7b74994c383d531a1de96130cc6d3721edd9 Mon Sep 17 00:00:00 2001 From: Sadaf <137484958+SadafKausar2025@users.noreply.github.com> Date: Sat, 1 Jun 2024 13:25:48 +0530 Subject: [PATCH 3/4] FeedBack Page and Login Page fixed --- feedback.html | 90 +++++-------- login.html | 3 +- newLogin.html | 319 +++++++++++++++++++++++++++---------------- style_.css | 179 +++++------------------- styles.css | 367 ++++++++++++++++++++++---------------------------- 5 files changed, 431 insertions(+), 527 deletions(-) diff --git a/feedback.html b/feedback.html index 0e105a31..00c706a1 100644 --- a/feedback.html +++ b/feedback.html @@ -1,5 +1,4 @@ - @@ -9,92 +8,70 @@ href="img/A T logo with a white background and a square shape, connected to nature for a travel company.png" type="image/x-icon" /> - - - - - + - - + + - +
+ +
+
-
- -
+

RATE OUR SERVICE

- - -

How easy was it to navigate through the website?

Rating: 0

-

How much straightforward and easy was the booking process

Rating: 0

-

Did the payment options meet your needs? Were you comfortable with the security measures in place?

Rating: 0

-

How responsive and helpful was the customer support team?

Rating: 0

-

How much would you recommend this travel website to others?

Rating: 0

-

If you've taken a package tour from this website, how was the overall experience?

Rating: 0

-
-

@@ -103,12 +80,9 @@

RATE OUR SERVICE

-
- - \ No newline at end of file diff --git a/login.html b/login.html index 243d1993..bf0d5f4d 100644 --- a/login.html +++ b/login.html @@ -8,11 +8,12 @@ + - + diff --git a/newLogin.html b/newLogin.html index e4a1940b..c285fbad 100644 --- a/newLogin.html +++ b/newLogin.html @@ -1,41 +1,76 @@ - - - - + + + Login Page - - - - - - + + + + + + -
+ +
+
+
+
+

Welcome Back !

+ +

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

+ +
+
+

Create Account

+
+ + + + + + + + + +
+

OR

-
-
-
-

Welcome Back !

- -

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

- -
-
-

Create Account

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

OR

- -
- - - - - - - -
-
+
+ + + + + + +
+
- - + - - + diff --git a/style_.css b/style_.css index a29b888a..dbfb6853 100644 --- a/style_.css +++ b/style_.css @@ -10,21 +10,18 @@ body { align-items: center; min-height: 100vh; margin: 0; - /*background: linear-gradient(to right, #4DA0B0, #fff);*/ - font-family: "Arial", sans-serif; + /background: linear-gradient(to right, #4DA0B0, #fff);/ font-family: "Arial", sans-serif; } .feedback-heading { font-size: 3rem; font-family: Georgia, "Times New Roman", Times, serif; text-transform: uppercase; - background-image: linear-gradient( - -225deg, - #231557 0%, - #44107a 29%, - #ff1361 67%, - #fff800 100% - ); + background-image: linear-gradient(-225deg, + #231557 0%, + #44107a 29%, + #ff1361 67%, + #fff800 100%); background-size: auto auto; background-clip: border-box; background-size: 200% auto; @@ -36,6 +33,7 @@ body { animation: textclip 2s linear infinite; display: inline-block; } + @keyframes textclip { to { background-position: 200% center; @@ -54,12 +52,14 @@ body { backdrop-filter: blur(10px); border-radius: 15px; padding: 20px; + margin-top: 102px; + margin-bottom: 23px; text-align: center; max-width: 800px; width: 90%; margin-bottom: 20px; - margin-top: 100px; } + p { line-height: 1.2em; margin: 0; @@ -93,13 +93,11 @@ p { font-family: monospace; margin-top: 40px; font-size: 1.8rem; - background-image: linear-gradient( - -225deg, - #231557 0%, - #44107a 29%, - #ff1361 67%, - #fff800 100% - ); + background-image: linear-gradient(-225deg, + #231557 0%, + #44107a 29%, + #ff1361 67%, + #fff800 100%); background-size: auto auto; background-clip: border-box; background-size: 200% auto; @@ -111,6 +109,7 @@ p { animation: textclip 2s linear infinite; display: inline-block; } + @keyframes textclip { to { background-position: 200% center; @@ -185,105 +184,8 @@ p { } } - -/*New toggle*/ -/* new toggle start */ -.toggle-container { - --size: 2rem; - position: relative; - width: var(--size); - height: var(--size); - margin-right: 71px; -} - -.toggle { - appearance: none; - outline: none; - cursor: pointer; - width: 100%; - height: 100%; - box-shadow: inset calc(var(--size) * 0.33) calc(var(--size) * -0.25) 0; - border-radius: 999px; - color: hsl(240, 100%, 95%); - transition: all 500ms; - position: absolute; - top: 0; - left: 0; - - &:checked { - --ray-size: calc(var(--size) * -0.4); - --offset-orthogonal: calc(var(--size) * 0.65); - --offset-diagonal: calc(var(--size) * 0.45); - transform: scale(0.75); - color: hsl(40, 100%, 50%); - box-shadow: inset 0 0 0 var(--size), - calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size), - var(--offset-orthogonal) 0 0 var(--ray-size), - 0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size), - 0 var(--offset-orthogonal) 0 var(--ray-size), - calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0 - var(--ray-size), - var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size), - calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size), - var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size); - } -} - -/* Apply fade-down animation to the toggle container */ -.toggle-container[data-aos='fade-down'] { - transition: opacity 500ms ease-in-out; - opacity: 1; -} - -.toggle-container[data-aos='fade-down'].aos-animate { - opacity: 1; -} - /* New NAvbar CSS Starts Here*/ - -nav { - background-color: #091020; - position: fixed; - top: 0; - width: 100%; - z-index: 1001; -} - -.nav__logo { - font-size: 1.8rem; - /* Increased font size for the logo */ - font-weight: 600; - color: #ffffff; - cursor: pointer; - /* border: 2px solid white; */ - text-decoration: none; -} - -.nav__logo span { - color: #3685fb; - /* Assuming this is your primary color */ -} - - -.link a { - /* padding: 0.5rem 1rem; Adjusted padding for links */ - color: #ffffff; - transition: 0.3s; - font-weight: 600; - text-decoration: none; -} - -.link a:hover { - color: #ff0000; -} - - -header { - background-color: var(--secondary-color); -} - - .nav-container { height: auto; width: 200%; @@ -293,14 +195,13 @@ header { position: fixed; left: 0; z-index: 9999; - } .newNav { display: flex; - justify-content: space-around; + justify-content: space-between; align-items: center; - gap: 10px; + gap: 0.5rem; height: auto; width: 100%; padding: 1rem 2rem; @@ -310,23 +211,21 @@ header { display: flex; justify-content: center; align-items: center; - font-size: 15px; + font-size: 1.2rem; list-style: none; gap: 1.2rem; position: relative; + top: 0.5rem; z-index: 10; - margin-right: 20px; - } .link a { position: relative; - list-style: none; } .link a::before { position: absolute; - content: ''; + content: ""; height: 2px; width: 0%; bottom: -5px; @@ -336,7 +235,7 @@ header { .link a::after { position: absolute; - content: ''; + content: ""; height: 2px; width: 0%; top: -5px; @@ -355,7 +254,6 @@ header { transition: all 0.2s ease-in-out; } - .hamburger { height: 2rem; width: 1.7rem; @@ -405,14 +303,12 @@ header { #btn-style { font-size: 0.6rem; - } -} -.navLinks.activeHamburger { - width: 100%; + + } } -.btn { +#btn-style { display: inline-block; border-radius: 50px; transition: all .4s ease-in-out; @@ -422,38 +318,29 @@ header { padding-bottom: 12px; width: auto; background-color: transparent; - border: 2px solid slateblue; + border: 2px solid rgb(41, 0, 128); color: red; font-weight: 500; font-size: 14px; letter-spacing: 2px; vertical-align: middle; text-decoration: none; - white-space: nowrap; -} -.btn:hover { - background-color: #ff0000; - border-color: #ff0000; - color: #fff; - cursor: pointer; } -.btn:hover { - filter: brightness(1.5); +.navLinks.activeHamburger { + width: 100%; } - /* New NAvbar CSS Ends Here*/ /* CSS */ .button { + margin-bottom: 23px; align-items: center; appearance: none; - background-image: radial-gradient( - 100% 100% at 100% 0, - #5adaff 0, - #5468ff 100% - ); + background-image: radial-gradient(100% 100% at 100% 0, + #5adaff 0, + #5468ff 100%); border: 0; border-radius: 6px; box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, @@ -496,4 +383,4 @@ header { .button:active { box-shadow: #3c4fe0 0 3px 7px inset; transform: translateY(2px); -} +} \ No newline at end of file diff --git a/styles.css b/styles.css index 09d18036..f6b4296e 100644 --- a/styles.css +++ b/styles.css @@ -1,9 +1,7 @@ -@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap"); -@import url("https://fonts.googleapis.com/css2?family=Noto+Serif:wght@700&family=Oxygen:wght@300&display=swap"); -@import url("https://fonts.googleapis.com/css2?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"); -html { - scroll-behavior: smooth; -} +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@700&family=Oxygen:wght@300&display=swap'); + + :root { --primary-color: #3685fb; --primary-color-dark: #2f73d9; @@ -18,12 +16,9 @@ html { --max-width: 1200px; --img-color: white; --head-text: #6a5acd; - --bubble-color: linear-gradient( - 120deg, - #90cdff 20.69%, - #b8a4ee 50.19%, - #ffffff 79.69% - ); + + --bubble-color: #6a5acd; + --testimonials-img-border: #6a5acd; } @@ -47,12 +42,14 @@ html { overflow: hidden; top: 0; left: 0; - pointer-events: none; /* Ensure bubbles don't interfere with other elements */ + pointer-events: none; + /* Ensure bubbles don't interfere with other elements */ } .bubble { position: absolute; - bottom: 0; /* Start from the bottom of the page */ + bottom: 0; + /* Start from the bottom of the page */ width: 40px; height: 40px; background: var(--bubble-color); @@ -60,12 +57,14 @@ html { opacity: 0.5; animation: rise 10s infinite ease-in; } + .bubble:nth-child(1) { width: 40px; height: 40px; left: 10%; animation-duration: 8s; } + .bubble:nth-child(2) { width: 20px; height: 20px; @@ -73,6 +72,7 @@ html { animation-duration: 5s; animation-delay: 1s; } + .bubble:nth-child(3) { width: 50px; height: 50px; @@ -80,6 +80,7 @@ html { animation-duration: 7s; animation-delay: 2s; } + .bubble:nth-child(4) { width: 80px; height: 80px; @@ -87,6 +88,7 @@ html { animation-duration: 11s; animation-delay: 0s; } + .bubble:nth-child(5) { width: 35px; height: 35px; @@ -94,6 +96,7 @@ html { animation-duration: 6s; animation-delay: 1s; } + .bubble:nth-child(6) { width: 45px; height: 45px; @@ -101,6 +104,7 @@ html { animation-duration: 8s; animation-delay: 3s; } + .bubble:nth-child(7) { width: 90px; height: 90px; @@ -108,6 +112,7 @@ html { animation-duration: 12s; animation-delay: 2s; } + .bubble:nth-child(8) { width: 25px; height: 25px; @@ -115,6 +120,7 @@ html { animation-duration: 6s; animation-delay: 2s; } + .bubble:nth-child(9) { width: 15px; height: 15px; @@ -122,6 +128,7 @@ html { animation-duration: 5s; animation-delay: 1s; } + .bubble:nth-child(10) { width: 90px; height: 90px; @@ -129,6 +136,7 @@ html { animation-duration: 10s; animation-delay: 4s; } + .bubble:nth-child(11) { width: 60px; height: 60px; @@ -214,14 +222,18 @@ html { bottom: 0; transform: translateX(0); } + 50% { transform: translate(100px); } + 100% { - bottom: 100vh; /* Use viewport height to ensure it reaches the top */ + bottom: 100vh; + /* Use viewport height to ensure it reaches the top */ transform: translateX(-200px); } } + /* new bubble end */ #scrollPath { position: fixed; @@ -250,16 +262,11 @@ html { --img-color: red; --head-text: red; --text-same: #0d213f; - --bubble-color: linear-gradient( - 120deg, - #1c99fe 20.69%, - #7644ff 50.19%, - #fd4766 79.69% - ); + + --bubble-color: red; --testimonials-img-border: red; - span.aos-init.aos-animate { - color: white; - } + + } body { @@ -270,7 +277,7 @@ body { overflow-x: hidden; } -/* #toggle { +#toggle { display: inline-block; border-radius: 50px; transition: all .4s ease-in-out; @@ -288,9 +295,9 @@ body { background-color: #ff0000; border-color: #ff0000; color: #fff; -} */ +} -#toggle:hover { +*/ #toggle:hover { filter: brightness(1.5); } @@ -305,20 +312,25 @@ body { max-width: var(--max-width); margin: auto; padding: 5rem 1rem; - margin-top: 20px; /* Added margin-top */ - margin-bottom: -28px; /* Added margin-bottom */ + margin-top: 20px; + /* Added margin-top */ + margin-bottom: -28px; + /* Added margin-bottom */ /*background: rgb(241, 239, 239); Added background color */ display: flex; - justify-content: center; /* Center the content */ + justify-content: center; + /* Center the content */ } .sized-video { border-radius: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 100%; - max-width: 800px; /* Limit the maximum width of the video */ + max-width: 800px; + /* Limit the maximum width of the video */ height: auto; - outline: none; /* Remove default outline */ + outline: none; + /* Remove default outline */ } .section__container { @@ -339,7 +351,8 @@ body { width: 100%; max-width: 800px; height: auto; - outline: none; /* Remove default outline */ + outline: none; + /* Remove default outline */ } .section__header { @@ -362,13 +375,11 @@ body { letter-spacing: 0.5px; line-height: 34px; margin-bottom: 28px; - background: #fd4766; - background: linear-gradient( - 120deg, - #1c99fe 20.69%, - #7644ff 50.19%, - #fd4766 79.69% - ); + + background: #FD4766; + background: linear-gradient(120deg, #1C99FE 20.69%, #7644FF 50.19%, #FD4766 79.69%); + ; + -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @@ -380,7 +391,7 @@ body { text-align: right; } -.section__header .section__subtitle { +.section_header .section_subtitle { text-align: left; } @@ -400,6 +411,7 @@ body { border-top-right-radius: 5rem; border-bottom-right-radius: 5rem; } + /* send button start*/ #send { display: inline-block; @@ -434,6 +446,27 @@ body { background-color: var(--primary-color-dark); } + + +#btn-style { + + display: inline-block; + border-radius: 50px; + transition: all .4s ease-in-out; + padding-left: 20px; + padding-right: 20px; + width: auto; + background-color: transparent; + border: 2px solid rgb(41, 0, 128); + color: red; + font-weight: 500; + font-size: 14px; + letter-spacing: 2px; + vertical-align: middle; + text-decoration: none; + white-space: nowrap; +} + /* ensures no box or shadow for the video button */ .btn_video { background: none; @@ -503,6 +536,12 @@ nav { color: #ff0000; } + +.home { + margin-left: 210px; +} + + header { background-color: var(--secondary-color); } @@ -540,8 +579,7 @@ header { var(--offset-orthogonal) 0 0 var(--ray-size), 0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size), 0 var(--offset-orthogonal) 0 var(--ray-size), - calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0 - var(--ray-size), + calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0 var(--ray-size), var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size), calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size), var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size); @@ -606,7 +644,7 @@ header { gap: 1rem; } -.header__content > div { +.header__content>div { display: flex; flex-direction: column; justify-content: center; @@ -614,7 +652,7 @@ header { /* border: 2px solid blue; */ } -.header__content .sub__header { +.header_content .sub_header { font-size: 1rem; font-weight: 600; color: var(--primary-color); @@ -630,7 +668,7 @@ header { height: 20rem; } -.header__content .action__btns { +.header_content .action_btns { display: flex; align-items: center; gap: 2rem; @@ -790,7 +828,7 @@ header { max-width: 100%; } -.story > span { +.story>span { font-size: 1rem; font-weight: 600; color: var(--text-dark); @@ -871,6 +909,7 @@ header { cursor: pointer; transition: 0.3s; } + .destination__nav span:nth-child(2) { border-radius: 10px 0 0 10px; } @@ -908,7 +947,7 @@ header { color: black; background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(4px); - border-radius: 5px; + border-radius: 10px; z-index: 1; transition: 0.3s; } @@ -928,7 +967,7 @@ header { max-width: var(--max-width); } -.trip__container :is(.section__title, .section__subtitle, .view__all) { +.trip_container :is(.sectiontitle, .sectionsubtitle, .view_all) { text-align: center; margin-right: auto; margin-left: auto; @@ -942,15 +981,15 @@ header { } .trip__card { - border-radius: 0.5rem; + border-radius: 1rem; overflow: hidden; box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.1); - transition: transform 0.3s ease, box-shadow 0.3s ease; + transition: 2s; } .trip__card:hover { transform: scale(1.1); - cursor: pointer; + cursor: zoom-in; } .trip__details { @@ -1042,7 +1081,7 @@ header { flex-direction: column; } -.gallary__content > div { +.gallary__content>div { max-width: 400px; } @@ -1050,7 +1089,7 @@ header { text-align: right; } -.gallary__content .section__subtitle { +.gallary_content .section_subtitle { margin-bottom: 2rem; text-align: right; } @@ -1084,11 +1123,11 @@ header { gap: 2rem; } -.subscribe__container .subscribe__content .section__title { +.subscribe_container .subscribecontent .section_title { text-align: left; } -.subscribe__container .subscribe__content .section__subtitle { +.subscribe_container .subscribecontent .section_subtitle { text-align: left; } @@ -1126,9 +1165,9 @@ header { flex-wrap: wrap; justify-content: space-evenly; align-items: flex-start; - flex-direction: row; - /*grid-template-columns: repeat(3, 1fr);*/ - gap: 24px; + + /grid-template-columns: repeat(3, 1fr);/ gap: 24px; + color: var(--secondary-color); } @@ -1277,7 +1316,7 @@ header { background-color: #0056b3; } -/*contact section overlapping with nav fixed*/ +/contact section overlapping with nav fixed/ /* #contact { padding-top: 100px; } @@ -1335,8 +1374,7 @@ header { /* Updated Contact section */ .container { position: relative; - width: 100vw; - right: 70px; + width: 100%; } .items { @@ -1348,8 +1386,8 @@ header { background: #0000001a; backdrop-filter: blur(10px); margin: 50px; - /* grid-template-columns: 1fr 2fr; */ - display: flex; + grid-template-columns: 1fr 2fr; + display: grid; z-index: 10; } @@ -1359,8 +1397,10 @@ header { .contact h1 { color: #ab45e7; - font-family: "Poppins", serif; - font-size: 32px; + + font-family: 'Noto Serif', serif; + font-size: 2.8rem; + text-align: center; margin: 20px; } @@ -1389,9 +1429,11 @@ header { .contact-form form { padding: auto; } + .contact-form h1 { display: none; } + .contact-form input { width: 50%; padding-left: 10px; @@ -1473,7 +1515,14 @@ textarea::-webkit-scrollbar { background-color: #ab45e7; color: var(--extra-light); } */ + @media (max-width: 920px) { + + .items { + grid-template-columns: 1fr; + } + + .contact { display: none; } @@ -1517,6 +1566,7 @@ textarea::-webkit-scrollbar { display: none; } } + .contact-form input, .contact-form textarea { width: 50%; @@ -1528,7 +1578,8 @@ textarea::-webkit-scrollbar { border: none; font-size: 15px; background: none; - border-bottom: 1px solid var(--text-dark); /* Change line color */ + border-bottom: 1px solid var(--text-dark); + /* Change line color */ color: var(--text-dark); font-family: "Oxygen", sans-serif; } @@ -1539,6 +1590,7 @@ textarea::-webkit-scrollbar { } @media (max-width: 920px) { + .contact-form input, .contact-form textarea { width: 75%; @@ -1547,6 +1599,7 @@ textarea::-webkit-scrollbar { } @media (max-width: 700px) { + .contact-form input, .contact-form textarea { width: 75%; @@ -1674,7 +1727,7 @@ body { box-shadow: 0 0 27px 0 rgb(0 0 0 / 5%); } -.testimonial-user > div { +.testimonial-user>div { display: flex; flex-flow: column nowrap; justify-content: space-between; @@ -1706,8 +1759,9 @@ body { /* New NAvbar CSS Starts Here*/ .nav-container { + margin-top: 0; height: auto; - /* width: 200%; */ + width: 200%; display: flex; justify-content: flex-start; align-items: center; @@ -1718,9 +1772,9 @@ body { .newNav { display: flex; - justify-content: space-around; + justify-content: space-between; align-items: center; - gap: 10px; + gap: 0.5rem; height: auto; width: 100%; padding: 1rem 2rem; @@ -1730,13 +1784,14 @@ body { display: flex; justify-content: center; align-items: center; - font-size: 15px; + font-size: 1.2rem; list-style: none; gap: 1.2rem; position: relative; top: 0.5rem; z-index: 10; - margin-right: 20px; + + } .link a { @@ -1821,14 +1876,10 @@ body { font-size: 0.6rem; } - #btn-style { - font-size: 0.6rem; - } } .navLinks.activeHamburger { width: 100%; - padding-top: 100px; } /* New NAvbar CSS Ends Here*/ @@ -1876,26 +1927,33 @@ body { /* Light mode And Dark mode of AboutUs*/ .headingofAbout { - font-weight: bolder; /* Set font weight to bolder */ + font-weight: bolder; + /* Set font weight to bolder */ text-align: center; - color: var(--text-dark); /* Use the text-dark custom property for color */ + color: var(--text-dark); + /* Use the text-dark custom property for color */ } + /* Styling for elements with .aboutcon class */ .aboutcon { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; - background-color: var( - --body-light - ); /* Use the text-dark custom property for color */ + background-color: var(--body-light); + /* Use the text-dark custom property for color */ } + /* Styling for elements with .aboutcontent class */ .aboutcontent { + text-align: center; - color: var(--text-dark); /* Use the text-dark custom property for color */ + color: var(--text-dark); + /* Use the text-dark custom property for color */ margin-bottom: 20px; + } + /* Styling for SVG elements inside .iconss class */ .iconss svg { width: 100px; @@ -1911,26 +1969,33 @@ body { background-color: transparent; border-radius: 20px; } + /* Styling for elements with .iconss class */ .iconss { - color: var(--foot-light); /* Use the text-dark custom property for color */ + color: var(--foot-light); + /* Use the text-dark custom property for color */ } + /* Hover effect for SVG elements inside .iconss class */ .iconss:hover svg { stroke: #d51459; } + /* Styling for h3 elements inside .aboutcontent class */ .aboutcontent h3 { font-size: 1.5rem; margin-top: 10px; } + /* Styling for p elements inside .iconss class */ .iconss p { font-size: 1rem; - color: var(--foot-light); /* Use the text-dark custom property for color */ + color: var(--foot-light); + /* Use the text-dark custom property for color */ font-style: oblique; } + /* Styling for elements with .box1 class */ .box1 { height: 175px; @@ -1938,9 +2003,8 @@ body { align-items: center; align-content: center; border: 0.5px solid; - border-color: var( - --text-dark - ); /* Use the text-dark custom property for color */ + border-color: var(--text-dark); + /* Use the text-dark custom property for color */ border-radius: 20px; display: flex; @@ -1949,8 +2013,10 @@ body { } .color { - background-color: transparent; /* Use the text-dark custom property for color */ + background-color: transparent; + /* Use the text-dark custom property for color */ } + /* Styling of AboutUs ended here */ .custom-btn { background-color: rgb(73, 185, 185); @@ -1964,12 +2030,13 @@ body { background-color: #5f8fd2; } -.section__container .gallary__container { +.section_container .gallary_container { /* border: 2px solid green; */ width: auto; place-items: center; place-content: center; } + #toggle { background-color: transparent; border: none; @@ -1977,126 +2044,16 @@ body { } #toggle i { - font-size: 24px; /* Adjust the size as needed */ + font-size: 24px; + /* Adjust the size as needed */ color: white; transition: color 0.3s; } #toggle:hover i { - color: #ffffff80; /* 80% opacity white for hovering effect */ -} - -.goupbtn { - position: fixed; - width: 50px; - height: 50px; - background-color: #002152; - bottom: 20px; - right: 80px; - - text-decoration: none; - color: white; - text-align: center; - line-height: 50px; - font-size: 22px; -} - -/* Testimonial Section */ -@media (min-width: 320px) { - .testimonials { - flex-direction: column; - } -} -@media (min-width: 481px) { - .testimonials { - flex-direction: column; - } -} - -.testimonials { - position: relative; - width: 100%; - border-radius: 2%; - min-height: 100vh; - display: flex; - justify-content: center; - align-items: center; - background-color: #00ffe7; - overflow: hidden; -} -.swiper-slide { - background-position: center; - background-size: cover; - width: 320px; - background-color: #00ffe7; - box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2); - filter: blur(4px); - border-radius: 2%; -} -.swiper-slide-active { - filter: blur(0px); - background-color: white; - border-radius: 2%; -} -.testimonialContent { - border-radius: 2%; -} -.testimonialBox { - border-radius: 100%; - position: relative; - width: 100%; - height: 100%; - padding: 40px; - padding-top: 90px; - color: #999; -} -.testimonialBox .quote { - position: absolute; - height: 80px; - width: 80px; - top: 20px; - right: 30px; - bottom: 20px; - opacity: 0.2; -} + color: #ffffff80; + /* 80% opacity white for hovering effect */ -.testimonialBox .details { - display: flex; - align-items: center; - margin-top: 20px; -} -.testimonialBox .details .imgBX { - position: relative; - width: 60px; - height: 60px; - border-radius: 50%; - overflow: hidden; - margin-right: 10px; -} -.testimonialBox .details .imgBX img { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: cover; -} -.testimonialBox .details h3 { - font-size: 16px; - font-weight: 400; - letter-spacing: 1px; - color: hotpink; - line-height: 1.1em; -} -.testimonialBox .details h3 span { - font-size: 12px; - color: blue; - margin-left: 20px; -} - -.swiper-container-3d .swiper-slide-shadow-left, -.swiper-container-3d .swiper-slide-shadow-left { - background-image: none; -} +} \ No newline at end of file From c011112d6c9683b3c3ea3226f2cd625ffd5afa5d Mon Sep 17 00:00:00 2001 From: karishmaaa101 Date: Sun, 2 Jun 2024 02:45:07 +0530 Subject: [PATCH 4/4] newLogin.html is corrected. --- newLogin.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/newLogin.html b/newLogin.html index 21c86c14..ba612bbd 100644 --- a/newLogin.html +++ b/newLogin.html @@ -50,7 +50,7 @@

Welcome Back !

-

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

+

To stay connected with us, kindly login with you personal information.