Skip to content

Commit

Permalink
Merge pull request #822 from varshapandiann/varsha
Browse files Browse the repository at this point in the history 
Added Booking Page
  • Loading branch information
@samarth-6
samarth-6 authored Oct 16, 2024
2 parents 8b6ff39 + 5006109 commit 384bfb6
Show file tree
Hide file tree
Showing 5 changed files with 283 additions and 10 deletions.
163 changes: 163 additions & 0 deletions book.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="BuddyTrail is a travel agency website that helps you pick out your holiday vacation"
/>
<meta name="robots" content="index,follow" />
<link rel="stylesheet" href="RatingStyle.css">
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Pattaya&family=Poppins:wght@400;500&display=swap"
rel="stylesheet"
/>
<link rel="icon" href="/icons/airplane.svg" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<title>Book Now - BuddyTrail</title>
</head>
<body>
<header class="main-head">
<nav>
<div class="logo">
<img src="img/logo.png" id="logo-web">
<h1 id="logo"><a href="index.html">BuddyTrail</a></h1>
</div>
<ul>
<li><a href="#locations">Location</a></li>
<li><a href="#benefits">Benefits</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="#booking-form">Book Now</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<h2>Welcome to BuddyTrail</h2>
</section>

<section id="locations" class="locations">
<h2>Popular Destinations</h2>
<div class="location-cards">
<div class="location-card">
<h3>Dubai</h3>
<p>Flight to Dubai<br>Save 20% on round-trip flights to Dubai. Limited time offer!</p>
<p><strong>Price:</strong> ₹20,000 <del>₹25,000</del></p>
</div>
<div class="location-card">
<h3>Goa</h3>
<p>Luxury Stay in Goa<br>Get 30% off on a 5-star hotel stay in Goa. Enjoy the best of luxury at an affordable price!</p>
<p><strong>Price:</strong> ₹10,500 <del>₹15,000</del> per night</p>
</div>
<div class="location-card">
<h3>Kerala</h3>
<p>Kerala Backwaters Package<br>Experience the serene beauty of Kerala's backwaters with a 4-day, 3-night package. All-inclusive deal!</p>
</div>
<div class="location-card">
<h3>Paris</h3>
<p>Paris Romantic Getaway<br>Enjoy a romantic trip to Paris with your loved one. Special package for couples!</p><br>
<p><strong>Price:</strong> ₹1,20,000 <del>₹1,50,000</del> per couple</p>
</div>
<div class="location-card">
<h3>Bali</h3>
<p>Adventure in Bali<br>Book an adventure trip to Bali with activities like snorkeling, trekking & more. Discount available for groups!</p>
<p><strong>Price:</strong> ₹48,000 <del>₹60,000</del> per person</p>
</div>
</div>
</section>


<section id="benefits" class="benefits">
<h2 style="">Why Travel with BuddyTrail?</h2>
<ul>
<li>Exclusive discounts and travel packages</li>
<li>24/7 customer support for a hassle-free experience</li>
<li>Handpicked destinations and personalized itineraries</li>
<li>Safe and secure travel arrangements</li>
</ul>
<div class="call-to-action">
<h2>Ready to embark on your next adventure?</h2>
<h2>Let BuddyTrail take you there!</h2>
</div>
</section>


<section id="booking-form" class="booking-form">
<h2>Book Your Trip</h2>
<form action="#" method="post">
<div class="form-group">
<label for="place">Place of Visit:</label>
<input type="text" id="place" name="place" placeholder="Enter your destination" required />
</div>
<div class="form-group">
<label for="dates">Dates of Staying:</label>
<input type="date" id="dates" name="dates" required />
</div>
<div class="form-group">
<label for="transport">Mode of Transport:</label>
<select id="transport" name="transport" required>
<option value="" disabled selected>Select mode of transport</option>
<option value="air">Air</option>
<option value="train">Train</option>
<option value="bus">Bus</option>
<option value="car">Car</option>
</select>
</div>
<button type="submit" class="btn">Book Now</button>
</form>
</section>
</main>
<footer>
<div class="footer-container">
<div class="footer-column">


