diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 3377faf2..800c370a 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -11,19 +11,36 @@ Close # +# Description + + + # Video/Screenshots (mandatory) +# Type of PR + +- [ ] Bug fix +- [ ] Feature enhancement +- [ ] Documentation update +- [ ] Other (specify): _______________ + + # Checklist: -- [ ] I have mentioned the issue number in my Pull Request. -- [ ] I have commented my code, particularly in hard-to-understand areas +- [ ] I have performed a self-review of my code. +- [ ] I have commented my code, particularly in hard-to-understand areas. +- [ ] I have tested the changes thoroughly before submitting this pull request. +- [ ] I have provided relevant issue numbers, screenshots, and videos after making the changes. - [ ] I have gone through the `contributing.md` file before contributing -**Additional context (Mandatory )** -***Are you contributing under any Open-source programme?*** + +# Additional context: + + +##Are you contributing under any Open-source programme? diff --git a/.github/workflows/auto-comment-pr-merge.yml b/.github/workflows/auto-comment-pr-merge.yml new file mode 100644 index 00000000..f07afe1c --- /dev/null +++ b/.github/workflows/auto-comment-pr-merge.yml @@ -0,0 +1,21 @@ +name: Auto Comment on PR Merge + +on: + pull_request: + types: [closed] + +jobs: + comment: + if: github.event.pull_request.merged == true + runs-on: ubuntu-latest + + steps: + - name: Add Comment to Merged PR + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + run: | + curl -X POST \ + -H "Authorization: token $GITHUB_TOKEN" \ + -H "Accept: application/vnd.github.v3+json" \ + -d '{"body":"🎉 Your pull request has been successfully merged! 🎉 Thank you for your contribution to our project. Your efforts are greatly appreciated. Keep up the fantastic work! 🚀"}' \ + "https://api.github.com/repos/${{ github.repository }}/issues/${{ github.event.pull_request.number }}/comments" diff --git a/.vscode/launch.json b/.vscode/launch.json deleted file mode 100644 index 2ba986f6..00000000 --- a/.vscode/launch.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - // Use IntelliSense to learn about possible attributes. - // Hover to view descriptions of existing attributes. - // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 - "version": "0.2.0", - "configurations": [ - { - "type": "chrome", - "request": "launch", - "name": "Launch Chrome against localhost", - "url": "http://localhost:8080", - "webRoot": "${workspaceFolder}" - } - ] -} \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index f673a71b..00000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "liveServer.settings.port": 5502 -} \ No newline at end of file diff --git a/README.md b/README.md index 9af3ad81..9875b069 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@

Hi there👋, Enjoy the World of Open source contribution

-

Hello Coders👨‍💻 ,I am Arpan Chowdhury, an aspiring Web developer.🤖 Here is the project on front-end Web Development.

+

Hello Coders!!👨‍💻
I am Arpan Chowdhury, an aspiring Web developer🤖. Here is the project on front-end Web Development.

@@ -48,7 +48,7 @@

Overview📌

-

Here is a project on front-end Web Development.This repository contains my project on a Travel Website ✈️ using HTML and CSS . It contains the landing page of a travel tour company website👨🏻‍💻.We often search for many travel destinations here and there, so here it is🚤.I welcome you all to contribute to this repository and make it a grand project. So, what are you waiting for??🤔Just jump into it after reading the guidelines📚.

+

This repository contains my project on a Travel Website✈️ using HTML, CSS and JavaScript. It features a landing page for a travel tour company website. Finding the perfect travel destination can be a challenge. This project aims to streamline that process🚤. We welcome all contributions to make this a fantastic resource for travelers. Jump in and contribute to this grand project! Read the guidelines📚 and get started building!

Live Project -- https://apu52.github.io/Travel_Website/

Features

@@ -57,7 +57,7 @@ - **Top Destination Page**: Showcases top travel destinations with captivating imagery, detailed descriptions, and essential information to inspire and inform visitors. - **Best Trip Packages**: Presents the best trip packages tailored to different interests and budgets, complete with itinerary details, pricing, and booking options for seamless travel planning. - **Our Trip Gallery**: Curates a visually stunning gallery showcasing memorable moments and experiences from our trips, enticing visitors to embark on their own adventures. Includes interactive features such as user comments. -- **Contact Us Page**: Provides a user-friendly contact page with essential contact information inquiry forms, amd interactive maps for visitors to reach out and engage with our travel company effortlessly. +- **Contact Us Page**: Provides a user-friendly contact page with essential contact information inquiry forms, and interactive maps for visitors to reach out and engage with our travel company effortlessly.

