diff --git a/review.html b/review.html index eaf1a7f..0b35799 100644 --- a/review.html +++ b/review.html @@ -15,6 +15,14 @@ height: 80px; } + nav.dark-mode { + background-color: black; + + .nav-items a { + color: white; + } + } + .nav-items { flex-grow: 1; text-align: center; @@ -30,33 +38,34 @@ } .navbar ul li:hover a { - background-color: #555; - transform: scale(1.2); /* Popup effect */ -} - -.navbar ul li:hover::after { - content: ""; - position: absolute; - width: 100%; - height: 4px; - background-color: #00aced; - top: 100%; - left: 0; - transform: scaleX(1); - transition: all 0.3s ease; -} - -.navbar ul li::after { - content: ""; - position: absolute; - width: 100%; - height: 4px; - background-color: transparent; - top: 100%; - left: 0; - transform: scaleX(0); - transition: all 0.3s ease; -} + background-color: #555; + transform: scale(1.2); + /* Popup effect */ + } + + .navbar ul li:hover::after { + content: ""; + position: absolute; + width: 100%; + height: 4px; + background-color: #00aced; + top: 100%; + left: 0; + transform: scaleX(1); + transition: all 0.3s ease; + } + + .navbar ul li::after { + content: ""; + position: absolute; + width: 100%; + height: 4px; + background-color: transparent; + top: 100%; + left: 0; + transform: scaleX(0); + transition: all 0.3s ease; + } .card { transition: transform 0.3s ease, box-shadow 0.3s ease; @@ -67,6 +76,15 @@ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); } + .card.dark-mode { + background-color: black; + box-shadow: 0px 4px 12px rgba(244, 231, 231, 0.872); + + p { + color: white; + } + } + .logo { height: 40px; width: auto; @@ -83,6 +101,45 @@ .rating-star { color: #fbbf24; } + + .theme-switch { + display: inline-block; + width: 60px; + height: 30px; + border-radius: 30px; + background: linear-gradient(49deg, #ffffff, #0644ff); + position: relative; + cursor: pointer; + transition: background 0.3s ease-in-out; + vertical-align: middle; + } + + .theme-switch::before { + content: ''; + position: absolute; + top: 3px; + left: 3px; + width: 24px; + height: 24px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + transition: left 0.3s ease-in-out, background-image 0.3s ease-in-out; + background-image: url('Assets/moon.png'); + } + + .theme-switch.dark-theme { + background: linear-gradient(82deg, #4d1fff, #ffffff); + } + + .theme-switch.dark-theme::before { + left: 33px; + background-image: url('Assets/sun.png'); + } + + .review-section.dark-mode { + background-color: black; + } @@ -93,9 +150,11 @@
-
- Cabrental -
+ +
+ Cabrental +
+
Home @@ -104,9 +163,11 @@ About Reviews Contact +
- +
@@ -116,12 +177,13 @@

Cabrental Reviews

Read what our customers have to say about our car rental service!

- +
-
+
@@ -132,9 +194,12 @@

Cabrental Reviews

March 25, 2024

-

The car rental service was excellent! The car was in perfect condition, and the process was smooth and hassle-free.

+

The car rental service was excellent! The car was in perfect condition, + and the process was smooth and hassle-free.

- ★★★★★ + ★★★★★
@@ -145,22 +210,28 @@

Cabrental Reviews

April 10, 2024

-

Great service and friendly staff! I will definitely rent a car from Cabrental again in the future.

+

Great service and friendly staff! I will definitely rent a car from + Cabrental again in the future.

- ★★★★☆ + ★★★★☆
- User Avatar + User Avatar

Mark Wilson

May 5, 2024

-

I had an amazing experience with Cabrental. The car was clean and the booking process was seamless.

+

I had an amazing experience with Cabrental. The car was clean and the + booking process was seamless.

- ★★★★★ + ★★★★★
@@ -171,9 +242,12 @@

Cabrental Reviews

June 14, 2024

-

I love the convenience of renting a car from Cabrental. Their service is always reliable and efficient.

+

I love the convenience of renting a car from Cabrental. Their service is + always reliable and efficient.

- ★★★★★ + ★★★★★
@@ -184,9 +258,12 @@

Cabrental Reviews

July 20, 2024

-

Cabrental has been my go-to car rental service for years. They always provide top-notch service and quality cars.

+

Cabrental has been my go-to car rental service for years. They always + provide top-notch service and quality cars.

- ★★★★★ + ★★★★★
@@ -197,9 +274,11 @@

Cabrental Reviews

August 15, 2024

-

The customer service at Cabrental is outstanding! They go above and beyond to ensure a great experience.

+

The customer service at Cabrental is outstanding! They go above and beyond + to ensure a great experience.

- ★★★★☆ + ★★★★☆
@@ -233,26 +312,28 @@

Leave a Review

- +
- +
+
+

© 2024 Cabrental. All rights reserved.

+
+ Privacy Policy + Terms of Service + Contact Us +
+
+ - + \ No newline at end of file diff --git a/ride.html b/ride.html index fcaf50e..f4566d5 100644 --- a/ride.html +++ b/ride.html @@ -1,17 +1,21 @@ + Cabshare - - + + - + +
- - -
- - - - -
- + + +
+ + + + +
+ +
+
+
+
+
+

Rider Details!

+
+
1First Name & Address
+
+ + +
+
2Email & Phone
+
+ + +
+
3Location & Time
+
+ + + +
+
+ + + You agree to our Terms and Policy. + +
+
+
-
-
-
-
-

Rider Details!

-
-
1First Name & Address
-
- - -
-
2Email & Phone
-
- - -
-
3Location & Time
-
- - - -
-
- - - You agree to our Terms and Policy. - -
-
+
+
-
-
- -
- - - - + - + + \ No newline at end of file diff --git a/script.js b/script.js index bbb2fdb..5c6994c 100644 --- a/script.js +++ b/script.js @@ -1,13 +1,50 @@ +const themeSwitch = document.getElementById('theme-switch'); // Ensure this matches your HTML button's ID +const body = document.body; +const header = document.querySelector('header'); +const footer = document.querySelector('footer'); + +// Function to enable dark mode +function enableDarkMode() { + themeSwitch.classList.add('dark-theme'); // Update the switch appearance + body.classList.add('dark-mode'); + header.classList.add('dark-mode'); + footer.classList.add('dark-mode'); +} + +// Function to disable dark mode +function disableDarkMode() { + themeSwitch.classList.remove('dark-theme'); // Update the switch appearance + body.classList.remove('dark-mode'); + header.classList.remove('dark-mode'); + footer.classList.remove('dark-mode'); +} + +// Event listener for dark mode toggle button +themeSwitch.addEventListener('click', () => { + if (body.classList.contains('dark-mode')) { + localStorage.removeItem('dark-mode'); // Remove from local storage + disableDarkMode(); // Switch to light mode + } else { + enableDarkMode(); // Switch to dark mode + localStorage.setItem('dark-mode', 'enabled'); // Save in local storage + } +}); + +// Optional: Check the initial mode on page load +if (localStorage.getItem('dark-mode') === 'enabled') { + enableDarkMode(); +} + document .getElementById("view-all-button") .addEventListener("click", function () { const testimonialsContainer = document.getElementById( "testimonials-container" ); - document.getElementById('bookNow').addEventListener('click', function() { + document.getElementById('bookNow').addEventListener('click', function () { alert('Booking confirmed!'); - }); - + }); + const newTestimonials = [ { text: "I've used many cab services before, but this one is by far the best. Highly recommended!", @@ -88,30 +125,30 @@ document testimonialsContainer.appendChild(testimonialDiv); }); - // Get the button - let mybutton = document.getElementById("topButton"); - - // When the user scrolls down 20px from the top of the document, show the button - window.onscroll = function() {scrollFunction()}; - - function scrollFunction() { - if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { - mybutton.style.display = "block"; - } else { - mybutton.style.display = "none"; - } - } - - // When the user clicks on the button, scroll to the top of the document - mybutton.addEventListener("click", function() { - document.body.scrollTop = 0; - document.documentElement.scrollTop = 0; - }); - // When the user scrolls down 20px from the top of the document, show the button -window.onscroll = function() {scrollFunction()}; - - - + // Get the button + let mybutton = document.getElementById("topButton"); + + // When the user scrolls down 20px from the top of the document, show the button + window.onscroll = function () { scrollFunction() }; + + function scrollFunction() { + if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { + mybutton.style.display = "block"; + } else { + mybutton.style.display = "none"; + } + } + + // When the user clicks on the button, scroll to the top of the document + mybutton.addEventListener("click", function () { + document.body.scrollTop = 0; + document.documentElement.scrollTop = 0; + }); + // When the user scrolls down 20px from the top of the document, show the button + window.onscroll = function () { scrollFunction() }; + + + // Add new random testimonials newTestimonials.slice(0, 3).forEach((testimonial) => { const testimonialDiv = document.createElement("div"); @@ -135,43 +172,7 @@ window.onscroll = function() {scrollFunction()}; testimonialsContainer.appendChild(testimonialDiv); }); }); - const themeSwitch = document.getElementById('theme-switch'); // Ensure this matches your HTML button's ID - const body = document.body; - const header = document.querySelector('header'); - const footer = document.querySelector('footer'); - - // Function to enable dark mode - function enableDarkMode() { - themeSwitch.classList.add('dark-theme'); // Update the switch appearance - body.classList.add('dark-mode'); - header.classList.add('dark-mode'); - footer.classList.add('dark-mode'); - } - - // Function to disable dark mode - function disableDarkMode() { - themeSwitch.classList.remove('dark-theme'); // Update the switch appearance - body.classList.remove('dark-mode'); - header.classList.remove('dark-mode'); - footer.classList.remove('dark-mode'); - } - - // Event listener for dark mode toggle button - themeSwitch.addEventListener('click', () => { - if (body.classList.contains('dark-mode')) { - localStorage.removeItem('dark-mode'); // Remove from local storage - disableDarkMode(); // Switch to light mode - } else { - enableDarkMode(); // Switch to dark mode - localStorage.setItem('dark-mode', 'enabled'); // Save in local storage - } - }); - - // Optional: Check the initial mode on page load - if (localStorage.getItem('dark-mode') === 'enabled') { - enableDarkMode(); - } - - document.addEventListener('DOMContentLoaded', () => { - console.log("Welcome to ML Fusion Lab!"); - }); \ No newline at end of file + +document.addEventListener('DOMContentLoaded', () => { + console.log("Welcome to ML Fusion Lab!"); +}); \ No newline at end of file diff --git a/serv.css b/serv.css index 3a1a129..b4731a0 100644 --- a/serv.css +++ b/serv.css @@ -1,26 +1,48 @@ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap"); + body { - font-family: "Poppins", sans-serif; - margin: 0; - padding: 0; - min-height: 100vh; - display: flex; - flex-direction: column; - overflow-x: hidden; - background-color: #eeeff1; - } - main{ - flex: 1; + font-family: "Poppins", sans-serif; + margin: 0; + padding: 0; + min-height: 100vh; + display: flex; + flex-direction: column; + overflow-x: hidden; + background-color: #eeeff1; +} + +body.dark-mode{ + background-color: black; +} + +main { + flex: 1; +} + +main.dark-mode{ + .citytransfer,.rentally,.specially{ + background-color: black; + color:white; + box-shadow: 0px 4px 12px rgba(244, 231, 231, 0.872); } +} - header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 10px 20px; - background-color: #eeeff1; - box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); - height: 70px; +header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 20px; + background-color: #eeeff1; + box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); + height: 70px; +} + +header.dark-mode{ + background-color: #262626; + ul a{ + color:white; + } + box-shadow: 0px 4px 12px rgba(244, 231, 231, 0.872); } .theme-switch { @@ -35,104 +57,129 @@ body { vertical-align: middle; } +.theme-switch::before { + content: ''; + position: absolute; + top: 3px; + left: 3px; + width: 24px; + height: 24px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + transition: left 0.3s ease-in-out, background-image 0.3s ease-in-out; + background-image: url('Assets/moon.png'); +} + +.theme-switch.dark-theme { + background: linear-gradient(82deg, #4d1fff, #ffffff); +} + +.theme-switch.dark-theme::before { + left: 33px; + background-image: url('Assets/sun.png'); +} + .logo img { - height: 50px; - padding-left: 20px; - padding-top: 10px; + height: 50px; + padding-left: 20px; + padding-top: 10px; } -.CabRental_logo img{ + +.CabRental_logo img { padding-top: 20px; } .navbar { - display: flex; - gap: 20px; - padding-top: 5px; - list-style: none; - font-size: 30; + display: flex; + gap: 20px; + padding-top: 5px; + list-style: none; + font-size: 30; } .navbar li a { - - text-decoration: none; - font-weight: 500; - color: #333; - padding: 10px 15px; - transition: 0.3s ease; + + text-decoration: none; + font-weight: 500; + color: #333; + padding: 10px 15px; + transition: 0.3s ease; } .navbar li a:hover { - color: #007bff; + color: #007bff; } .header-btn .sign-up { padding: 20px; - padding: 10px 20px; - background-color: #007bff; - border-color: #007bff; - color: #fff; - text-decoration: none; - border-radius: 5px; + padding: 10px 20px; + background-color: #007bff; + border-color: #007bff; + color: #fff; + text-decoration: none; + border-radius: 5px; } .header-btn .sign-up:hover { - background-color: red; - border-color: red; + background-color: red; + border-color: red; } /* Hide menu icon initially */ #menu-icon { - display: none; + display: none; } /* Responsive styles for mobile sidebar */ @media (max-width: 600px) { - .navbar { - position: fixed; - top: 0; - left: -250px; - width: 250px; - height: 100%; - flex-direction: column; - align-items: start; - justify-content: flex-start; - padding: 20px; - transition: 0.3s; - z-index: 1000; - } - - .navbar.active { - left: 0; - } - - .navbar li { - width: 100%; - margin: 20px 0; - } - - .navbar li a { - display: block; - width: 100%; - text-align: left; - padding: 10px 15px; - } - - #menu-icon { - display: block; - font-size: 28px; - cursor: pointer; - position: absolute; - right: 20px; - } - - .close-btn { - font-size: 28px; - cursor: pointer; - margin-left: auto; - margin-bottom: 20px; - } -} - /* nav ul li a:hover { + .navbar { + position: fixed; + top: 0; + left: -250px; + width: 250px; + height: 100%; + flex-direction: column; + align-items: start; + justify-content: flex-start; + padding: 20px; + transition: 0.3s; + z-index: 1000; + } + + .navbar.active { + left: 0; + } + + .navbar li { + width: 100%; + margin: 20px 0; + } + + .navbar li a { + display: block; + width: 100%; + text-align: left; + padding: 10px 15px; + } + + #menu-icon { + display: block; + font-size: 28px; + cursor: pointer; + position: absolute; + right: 20px; + } + + .close-btn { + font-size: 28px; + cursor: pointer; + margin-left: auto; + margin-bottom: 20px; + } +} + +/* nav ul li a:hover { color: #ff0000; } */ @@ -197,8 +244,9 @@ body { .key-features1 { margin-top: 10px; - padding-left: 20px; -} + padding-left: 20px; +} + .rentally { padding: 23px; flex: 1; @@ -253,10 +301,11 @@ body { justify-content: center; align-items: center; top: -42px - /* position: relative; + /* position: relative; left: 752px; top: -825px; */ } + footer { text-align: center; padding: 0px 0; @@ -290,7 +339,7 @@ footer { margin: 10px 0; } - .citytransfer{ + .citytransfer { width: 90%; margin-left: 5%; margin-right: 5%; @@ -301,7 +350,7 @@ footer { - .specially{ + .specially { width: 90%; margin-left: 5%; margin-right: 5%; @@ -311,7 +360,7 @@ footer { } - .rentally{ + .rentally { width: 90%; margin-left: 5%; margin-right: 5%; @@ -329,7 +378,8 @@ footer { display: block; text-align: center; } - .topbtn{ + + .topbtn { position: fixed; width: 50px; height: 50px; @@ -342,4 +392,4 @@ footer { font-size: 22px; border-radius: 50% } -} +} \ No newline at end of file diff --git a/serv.html b/serv.html index 28b20da..5747659 100644 --- a/serv.html +++ b/serv.html @@ -1,150 +1,202 @@ - - - - - CabRental Services - - - - - -
- - - -
    -
  • Home
    • -
  • Ride
    • -
  • Services
    • -
  • About
    • -
  • Reviews
    • -
  • Contact
    • + + + + + + CabRental Services + + + + + + +
    + + + + +
    + +
    +
    +
    + +
    +
    +
    +

    City Transfers

    +
    +

    + Our city transfer services ensure convenient and reliable transportation to and from airports, hotels, and + various locations within the city. We guarantee punctuality and comfort throughout your journey. +

    +
      +
    • Modern fleet of vehicles including sedans, SUVs, and luxury cars
      • +
    • Experienced and professional drivers
      • +
    • Flexible scheduling to suit your travel plans
      • +
    • Competitive pricing and transparent billing
    -
    - +
    + Book Now
    -
    -
+
+ +
+ +
-
-
-
-

City Transfers

-
-

- Our city transfer services ensure convenient and reliable transportation to and from airports, hotels, and various locations within the city. We guarantee punctuality and comfort throughout your journey. -

-
    -
  • Modern fleet of vehicles including sedans, SUVs, and luxury cars
    • -
  • Experienced and professional drivers
    • -
  • Flexible scheduling to suit your travel plans
    • -
  • Competitive pricing and transparent billing
    • -
-
- Book Now -
+
+
+

Hourly Rentals

- -
- +

+ Whether you need transportation for a few hours or an entire day, our hourly rental service provides flexibility + and peace of mind. Perfect for business meetings, sightseeing tours, or personal errands. +

+
    +
  • Choose from a variety of vehicles tailored to your needs
    • +
  • Customizable routes and stops according to your itinerary
    • +
  • Experienced drivers familiar with local routes and attractions
    • +
  • Affordable rates with no hidden fees
    • +
+
+ Get a Quote
- -
-
-

Hourly Rentals

-
-

- Whether you need transportation for a few hours or an entire day, our hourly rental service provides flexibility and peace of mind. Perfect for business meetings, sightseeing tours, or personal errands. -

-
    -
  • Choose from a variety of vehicles tailored to your needs
    • -
  • Customizable routes and stops according to your itinerary
    • -
  • Experienced drivers familiar with local routes and attractions
    • -
  • Affordable rates with no hidden fees
    • -
-
- Get a Quote -
+
+ +
+
+

Special Occasions

- -
-
-

Special Occasions

-
-

- Celebrate your special events in style with our tailored transportation solutions. Whether it's a wedding, anniversary, corporate event, or night out, we ensure a memorable and luxurious experience. -

-
    -
  • Premium selection of vehicles including limousines and executive vans
    • -
  • Personalized service to meet your specific event requirements
    • -
  • Professional chauffeurs dressed in attire appropriate for the occasion
    • -
  • On-time arrivals and impeccable service from start to finish
    • -
-
- Contact Us -
+

+ Celebrate your special events in style with our tailored transportation solutions. Whether it's a wedding, + anniversary, corporate event, or night out, we ensure a memorable and luxurious experience. +

+
    +
  • Premium selection of vehicles including limousines and executive vans
    • +
  • Personalized service to meet your specific event requirements
    • +
  • Professional chauffeurs dressed in attire appropriate for the occasion
    • +
  • On-time arrivals and impeccable service from start to finish
    • +
+
+ Contact Us
-
-
-

© 2024 CabRental. All rights reserved.

- + - -
-
- + +
+
- - + + + \ No newline at end of file