<footer>
<div class="footer-container">
<div class="footer-column">
<h3>About Us</h3>
<p>We are a team of passionate developers creating amazing web experiences.</p>
</div>
<div class="footer-column">
<h3>Quick Links</h3>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="index.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Contact Us</h3>
<p>Email: [email protected]</p>
<p>Phone: +123 456 7890</p>
</div>
<div class="footer-column">
<h3>Follow Us</h3>
<div class="social-icons">
<a href="https://discord.com/invite/priyaghosal" ><i class="fa-brands fa-discord"></i></a>
<a href="https://x.com/https://twitter.com/PriyaGhosa39968"><i class="fa-brands fa-x-twitter"></i></i></a>
<a href="https://github.com/PriyaGhosal/BuddyTrail"><i class="fab fa-github"></i></a>
<a href="https://www.linkedin.com/in/priya-ghosal-785771286/"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>


</div>

<div class="footer-bottom">
<p>&copy; 2024 Buddy Trail. All rights reserved.</p>
</div>
</footer>
</body>
</html>
Binary file added img/benefits.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/location.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 8 additions & 8 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -247,7 +247,7 @@ <h3>
Connect, Explore, and Discover Together. <br />
BuddyTrail: Your Journey Begins with the Perfect Travel Companion.
</h3>
<button id="btn"><a href="book.html ">Book now</a></button>
<a href="book.html" id="btn">Book now</a>
</section>

<section id="locations">
Expand Down Expand Up @@ -451,7 +451,7 @@ <h2>Exclusive Deals and Offers</h2>
<h3>Flight to Dubai</h3>
<p>Save 20% on round-trip flights to Dubai. Limited time offer!</p>
<p><strong>Price:</strong> ₹20,000 <span class="discount">₹25,000 </span></p>
<button onclick="window.location.href='#book-now'">Book Now</button>
<button onclick="window.location.href='book.html'">Book Now</button>
</div></div>

<!-- Deal 2: Hotel Offer -->
Expand All @@ -461,7 +461,7 @@ <h3>Flight to Dubai</h3>
<h3>Luxury Stay in Goa</h3>
<p>Get 30% off on a 5-star hotel stay in Goa. Enjoy the best of luxury at an affordable price!</p>
<p><strong>Price:</strong> ₹10,500 <span class="discount"> ₹15,000</span> per night</p>
<button onclick="window.location.href='#book-now'">Book Now</button>
<button onclick="window.location.href='book.html'">Book Now</button>
</div></div>

<!-- Deal 3: Travel Package -->
Expand All @@ -470,7 +470,7 @@ <h3>Luxury Stay in Goa</h3>
<h3>Kerala Backwaters Package</h3>
<p>Experience the serene beauty of Kerala's backwaters with a 4-day, 3-night package. All-inclusive deal!</p>
<p><strong>Price:</strong> ₹40,000 <span class="discount">₹50,000</span></p>
<button onclick="window.location.href='#book-now'">Book Now</button>
<button onclick="window.location.href='book.html'">Book Now</button>
</div></div>

<!-- Deal 4: International Trip -->
Expand All @@ -479,7 +479,7 @@ <h3>Kerala Backwaters Package</h3>
<h3>Paris Romantic Getaway</h3>
<p>Enjoy a romantic trip to Paris with your loved one. Special package for couples!</p>
<p><strong>Price:</strong> ₹1,20,000 <span class="discount"> ₹1,50,000</span> per couple</p>
<button onclick="window.location.href='#book-now'">Book Now</button>
<button onclick="window.location.href='book.html'">Book Now</button>
</div></div>

<!-- Deal 5: Adventure Trip -->
Expand All @@ -488,7 +488,7 @@ <h3>Paris Romantic Getaway</h3>
<h3>Adventure in Bali</h3>
<p>Book an adventure trip to Bali with activities like snorkeling, trekking, and more. Discount available for groups!</p>
<p><strong>Price:</strong> ₹48,000 <span class="discount">₹60,000</span> per person</p>
<button onclick="window.location.href='#book-now'">Book Now</button>
<button onclick="window.location.href='book.html'">Book Now</button>
</div></div>

