From 7f993c2a3d3e2b8e20b12cad016c16c8cae52cf2 Mon Sep 17 00:00:00 2001 From: devarsheecodess Date: Sat, 5 Oct 2024 23:16:02 +0530 Subject: [PATCH 1/3] Fixed user review page #73 --- index.html | 4 ++-- style.css | 5 +++++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index ae33345c..dca7c1da 100644 --- a/index.html +++ b/index.html @@ -415,8 +415,8 @@

User Reviews and Ratings

and help fellow travelers make informed decisions.

-
-

Leave a Review

+
+

Leave a Review

diff --git a/style.css b/style.css index 7a303f27..f6dde7e9 100644 --- a/style.css +++ b/style.css @@ -1,9 +1,11 @@ /**** GLOBAL STYLES ****/ +@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'); * { margin: 0; padding: 0; box-sizing: border-box; + font-family: 'Poppins', sans-serif; } html { @@ -611,11 +613,14 @@ body.dark-mode { display: block; margin-bottom: 5px; font-weight: bold; + font-size: 15px; } .review-form input, .review-form select, .review-form textarea { width: 100%; + font-weight: 600; padding: 10px; + font-size: 15px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 5px; From b753cf980c194f98417992c4b808ef41bb2fa4e9 Mon Sep 17 00:00:00 2001 From: devarsheecodess Date: Sat, 5 Oct 2024 23:22:35 +0530 Subject: [PATCH 2/3] Added scroll on top button #75 --- index.html | 3 +- style.css | 812 ++++++++++++++++++++++++++--------------------------- 2 files changed, 407 insertions(+), 408 deletions(-) diff --git a/index.html b/index.html index dca7c1da..497ccb99 100644 --- a/index.html +++ b/index.html @@ -14,11 +14,12 @@ href="https://fonts.googleapis.com/css2?family=Pattaya&family=Poppins:wght@400;500&display=swap" rel="stylesheet" /> + BuddyTrail - +
diff --git a/style.css b/style.css index f6dde7e9..a165a08f 100644 --- a/style.css +++ b/style.css @@ -1,135 +1,135 @@ /**** GLOBAL STYLES ****/ -@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'); +@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"); * { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: 'Poppins', sans-serif; - } - - html { - font-size: 62.5%; - } - - body { - font-family: "Poppins", sans-serif; - } - .scroll-top-btn { - position: fixed; /* Fixed position */ - bottom: 20px; /* Distance from the bottom of the viewport */ - right: 80px; /* Adjust this value to move the button left */ - background-color: #007bff; - color: white; - border: none; - padding: 10px 15px; - cursor: pointer; - border-radius: 5px; - display: none; /* Initially hidden */ - z-index: 1000; /* Ensure it appears above other content */ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} + +html { + font-size: 62.5%; +} + +body { + font-family: "Poppins", sans-serif; +} +.scroll-top-btn { + position: fixed; /* Fixed position */ + bottom: 20px; /* Distance from the bottom of the viewport */ + right: 80px; /* Adjust this value to move the button left */ + background-color: #007bff; + color: white; + border: none; + padding: 10px 17px; + cursor: pointer; + border-radius: 50%; + display: none; /* Initially hidden */ + z-index: 1000; /* Ensure it appears above other content */ } .scroll-top-btn:hover { - background-color: #007bff; + background-color: #2c445e; } - - h1 { - font-size: 2.6rem; - } - - h2 { - font-size: 4.8rem; - } - h3 { - font-size: 3rem; - font-weight: normal; - } - - h4, - h5 { - font-size: 2.8rem; - } - - a { - color: white; - text-decoration: none; - } - - li, - button, - label, - input, - p { - font-size: 2rem; - } - - button { - padding: 2rem 6rem; - background: #4c6e97; - border: none; - color: white; - font-size: 1.8rem; - cursor: pointer; - transition: background 0.6s ease-in-out; - } - - /**** MAIN PAGE ****/ - - .main-head { - background: #131c27; - color: white; - position: sticky; - top: 0%; - z-index: 5; - } - - nav { - display: flex; - width: 90%; - margin: auto; - padding: 2rem; - min-height: 10vh; - align-items: center; - flex-wrap: wrap; - } - - nav ul { - display: flex; - flex: 1 1 40rem; - justify-content: space-around; - align-items: center; - list-style: none; - } - - #logo { - flex: 2 1 40rem; - font-family: "Pattaya", sans-serif; - font-weight: 400; - } - - .hero { - min-height: 90vh; - background: linear-gradient(rgba(0, 0, 0, 0.8), transparent), - url("/img/landing-page.jpg"); - background-repeat: no-repeat; - background-size: cover; - background-position: center; - color: white; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; - } - - .hero button { - border-radius: 1rem; - } - - .hero h3 { - padding: 5rem; - } - /* Header Styles */ + +h1 { + font-size: 2.6rem; +} + +h2 { + font-size: 4.8rem; +} +h3 { + font-size: 3rem; + font-weight: normal; +} + +h4, +h5 { + font-size: 2.8rem; +} + +a { + color: white; + text-decoration: none; +} + +li, +button, +label, +input, +p { + font-size: 2rem; +} + +button { + padding: 2rem 6rem; + background: #4c6e97; + border: none; + color: white; + font-size: 1.8rem; + cursor: pointer; + transition: background 0.6s ease-in-out; +} + +/**** MAIN PAGE ****/ + +.main-head { + background: #131c27; + color: white; + position: sticky; + top: 0%; + z-index: 5; +} + +nav { + display: flex; + width: 90%; + margin: auto; + padding: 2rem; + min-height: 10vh; + align-items: center; + flex-wrap: wrap; +} + +nav ul { + display: flex; + flex: 1 1 40rem; + justify-content: space-around; + align-items: center; + list-style: none; +} + +#logo { + flex: 2 1 40rem; + font-family: "Pattaya", sans-serif; + font-weight: 400; +} + +.hero { + min-height: 90vh; + background: linear-gradient(rgba(0, 0, 0, 0.8), transparent), + url("/img/landing-page.jpg"); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + color: white; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; +} + +.hero button { + border-radius: 1rem; +} + +.hero h3 { + padding: 5rem; +} +/* Header Styles */ .main-head { padding: 15px; background-color: #007bff; /* Header background */ @@ -186,250 +186,250 @@ margin-bottom: 20px; } - - /**** LOCATIONS PAGE ****/ - - #locations { - min-height: 100vh; - background: linear-gradient(rgba(0, 0, 0, 0.5), transparent), - url("/img/new-york-page.png"); - background-repeat: no-repeat; - background-size: cover; - background-position: center; - display: flex; - align-items: center; - position: relative; - overflow: hidden; - } - - .locations-head { - width: 90%; - margin: auto; - } - - .locations-head h2 { - padding: 1rem 0rem; - text-decoration: underline; - text-decoration-thickness: 0.5rem; - } - - .locations-head h3 { - padding: 4rem 0rem; - background: linear-gradient(#090f15, #42231e); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; - } - - .dark-mode .locations-head h3 { - -webkit-text-fill-color: white; - } +/**** LOCATIONS PAGE ****/ - .cloud { - position: absolute; - top: 0%; - right: 0%; - } - - .moving-cloud-1 { - animation: cloudAnimation 3s infinite alternate ease-in-out; +#locations { + min-height: 100vh; + background: linear-gradient(rgba(0, 0, 0, 0.5), transparent), + url("/img/new-york-page.png"); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + display: flex; + align-items: center; + position: relative; + overflow: hidden; +} + +.locations-head { + width: 90%; + margin: auto; +} + +.locations-head h2 { + padding: 1rem 0rem; + text-decoration: underline; + text-decoration-thickness: 0.5rem; +} + +.locations-head h3 { + padding: 4rem 0rem; + background: linear-gradient(#090f15, #42231e); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} + +.dark-mode .locations-head h3 { + -webkit-text-fill-color: white; +} + +.cloud { + position: absolute; + top: 0%; + right: 0%; +} + +.moving-cloud-1 { + animation: cloudAnimation 3s infinite alternate ease-in-out; +} + +.moving-cloud-2 { + top: 20%; + z-index: -1; + opacity: 0.5; + animation: cloudAnimation 3.5s infinite alternate ease-in-out; +} + +/**** ANIMATION ****/ + +@keyframes cloudAnimation { + from { + transform: translate(10%, -10%); } - - .moving-cloud-2 { - top: 20%; - z-index: -1; - opacity: 0.5; - animation: cloudAnimation 3.5s infinite alternate ease-in-out; + to { + transform: translate(0%, 0%); } - - /**** ANIMATION ****/ - - @keyframes cloudAnimation { - from { - transform: translate(10%, -10%); - } - to { - transform: translate(0%, 0%); - } +} + +/**** BENEFITS SECTION ****/ + +.benefits-head { + background: #343c44; + min-height: 30vh; + padding: 3rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: white; + text-align: center; +} + +.benefits-head h3 { + padding: 1rem; +} + +.cards { + width: 90%; + margin: auto; + display: flex; + min-height: 70vh; + align-items: center; + flex-wrap: wrap; +} + +.card { + text-align: center; + flex: 1 1 25rem; + min-height: 45vh; + margin: 2rem 5rem; + box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1), 0px 20px 20px rgba(0, 0, 0, 0.1); + transition: all 0.2s; +} + +.card:hover { + scale: 1.02; + box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.205), + 0px 20px 20px rgba(0, 0, 0, 0.205); +} + +.cards img { + max-width: 20%; + margin: 0.5rem; +} +.card h4, +.card p { + padding: 1rem; + line-height: 2; +} + +.card-icon { + background: #2a3c53; + padding: 2rem; +} + +/**** CONTACT PAGE ****/ + +#contact { + min-height: 100vh; + background: linear-gradient(rgba(0, 0, 0, 0.5), transparent), + url("/img/contact-mountain.png"); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; +} + +.form-wrapper { + background: rgba(19, 28, 39, 0.8); + width: 60%; + color: white; + border-radius: 2rem; +} + +.form-head { + text-align: center; + padding: 4rem; +} + +.name-form, +.email-form { + padding: 3rem; + text-align: center; +} + +.form-wrapper label { + margin: 0rem 3rem; +} + +.form-wrapper button { + width: 100%; + padding: 2rem; + margin-top: 8rem; + border-bottom-left-radius: 2rem; + border-bottom-right-radius: 2rem; +} + +.form-wrapper input { + padding: 1rem 3rem; +} + +/**** FOOTER ****/ + +footer { + color: white; + background-color: rgba(19, 28, 39, 1); +} +.footer-wrapper { + display: flex; + padding: 2rem; + width: 90%; + margin: auto; + align-items: center; + min-height: 10vh; + flex-wrap: wrap; +} +footer h5 { + flex: 1 1 40rem; +} + +footer ul { + display: flex; + list-style: none; + flex: 1 1 40rem; + justify-content: space-between; + align-items: center; +} + +/**** MEDIA QUERY ****/ + +@media screen and (max-width: 932px) { + html { + font-size: 45%; } - - /**** BENEFITS SECTION ****/ - - .benefits-head { - background: #343c44; - min-height: 30vh; - padding: 3rem; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - color: white; + + nav ul { text-align: center; } - - .benefits-head h3 { - padding: 1rem; - } - - .cards { - width: 90%; - margin: auto; - display: flex; - min-height: 70vh; - align-items: center; - flex-wrap: wrap; - } - - .card { + #logo { + padding: 1.8rem; text-align: center; - flex: 1 1 25rem; - min-height: 45vh; - margin: 2rem 5rem; - box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1), 0px 20px 20px rgba(0, 0, 0, 0.1); - transition: all 0.2s; } - .card:hover{ - scale: 1.02; - box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.205), 0px 20px 20px rgba(0, 0, 0, 0.205); - } - - .cards img { - max-width: 20%; - margin: 0.5rem; - } - .card h4, - .card p { - padding: 1rem; - line-height: 2; + .cloud { + height: 40rem; + pointer-events: none; } - - .card-icon { - background: #2a3c53; + .locations-head h3 { + background: rgba(19, 28, 39, 0.8); + -webkit-text-fill-color: white; padding: 2rem; + text-align: start; } - - /**** CONTACT PAGE ****/ - - #contact { - min-height: 100vh; - background: linear-gradient(rgba(0, 0, 0, 0.5), transparent), - url("/img/contact-mountain.png"); - background-position: center; - background-repeat: no-repeat; - background-size: cover; - display: flex; - justify-content: center; - align-items: center; - } - + .form-wrapper { - background: rgba(19, 28, 39, 0.8); - width: 60%; - color: white; - border-radius: 2rem; - } - - .form-head { - text-align: center; - padding: 4rem; - } - - .name-form, - .email-form { - padding: 3rem; - text-align: center; - } - - .form-wrapper label { - margin: 0rem 3rem; - } - - .form-wrapper button { width: 100%; - padding: 2rem; - margin-top: 8rem; - border-bottom-left-radius: 2rem; - border-bottom-right-radius: 2rem; - } - - .form-wrapper input { - padding: 1rem 3rem; } - - /**** FOOTER ****/ - + footer { - color: white; - background-color: rgba(19, 28, 39, 1); - } - .footer-wrapper { - display: flex; - padding: 2rem; - width: 90%; - margin: auto; - align-items: center; - min-height: 10vh; - flex-wrap: wrap; + text-align: center; } + footer h5 { - flex: 1 1 40rem; - } - - footer ul { - display: flex; - list-style: none; - flex: 1 1 40rem; - justify-content: space-between; - align-items: center; - } - - /**** MEDIA QUERY ****/ - - @media screen and (max-width: 932px) { - html { - font-size: 45%; - } - - nav ul { - text-align: center; - } - #logo { - padding: 1.8rem; - text-align: center; - } - - .cloud { - height: 40rem; - pointer-events: none; - } - .locations-head h3 { - background: rgba(19, 28, 39, 0.8); - -webkit-text-fill-color: white; - padding: 2rem; - text-align: start; - } - - .form-wrapper { - width: 100%; - } - - footer { - text-align: center; - } - - footer h5 { - padding-bottom: 3rem; - } + padding-bottom: 3rem; } +} - /* General styling */ - body { - font-family: Arial, sans-serif; - margin: 0; - padding: 0; - /* box-sizing: border-box; */ - transition: background-color 0.3s ease, color 0.3s ease; +/* General styling */ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + /* box-sizing: border-box; */ + transition: background-color 0.3s ease, color 0.3s ease; } /* Dark mode styles @@ -442,7 +442,7 @@ body.dark-mode { /* body.light-mode { background-color: #ffffff; color: #000000; -} */ +} */ .light-mode { background-color: #ffffff; /* Light mode background */ color: black; /* Light mode text color */ @@ -455,52 +455,52 @@ body.dark-mode { /* Button styles */ .mode-toggle { - position: fixed; - top: 10px; - right: 10px; - background: none; - border: none; - cursor: pointer; - outline: none; - font-size: 1.5em; - transition: color 0.3s, transform 0.3s; - padding: 15px; + position: fixed; + top: 10px; + right: 10px; + background: none; + border: none; + cursor: pointer; + outline: none; + font-size: 1.5em; + transition: color 0.3s, transform 0.3s; + padding: 15px; } /* Sun and moon icons */ .sun-icon { - color: #FFD700; + color: #ffd700; } .moon-icon { - color: #B0C4DE; + color: #b0c4de; } /* Glow effect */ .sun-icon.glow { - color: #FFA500; - text-shadow: 0 0 10px #FFD700, 0 0 20px #FFD700; + color: #ffa500; + text-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700; } /* Section styling */ .map-section { - padding: 40px; - background-color: inherit; - text-align: center; + padding: 40px; + background-color: inherit; + text-align: center; } .map-section h2 { - font-size: 2.5em; - margin-bottom: 20px; + font-size: 2.5em; + margin-bottom: 20px; } /* Map container styling */ #map { - height: 600px; /* Adjust the height as needed */ - width: 100%; - margin-top: 20px; - border-radius: 8px; - box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); + height: 600px; /* Adjust the height as needed */ + width: 100%; + margin-top: 20px; + border-radius: 8px; + box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); } /* itineraries */ @@ -549,7 +549,7 @@ body.dark-mode { } .itinerary button { - background-color: #007BFF; + background-color: #007bff; color: white; padding: 10px 15px; border: none; @@ -562,15 +562,15 @@ body.dark-mode { .itinerary button:hover { background-color: #0056b3; } -@media(max-width: 768px){ - .itinerary{ +@media (max-width: 768px) { + .itinerary { flex: 1 1 calc(45% - 20px); max-width: calc(45% - 20px); } } -@media (max-width: 480px){ - .itinerary{ +@media (max-width: 480px) { + .itinerary { flex: 1 1 100%; max-width: 100%; } @@ -616,7 +616,9 @@ body.dark-mode { font-size: 15px; } -.review-form input, .review-form select, .review-form textarea { +.review-form input, +.review-form select, +.review-form textarea { width: 100%; font-weight: 600; padding: 10px; @@ -627,7 +629,7 @@ body.dark-mode { } .review-form button { - background-color: #007BFF; + background-color: #007bff; color: white; padding: 10px 15px; border: none; @@ -754,7 +756,7 @@ body.dark-mode { /* Button to check deals */ .popup-content button { - background-color: #007BFF; + background-color: #007bff; color: #fff; padding: 10px 15px; border: none; @@ -933,13 +935,11 @@ body.dark-mode { display: none; /* Initially hidden */ } - - .navhover { text-decoration: none; color: black; font-size: 18px; - display: inline-block; + display: inline-block; padding: 10px 15px; /* Adds padding around the text */ border-radius: 20px; /* Creates rounded corners */ transition: background-color 0.3s, color 0.3s; /* Smooth transition */ @@ -950,7 +950,7 @@ body.dark-mode { color: white; /* Changes text color on hover */ } -#social-icons { +#social-icons { display: inline-block; font-size: 24px; /* Adjust the size as needed */ padding: 7px 9px 7px; /* Adds padding around the text */ @@ -958,34 +958,32 @@ body.dark-mode { transition: transform 0.3s ease, color 0.3s ease; } -.twitter:hover -{ +.twitter:hover { background-color: #1e97e3; /* Twitter's official blue color */ - transform: scale(1.1); + transform: scale(1.1); } .instagram:hover { - background-color: #E1306C; /* Instagram's official pinkish color */ + background-color: #e1306c; /* Instagram's official pinkish color */ transform: scale(1.1); /* Slightly enlarges the icon */ } .youtube:hover { - background-color: #FF0000; /* YouTube's official red color */ + background-color: #ff0000; /* YouTube's official red color */ transform: scale(1.1); /* Slightly enlarges the icon */ } - - /* Extra small devices (phones, 600px and down) */ - /*@media only screen and (max-width: 600px) {...}*/ - - /* Small devices (portrait tablets and large phones, 600px and up) */ - /*@media only screen and (min-width: 600px) {...}*/ - - /* Medium devices (landscape tablets, 768px and up) */ - /*@media only screen and (min-width: 768px) {...}*/ - - /* Large devices (laptops/desktops, 992px and up) */ - /*@media only screen and (min-width: 992px) {...}*/ - - /* Extra large devices (large laptops and desktops, 1200px and up) */ - /*@media only screen and (min-width: 1200px) {...}*/ - \ No newline at end of file + +/* Extra small devices (phones, 600px and down) */ +/*@media only screen and (max-width: 600px) {...}*/ + +/* Small devices (portrait tablets and large phones, 600px and up) */ +/*@media only screen and (min-width: 600px) {...}*/ + +/* Medium devices (landscape tablets, 768px and up) */ +/*@media only screen and (min-width: 768px) {...}*/ + +/* Large devices (laptops/desktops, 992px and up) */ +/*@media only screen and (min-width: 992px) {...}*/ + +/* Extra large devices (large laptops and desktops, 1200px and up) */ +/*@media only screen and (min-width: 1200px) {...}*/ From 2c6be1aa455acff5aeffd8a14c85bec14b4ce013 Mon Sep 17 00:00:00 2001 From: devarsheecodess Date: Sat, 5 Oct 2024 23:43:19 +0530 Subject: [PATCH 3/3] Fixed Booking page #77 --- index.html | 189 +++++++++++++++++++++++++++++++++++------------------ style.css | 11 ++++ 2 files changed, 138 insertions(+), 62 deletions(-) diff --git a/index.html b/index.html index 497ccb99..75bb6b1b 100644 --- a/index.html +++ b/index.html @@ -5,21 +5,31 @@ + content="BuddyTrail is a travel agency website that helps you pick out your holiday vacation" + /> + rel="stylesheet" + /> - + BuddyTrail - +
@@ -261,73 +271,125 @@

Romantic Getaway

+ -
-

+
+

Book a Cab or Auto

-

+

Book a cab or auto with ease

- - -

- - -

- - -

- - -

- - -

- - +
+ +

+
+
+ +

+
+
+ +

+
+ +
+ +

+
+ +
+ +

+
+
@@ -386,7 +448,8 @@

Explore Popular Destinations

+ defer + >
@@ -416,8 +479,8 @@

User Reviews and Ratings

and help fellow travelers make informed decisions.

-
-

Leave a Review

+
+

Leave a Review

@@ -441,7 +504,8 @@

Leave a Review

id="complaint" name="complaint" rows="3" - placeholder="Describe any issue with the staff here. Please explain every single detail ex:location,name of the person"> + placeholder="Describe any issue with the staff here. Please explain every single detail ex:location,name of the person" + >
@@ -529,7 +593,8 @@

Exclusive Deals and Offers!

out on our limited-time discounts. Plan your trip now!

diff --git a/style.css b/style.css index a165a08f..96e82d8d 100644 --- a/style.css +++ b/style.css @@ -684,6 +684,17 @@ body.dark-mode { border-color: black; /* Dark border in dark mode */ } +.cab-booking-section input, .cab-booking-section select { + width: 100%; + font-weight: 600; + padding: 20px; + height: 20px; + font-size: 15px; + margin-bottom: 15px; + border: 1px solid #ccc; + border-radius: 5px; +} + .review-item h3 { margin: 0 0 10px; font-size: 1.2em;