Technology Used🚀

@@ -84,7 +84,9 @@

Getting Started💥

-

Local Installation video

-> [video](https://drive.google.com/file/d/1LsBudIUtZLDMSlmBDdOfT001QRqGBSbN/view?usp=sharing) +

Local Installation video

+ +[video](https://drive.google.com/file/d/1LsBudIUtZLDMSlmBDdOfT001QRqGBSbN/view?usp=sharing) diff --git a/dedicated-destinations/bali/bali.css b/dedicated-destinations/bali/bali.css index d6a0ba18..ad8dd78e 100644 --- a/dedicated-destinations/bali/bali.css +++ b/dedicated-destinations/bali/bali.css @@ -108,9 +108,9 @@ padding: 0; } #btns{ - height: 40px; - width: 120px; - + /* height: 40px; + width: 120px; */ + font-size: small; } .bttnn{ height: 40px; @@ -129,8 +129,9 @@ color: white; } #btnss { - margin-left: 4rem; - padding: 11px 45px; + /* margin-left: 4rem; + padding: 11px 45px; */ + font-size: small; } #btnss:hover { diff --git a/feedback.html b/feedback.html index 0e105a31..da226578 100644 --- a/feedback.html +++ b/feedback.html @@ -1,5 +1,4 @@ - @@ -8,93 +7,83 @@ + + + + + - - - - - - - + + + - +
+ +
+
-
- -
+ + +
-

RATE OUR SERVICE

+

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 +92,9 @@

RATE OUR SERVICE

-
- - \ No newline at end of file diff --git a/img/sunset.jpg b/img/sunset.jpg new file mode 100644 index 00000000..00c73f71 Binary files /dev/null and b/img/sunset.jpg differ diff --git a/index.html b/index.html index 81eabc6c..64ee3d97 100644 --- a/index.html +++ b/index.html @@ -116,13 +116,21 @@

TourGuide . . .

  • Pricing
  • Trip Gallery
  • Testimonials
    • +
  • Contact Us
  • Rate Us?
    • -
  • Contact Us
    • - + + + + +
    @@ -351,7 +359,7 @@

    Get Flat 15% OFF

    -
    +

    Explore top destinations

    @@ -531,12 +539,12 @@

    can find your right destination.

    + style="box-shadow: 2px 2px 8px rgb(0, 191, 255);">View All

    -

    +

    - - + +





    @@ -808,11 +816,11 @@

    Contact U --> -
    -
    -
    +
    +
    +
    -
    +

    Contact Us

    Feel Free to drop us a message with any inquiries or feedback.We're here to assist you!

    @@ -925,10 +933,11 @@

    Reach Out To Us

    --> - - + + + + + + + + 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/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/newLogin.css b/newLogin.css index 45e904f8..977f6f00 100644 --- a/newLogin.css +++ b/newLogin.css @@ -64,6 +64,7 @@ } .content1 button { + cursor: pointer; font-size: 1.5rem; padding: 1rem 2rem; border-radius: 0.5rem; diff --git a/newLogin.html b/newLogin.html index e4a1940b..4f0fb794 100644 --- a/newLogin.html +++ b/newLogin.html @@ -1,41 +1,78 @@ - - - - + + + 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.

    - +

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

    +

    Create Account

    @@ -69,77 +161,99 @@

    Create Account

    OR

    -
    - - - - - - -
    -
    +
    + + + + + + +
    +
    +
    - - + - - + diff --git a/newplantrip.html b/newplantrip.html index 31c4bc0f..889e449b 100644 --- a/newplantrip.html +++ b/newplantrip.html @@ -19,7 +19,7 @@

    Tour Planner

  • Home
  • About
  • Payment
    • -
  • Login
    • +
  • Login
    • diff --git a/package.html b/package.html index 8d84300b..cc3fa4f6 100644 --- a/package.html +++ b/package.html @@ -142,10 +142,10 @@
  • Testimonials
  • Reviews
  • Rate Us?
    • -
  • Login
    • +
  • Contact Us
    • - +
    diff --git a/payment.css b/payment.css index f09bb5ab..b958cfa4 100644 --- a/payment.css +++ b/payment.css @@ -97,4 +97,265 @@ body { grid-template-columns: 1fr; } } - \ No newline at end of file + + +/* 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%; + display: flex; + justify-content: flex-start; + align-items: center; + position: fixed; + left: 0; + z-index: 9999; + +} + +.newNav { + display: flex; + justify-content: space-around; + align-items: center; + gap: 10px; + height: auto; + width: 100%; + padding: 1rem 2rem; +} + +.navLinks { + display: flex; + justify-content: center; + align-items: center; + font-size: 15px; + list-style: none; + gap: 1.2rem; + position: relative; + z-index: 10; + margin-right: 20px; + margin-top: 20px; + +} + +.link a { + position: relative; + list-style: none; +} + +.link a::before { + position: absolute; + content: ''; + height: 2px; + width: 0%; + bottom: -5px; + left: 0; + background-color: red; +} + +.link a::after { + position: absolute; + content: ''; + height: 2px; + width: 0%; + top: -5px; + right: 0; + background-color: red; + transition: all 0.2s ease-in-out; +} + +.link a:hover::before { + width: 100%; + transition: all 0.2s ease-in-out; +} + +.link a:hover::after { + width: 100%; + transition: all 0.2s ease-in-out; +} + + +.hamburger { + height: 2rem; + width: 1.7rem; + display: flex; + justify-content: space-between; + flex-direction: column; + display: none; + transition: 0.2s; +} + +.line { + height: 5px; + width: 100%; + background-color: white; + border-radius: 2px; +} + +@media screen and (max-width: 1220px) { + .hamburger { + display: flex; + cursor: pointer; + } + + .navLinks { + position: absolute; + top: 70px; + background-color: #091020; + width: 0%; + left: 0; + height: 100vh; + padding: 2rem 0; + flex-direction: column; + transition: 0.2s; + overflow: hidden; + } + + .navLinks li { + width: 100%; + padding: 0.5rem 0; + background-color: #1f2532; + z-index: 10; + } + + #toggle { + font-size: 0.6rem; + } + + #btn-style { + font-size: 0.6rem; + } +} + +.navLinks.activeHamburger { + width: 100%; +} + +.btn { + display: inline-block; + border-radius: 50px; + transition: all .4s ease-in-out; + padding-left: 20px; + padding-right: 20px; + padding-top: 12px; + padding-bottom: 12px; + width: auto; + background-color: transparent; + border: 2px solid slateblue; + 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); +} + + +/*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 Ends Here*/ \ No newline at end of file diff --git a/payment.html b/payment.html index 8bc1ac66..50502cf0 100644 --- a/payment.html +++ b/payment.html @@ -14,17 +14,41 @@ - - -
    + + +
    -
    +

    Checkout form

    @@ -38,30 +62,31 @@

  • Your Package
    - Brief description + Brief description +
    - 15000/- + 15000/-
    • - +
  • Promo code
    - JWOC + JWOC
    −1000/-
  • Total (INR) - 14000/- -
    • - -
    -
    - - -
    -
    - + 14000/- + + + +
    +
    + + +
    +

    diff --git a/payment.js b/payment.js index 21cc2d20..1a056f9a 100644 --- a/payment.js +++ b/payment.js @@ -134,4 +134,42 @@ function validateAddress() { input.setCustomValidity('Please enter your shipping address.'); input.classList.remove('is-invalid'); } -} \ No newline at end of file +} + + +//Selected Package Rate + function getQueryParam(name) { + const urlParams = new URLSearchParams(window.location.search); + return urlParams.get(name); + } + + const selectedPackage = getQueryParam("package"); + + let packageCost; + let briefDescription; + switch (selectedPackage) { + case "basic": + packageCost = 15000; + briefDescription = "Basic Package "; + break; + case "premium": + packageCost = 20000; + briefDescription = "Premium Package"; + break; + case "ultimate": + packageCost = 25000; + briefDescription = "Ultimate Package"; + break; + default: + packageCost = 15000; + briefDescription = "Package Not Selected"; + } + + document.getElementById("package-cost").textContent = packageCost + "/-"; + + document.getElementById("brief-description").textContent = briefDescription; + + const promoCodeDiscount = 1000; + const totalCost = packageCost - promoCodeDiscount; + document.getElementById("total-cost").textContent = totalCost + "/-"; + diff --git a/plantrip.html b/plantrip.html index a13fba68..31b7c2fa 100644 --- a/plantrip.html +++ b/plantrip.html @@ -107,14 +107,17 @@ outline: none; } - + + + + + + +
    - + +
    - $ - 9 + INR + 15000/-
    @@ -61,15 +121,15 @@ -
    +
    Recommend
    - $ - 19 + INR + 20000/-
    @@ -100,14 +160,14 @@ -
    +
    - $ - 29 + INR + 25000/-
    @@ -131,7 +191,7 @@ -
    +
    diff --git a/pricing/style.css b/pricing/style.css index af4bf72b..137367b9 100644 --- a/pricing/style.css +++ b/pricing/style.css @@ -14,10 +14,290 @@ body{ background: #647df9; } +.dark-theme { + --secondary-color: #0e1525; + --text-dark: #ffffff; + --arr-light: white; + --body-light: #0e1525; + --img-color: red; + --head-text: red; + --text-same: #0d213f; + --bubble-color: linear-gradient(120deg, #1C99FE 20.69%, #7644FF 50.19%, #FD4766 79.69%); + --testimonials-img-border: red; + span.aos-init.aos-animate{ + color:white; + } + +} + + + +/*NAVBAR CSS*/ + +/* 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%; + display: flex; + justify-content: flex-start; + align-items: center; + position: fixed; + left: 0; + z-index: 9999; + +} + +.newNav { + display: flex; + justify-content: space-around; + align-items: center; + gap: 10px; + height: auto; + width: 100%; + padding: 1rem 2rem; +} + +.navLinks { + display: flex; + justify-content: center; + align-items: center; + font-size: 15px; + list-style: none; + gap: 1.2rem; + position: relative; + z-index: 10; + margin-right: 20px; + +} + +.link a { + position: relative; + list-style: none; +} + +.link a::before { + position: absolute; + content: ''; + height: 2px; + width: 0%; + bottom: -5px; + left: 0; + background-color: red; +} + +.link a::after { + position: absolute; + content: ''; + height: 2px; + width: 0%; + top: -5px; + right: 0; + background-color: red; + transition: all 0.2s ease-in-out; +} + +.link a:hover::before { + width: 100%; + transition: all 0.2s ease-in-out; +} + +.link a:hover::after { + width: 100%; + transition: all 0.2s ease-in-out; +} + + +.hamburger { + height: 2rem; + width: 1.7rem; + display: flex; + justify-content: space-between; + flex-direction: column; + display: none; + transition: 0.2s; +} + +.line { + height: 5px; + width: 100%; + background-color: white; + border-radius: 2px; +} + +@media screen and (max-width: 1220px) { + .hamburger { + display: flex; + cursor: pointer; + } + + .navLinks { + position: absolute; + top: 70px; + background-color: #091020; + width: 0%; + left: 0; + height: 100vh; + padding: 2rem 0; + flex-direction: column; + transition: 0.2s; + overflow: hidden; + } + + .navLinks li { + width: 100%; + padding: 0.5rem 0; + background-color: #1f2532; + z-index: 10; + } + + #toggle { + font-size: 0.6rem; + } + + #btn-style { + font-size: 0.6rem; + } +} + +.navLinks.activeHamburger { + width: 100%; +} + +.btn { + display: inline-block; + border-radius: 50px; + transition: all .4s ease-in-out; + padding-left: 20px; + padding-right: 20px; + padding-top: 12px; + padding-bottom: 12px; + width: auto; + background-color: transparent; + border: 2px solid slateblue; + 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); +} + + +/*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 Ends Here*/ + .wrapper{ /* max-width: 1090px; */ width: 100%; - /* margin: 1%; */ + margin-top: 10%; display: flex; flex-wrap: wrap; justify-content: space-evenly; @@ -28,6 +308,8 @@ body{ padding: 30px 30px; position: relative; box-shadow: 0 5px 10px rgba(0,0,0,0.1); + + border-radius: 5px; } .table .price-section{ display: flex; @@ -35,26 +317,26 @@ body{ } .table .price-area{ height: 120px; - width: 120px; - border-radius: 50%; + width: 320px; + border-radius: 10%; padding: 2px; } .price-area .inner-area{ height: 100%; width: 100%; - border-radius: 50%; + border-radius: 10%; border: 3px solid #fff; line-height: 117px; text-align: center; color: #fff; - position: relative; + /* position: relative; */ } .price-area .inner-area .text{ font-size: 25px; font-weight: 400; position: absolute; - top: -10px; - left: 17px; + top: 3px; + left: 60px; } .price-area .inner-area .price{ font-size: 45px; @@ -96,13 +378,13 @@ body{ .features li .icon.cross{ color: #cd3241; } -.table .btn{ +.table .purchase-btn{ width: 100%; display: flex; margin-top: 35px; justify-content: center; } -.table .btn button{ +.table .purchase-btn button{ width: 80%; height: 50px; color: #fff; @@ -114,7 +396,7 @@ body{ cursor: pointer; transition: all 0.3s ease; } -.table .btn button:hover{ +.table .purchase-btn button:hover{ border-radius: 5px; } .basic .features li::selection{ @@ -125,22 +407,22 @@ body{ .basic .inner-area{ background: #ffd861; } -.basic .btn button{ +.basic .purchase-btn button{ border: 2px solid #ffd861; background: #fff; color: #ffd861; } -.basic .btn button:hover{ +.basic .purchase-btn button:hover{ background: #ffd861; color: #fff; } .premium ::selection, .premium .price-area, .premium .inner-area, -.premium .btn button{ +.premium .purchase-btn button{ background: #a26bfa; } -.premium .btn button:hover{ +.premium .puchase-btn button:hover{ background: #833af8; } .ultimate ::selection, @@ -148,12 +430,12 @@ body{ .ultimate .inner-area{ background: #43ef8b; } -.ultimate .btn button{ +.ultimate .purchase-btn button{ border: 2px solid #43ef8b; color: #43ef8b; background: #fff; } -.ultimate .btn button:hover{ +.ultimate .purchase-btn button:hover{ background: #43ef8b; color: #fff; } 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 + + + + + + + +
    + + + + +
    +
    +
    +
    + +
    + + + + + + diff --git a/story.html b/story.html index c42a0ac9..b50b689c 100644 --- a/story.html +++ b/story.html @@ -59,7 +59,7 @@
  • Contact Us
    • -
    diff --git a/style_.css b/style_.css index a29b888a..95166e96 100644 --- a/style_.css +++ b/style_.css @@ -2,7 +2,7 @@ /* Google Fonts */ body { - background-image: url("./img/feedback_bg.jpg"); + background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)),url("./img/sunset.jpg"); background-size: cover; background-position: center; display: flex; @@ -10,24 +10,23 @@ 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; color: #fff; background-clip: text; text-fill-color: transparent; @@ -36,6 +35,7 @@ body { animation: textclip 2s linear infinite; display: inline-block; } + @keyframes textclip { to { background-position: 200% center; @@ -53,23 +53,26 @@ body { background: rgba(46, 123, 225, 0.1); 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; - font-family: "Lato"; - font-size: 26px; + font-family: Poppins, sans-serif; + font-size: 20px; color: #07147a; padding: 8px 5px; text-align: center; text-rendering: optimizeLegibility; - text-shadow: 1px 1px 0 #29c0e6, 1px 2px 0px #e784c6; } .stars { @@ -91,18 +94,18 @@ p { #rating-text { font-family: monospace; + font-weight: 700; 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; color: #fff; background-clip: text; text-fill-color: transparent; @@ -111,6 +114,7 @@ p { animation: textclip 2s linear infinite; display: inline-block; } + @keyframes textclip { to { background-position: 200% center; @@ -135,6 +139,11 @@ p { font-size: 1rem; } +#feedback-input:focus-visible{ + outline:2px solid #6a5acd ; + border-radius: 5px; +} + /*.submit-button { display: inline-block; padding: 10px 20px; @@ -186,104 +195,9 @@ 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 +207,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 +223,23 @@ 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 +249,7 @@ header { .link a::after { position: absolute; - content: ''; + content: ""; height: 2px; width: 0%; top: -5px; @@ -355,7 +268,6 @@ header { transition: all 0.2s ease-in-out; } - .hamburger { height: 2rem; width: 1.7rem; @@ -405,14 +317,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 +332,30 @@ 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, @@ -463,6 +365,7 @@ header { cursor: pointer; display: inline-flex; font-family: "JetBrains Mono", monospace; + height: 40px; justify-content: center; line-height: 1; @@ -470,30 +373,38 @@ header { overflow: hidden; padding-left: 16px; padding-right: 16px; - position: relative; - text-align: left; + border-radius: 50px; + /* transition: all .1s ease-in-out; */ + border: 2px solid #6a5acd; + color: #ff0000; + font-weight: 500; + font-size: 14px; + letter-spacing: 2px; + vertical-align: middle; text-decoration: none; - transition: box-shadow 0.15s, transform 0.15s; - user-select: none; - -webkit-user-select: none; - touch-action: manipulation; white-space: nowrap; - will-change: box-shadow, transform; - font-size: 18px; + box-shadow: 2px 2px 8px red; + margin-bottom: 20px; + box-sizing: border-box; } .button:focus { - box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, - rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset; + /* box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, + rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset; */ } .button:hover { - box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, + /* box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset; - transform: translateY(-2px); + transform: translateY(-2px); */ + background-color: #6a5acd; + color: #fff; + } .button:active { + box-shadow: #3c4fe0 0 3px 7px inset; transform: translateY(2px); } + diff --git a/styles.css b/styles.css index a8616627..6ac6c0da 100644 --- a/styles.css +++ b/styles.css @@ -1,6 +1,6 @@ @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'); + :root { --primary-color: #3685fb; @@ -16,7 +16,9 @@ --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; } @@ -32,7 +34,6 @@ /* new bubble start*/ - .bubbles { position: fixed; width: 100%; @@ -41,12 +42,14 @@ 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); @@ -54,75 +57,86 @@ 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; - left:20%; - animation-duration:5s; - animation-delay:1s; -} -.bubble:nth-child(3){ - width:50px; - height:50px; - left:35%; - animation-duration:7s; - animation-delay:2s; -} -.bubble:nth-child(4){ - width:80px; - height:80px; - left:50%; - animation-duration:11s; - animation-delay:0s; -} -.bubble:nth-child(5){ - width:35px; - height:35px; - left:55%; - animation-duration:6s; - animation-delay:1s; -} -.bubble:nth-child(6){ - width:45px; - height:45px; - left:65%; - animation-duration:8s; - animation-delay:3s; -} -.bubble:nth-child(7){ - width:90px; - height:90px; - left:70%; - animation-duration:12s; - animation-delay:2s; -} -.bubble:nth-child(8){ - width:25px; - height:25px; - left:80%; - animation-duration:6s; - animation-delay:2s; -} -.bubble:nth-child(9){ - width:15px; - height:15px; - left:70%; - animation-duration:5s; - animation-delay:1s; -} -.bubble:nth-child(10){ - width:90px; - height:90px; - left:25%; - animation-duration:10s; - animation-delay:4s; + +.bubble:nth-child(1) { + width: 40px; + height: 40px; + left: 10%; + animation-duration: 8s; +} + +.bubble:nth-child(2) { + width: 20px; + height: 20px; + left: 20%; + animation-duration: 5s; + animation-delay: 1s; +} + +.bubble:nth-child(3) { + width: 50px; + height: 50px; + left: 35%; + animation-duration: 7s; + animation-delay: 2s; +} + +.bubble:nth-child(4) { + width: 80px; + height: 80px; + left: 50%; + animation-duration: 11s; + animation-delay: 0s; +} + +.bubble:nth-child(5) { + width: 35px; + height: 35px; + left: 55%; + animation-duration: 6s; + animation-delay: 1s; +} + +.bubble:nth-child(6) { + width: 45px; + height: 45px; + left: 65%; + animation-duration: 8s; + animation-delay: 3s; +} + +.bubble:nth-child(7) { + width: 90px; + height: 90px; + left: 70%; + animation-duration: 12s; + animation-delay: 2s; +} + +.bubble:nth-child(8) { + width: 25px; + height: 25px; + left: 80%; + animation-duration: 6s; + animation-delay: 2s; +} + +.bubble:nth-child(9) { + width: 15px; + height: 15px; + left: 70%; + animation-duration: 5s; + animation-delay: 1s; +} + +.bubble:nth-child(10) { + width: 90px; + height: 90px; + left: 25%; + animation-duration: 10s; + animation-delay: 4s; } + .bubble:nth-child(11) { width: 60px; height: 60px; @@ -208,14 +222,18 @@ 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; @@ -232,7 +250,7 @@ right: 0; width: 15px; height: 100%; - background: linear-gradient(to top , #008aff , #00ffe7); + background: linear-gradient(to top, #008aff, #00ffe7); z-index: 333333; } @@ -244,11 +262,10 @@ --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; - } + } @@ -260,7 +277,7 @@ body { overflow-x: hidden; } -/* #toggle { +#toggle { display: inline-block; border-radius: 50px; transition: all .4s ease-in-out; @@ -278,9 +295,9 @@ body { background-color: #ff0000; border-color: #ff0000; color: #fff; -} */ +} -#toggle:hover { +*/ #toggle:hover { filter: brightness(1.5); } @@ -295,41 +312,47 @@ 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 */ + display: flex; + justify-content: center; + /* Center the content */ } .sized-video { border-radius: 15px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 100%; - max-width: 800px; /* Limit the maximum width of the video */ - height: auto; - outline: none; /* Remove default outline */ + max-width: 800px; + /* Limit the maximum width of the video */ + height: auto; + outline: none; + /* Remove default outline */ } .section__container { max-width: var(--max-width); margin: auto; padding: 5rem 1rem; - margin-top: 20px; - margin-bottom: -28px; + margin-top: 20px; + margin-bottom: -28px; /*background: rgb(241, 239, 239); */ - display: flex; + display: flex; flex-direction: column; - justify-content: center; + justify-content: center; } .sized-video { - border-radius: 15px; + border-radius: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 100%; - max-width: 800px; - height: auto; - outline: none; /* Remove default outline */ + max-width: 800px; + height: auto; + outline: none; + /* Remove default outline */ } .section__header { @@ -341,7 +364,7 @@ body { margin-bottom: 4rem; } -.section__title { +.section__title { font-size: 2rem; font-weight: 600; color: var(--text-dark); @@ -352,8 +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: linear-gradient(120deg, #1C99FE 20.69%, #7644FF 50.19%, #FD4766 79.69%); + ; + -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @@ -365,7 +391,7 @@ body { text-align: right; } -.section__header .section__subtitle { +.section_header .section_subtitle { text-align: left; } @@ -385,6 +411,7 @@ body { border-top-right-radius: 5rem; border-bottom-right-radius: 5rem; } + /* send button start*/ #send { display: inline-block; @@ -419,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; @@ -444,7 +492,7 @@ img { } body { - font-family: 'Poppins', sans-serif; + font-family: "Poppins", sans-serif; } nav { @@ -469,8 +517,6 @@ nav { /* Assuming this is your primary color */ } - - /* .nav__links { list-style: none; display: flex; @@ -491,6 +537,10 @@ nav { } +.home { + margin-left: 210px; +} + header { background-color: var(--secondary-color); @@ -529,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); @@ -538,12 +587,12 @@ header { } /* Apply fade-down animation to the toggle container */ -.toggle-container[data-aos='fade-down'] { +.toggle-container[data-aos="fade-down"] { transition: opacity 500ms ease-in-out; opacity: 0; } -.toggle-container[data-aos='fade-down'].aos-animate { +.toggle-container[data-aos="fade-down"].aos-animate { opacity: 1; } @@ -595,7 +644,7 @@ header { gap: 1rem; } -.header__content > div { +.header__content>div { display: flex; flex-direction: column; justify-content: center; @@ -603,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); @@ -619,7 +668,7 @@ header { height: 20rem; } -.header__content .action__btns { +.header_content .action_btns { display: flex; align-items: center; gap: 2rem; @@ -724,9 +773,9 @@ header { transition: scale 0.3s ease-in-out; } -.modal-btn:active { +/* .modal-btn:active { scale: 0.95; -} +} */ .close-btn { background: none; @@ -779,7 +828,7 @@ header { max-width: 100%; } -.story > span { +.story>span { font-size: 1rem; font-weight: 600; color: var(--text-dark); @@ -860,6 +909,7 @@ header { cursor: pointer; transition: 0.3s; } + .destination__nav span:nth-child(2) { border-radius: 10px 0 0 10px; } @@ -897,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; } @@ -917,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; @@ -931,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 { @@ -1031,7 +1081,7 @@ header { flex-direction: column; } -.gallary__content > div { +.gallary__content>div { max-width: 400px; } @@ -1039,7 +1089,7 @@ header { text-align: right; } -.gallary__content .section__subtitle { +.gallary_content .section_subtitle { margin-bottom: 2rem; text-align: right; } @@ -1073,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; } @@ -1115,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 +1327,7 @@ header { background-color: #0056b3; } -/*contact section overlapping with nav fixed*/ +/contact section overlapping with nav fixed/ /* #contact { padding-top: 100px; } @@ -1335,8 +1385,7 @@ header { /* Updated Contact section */ .container { position: relative; - width: 100vw; - right: 70px; + width: 100%; } .items { @@ -1348,8 +1397,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 +1408,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 +1440,11 @@ header { .contact-form form { padding: auto; } + .contact-form h1 { display: none; } + .contact-form input { width: 50%; padding-left: 10px; @@ -1404,7 +1457,7 @@ header { background: none; border-bottom: 2px solid var(--extra-light); color: var(--extra-light); - font-family: 'Oxygen', sans-serif; + font-family: "Oxygen", sans-serif; } .contact-form input::placeholder { @@ -1419,7 +1472,7 @@ header { color: var(--extra-light); font-weight: 300; font-size: 15px; - font-family: 'Oxygen', sans-serif; + font-family: "Oxygen", sans-serif; margin-right: 150px; margin-top: 20px; } @@ -1473,8 +1526,14 @@ textarea::-webkit-scrollbar { background-color: #ab45e7; color: var(--extra-light); } */ + @media (max-width: 920px) { + .items { + grid-template-columns: 1fr; + } + + .contact { display: none; } @@ -1518,6 +1577,7 @@ textarea::-webkit-scrollbar { display: none; } } + .contact-form input, .contact-form textarea { width: 50%; @@ -1529,9 +1589,10 @@ 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; + font-family: "Oxygen", sans-serif; } .contact-form input::placeholder, @@ -1540,6 +1601,7 @@ textarea::-webkit-scrollbar { } @media (max-width: 920px) { + .contact-form input, .contact-form textarea { width: 75%; @@ -1548,6 +1610,7 @@ textarea::-webkit-scrollbar { } @media (max-width: 700px) { + .contact-form input, .contact-form textarea { width: 75%; @@ -1598,9 +1661,9 @@ body { box-shadow: 0 20px 27px 0 rgb(0 0 0 / 5%); } -.nav-tabs-custom .nav-item .nav-link.active { +/* .nav-tabs-custom .nav-item .nav-link.active { color: #6c6ff5; -} +} */ .nav-tabs-custom .nav-item .nav-link { border: none; @@ -1615,13 +1678,13 @@ body { color: #271050; } -.nav-tabs-custom .nav-item .nav-link.active:after { +/* .nav-tabs-custom .nav-item .nav-link.active:after { -webkit-transform: scale(1); transform: scale(1); -} +} */ .nav-tabs-custom .nav-item .nav-link::after { - content: ''; + content: ""; background: #6c6ff5; height: 2px; position: absolute; @@ -1675,7 +1738,9 @@ 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; @@ -1688,7 +1753,7 @@ body { border-radius: 50%; object-fit: cover; transform: translate(0, -50%); - box-shadow: 0 0 0 10px var( --testimonials-img-border); + box-shadow: 0 0 0 10px var(--testimonials-img-border); } .fa-quote-left, @@ -1707,8 +1772,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; @@ -1719,9 +1785,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; @@ -1731,13 +1797,13 @@ 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; + } @@ -1747,7 +1813,7 @@ body { .link a::before { position: absolute; - content: ''; + content: ""; height: 2px; width: 0%; bottom: -5px; @@ -1757,7 +1823,7 @@ body { .link a::after { position: absolute; - content: ''; + content: ""; height: 2px; width: 0%; top: -5px; @@ -1823,14 +1889,15 @@ body { font-size: 0.6rem; } - #btn-style { - font-size: 0.6rem; - } +} + +.navLinks .link a:active { + color:red; + } .navLinks.activeHamburger { width: 100%; - padding-top: 100px; } /* New NAvbar CSS Ends Here*/ @@ -1878,28 +1945,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; @@ -1915,26 +1987,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; @@ -1942,9 +2021,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; @@ -1953,8 +2031,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); @@ -1968,12 +2048,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; @@ -1981,63 +2062,79 @@ 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 */ + 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{ +@media (min-width: 320px) { + .testimonials { flex-direction: column; } - } -@media (min-width:481px) { - .testimonials{ +@media (min-width: 481px) { + .testimonials { flex-direction: column; } - - } +} -.testimonials{ +.testimonials { position: relative; width: 100%; border-radius: 2%; min-height: 100vh; display: flex; + flex-direction: column; justify-content: center; align-items: center; - background-color: #00ffe7; + background-color:#91b4ffe7; overflow: hidden; + margin-bottom: 50px; } .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%; - + 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%; - + filter: blur(0px); + background-color: white; + border-radius: 2%; } -.testimonialContent{ +.testimonialContent { border-radius: 2%; } -.testimonialBox{ +.testimonialBox { border-radius: 100%; position: relative; width: 100%; @@ -2046,7 +2143,7 @@ border-radius: 2%; padding-top: 90px; color: #999; } -.testimonialBox .quote{ +.testimonialBox .quote { position: absolute; height: 80px; width: 80px; @@ -2056,12 +2153,12 @@ border-radius: 2%; opacity: 0.2; } -.testimonialBox .details{ +.testimonialBox .details { display: flex; align-items: center; margin-top: 20px; } -.testimonialBox .details .imgBX{ +.testimonialBox .details .imgBX { position: relative; width: 60px; height: 60px; @@ -2069,29 +2166,103 @@ border-radius: 2%; overflow: hidden; margin-right: 10px; } -.testimonialBox .details .imgBX img{ -position: absolute; -top: 0; -left: 0; -width: 100%; -height: 100%; -object-fit: cover; +.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 { + 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; +.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 -{ +.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 */ + } +} + +