<!-- Deal 6: Ski Trip in Switzerland -->
Expand All @@ -497,7 +497,7 @@ <h3>Adventure in Bali</h3>
<h3>Ski Trip in Switzerland</h3>
<p>Hit the slopes with an amazing package for skiing in the Swiss Alps. All equipment included!</p>
<p><strong>Price:</strong> ₹75,000 <span class="discount">₹90,000</span> per person</p>
<button onclick="window.location.href='#book-now'">Book Now</button>
<button onclick="window.location.href='book.html'">Book Now</button>
</div></div>

<!-- Deal 7: Wildlife Safari in Kenya -->
Expand All @@ -506,7 +506,7 @@ <h3>Ski Trip in Switzerland</h3>
<h3>Wildlife Safari in Kenya</h3>
<p>Experience the thrill of a wildlife safari in Kenya. See the Big Five!</p>
<p><strong>Price:</strong> ₹1,00,000 <span class="discount">₹1,20,000</span> per person</p>
<button onclick="window.location.href='#book-now'">Book Now</button>
<button onclick="window.location.href='book.html'">Book Now</button>
</div></div>
</div>
<button class="carousel-button prev" onclick="moveSlide(-1)">&#10094;</button>
Expand Down
114 changes: 112 additions & 2 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -238,11 +238,21 @@ button {
cursor: pointer;
transition: all 0.4s ease;
}
#btn {
display: inline-block;
background-color: #007bff;
color: white;
padding: 12px 20px;
border-radius: 5px;
text-decoration: none;
font-size: 16px;
transition: background-color 0.3s;
}
#btn a {
color:white;
}
#btn:hover {
background-color: rgba(255,255,255,0.5);
background-color:#2c5282;
transform: scale(0.95);
}
#btn:hover a{
Expand Down Expand Up @@ -479,7 +489,7 @@ nav {
#locations {
min-height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.5), transparent),
url("/img/new-york-page.png");
url("/img/location.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
Expand Down Expand Up @@ -509,6 +519,32 @@ nav {
background-clip: text;
}

/* Location flashcards */
.location-cards {
display: flex;
flex-wrap: wrap; /* Allows cards to wrap to the next line */
justify-content: center; /* Center the cards */
padding: 20px;
}

.location-card {
background: rgba(133, 235, 163, 0.9);
border-radius: 8px;
padding: 15px;
margin: 10px; /* Adds space between cards */
width: 250px; /* Fixed width for each card */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0);
transition: transform 0.2s; /* Smooth scale effect on hover */
}

.location-card:hover {
transform: scale(1.5); /* Scale effect on hover */
}

.location-card h3 {
margin-top: 0;
}

.dark-mode .locations-head h3 {
-webkit-text-fill-color: white;
}
Expand Down Expand Up @@ -542,6 +578,29 @@ nav {
}

/**** BENEFITS SECTION ****/
.benefits {
padding: 50px 20px;

align-items: center;
background-image: url(img/benefits.jpeg);

background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.benefits h2 {
text-align: center;
}

.benefits ul {
list-style: disc inside;
}

.call-to-action {
text-align: center;
margin-top: 30px;
}

.benefits-head {
background: #343c44;
Expand Down Expand Up @@ -601,6 +660,57 @@ nav {
padding: 2rem;
height: 7pc;
}

/**** BOOKING FORM ****/
.booking-form {
max-width: 600px;
margin: 30px auto;
padding: 20px;
background: rgba(255, 255, 255, 0.9);
border-radius: 8px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.booking-form h2 {
text-align: center;
margin-bottom: 20px;
}

.form-group {
margin-bottom: 15px;
}

.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

.form-group input,
.form-group select {
width: calc(100% - 20px);
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}

.btn {
display: block;
width: 100%;
padding: 12px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
}

.btn:hover {
background-color: #0056b3;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
Expand Down

0 comments on commit 384bfb6

Please sign in to comment.