Skip to content

Commit

Permalink
Merge pull request #220 from poorvikaa08/booking-section
Browse files Browse the repository at this point in the history 
Enhance booking-section #158
  • Loading branch information
@PriyaGhosal
PriyaGhosal authored Oct 8, 2024
2 parents 6b42ac7 + 9a6e9d9 commit 95da8eb
Show file tree
Hide file tree
Showing 2 changed files with 240 additions and 0 deletions.
56 changes: 56 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@
<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.5.2/css/all.min.css"/>

<link
href="https://fonts.googleapis.com/css2?family=Pattaya&family=Poppins:wght@400;500&display=swap"
rel="stylesheet"
Expand Down Expand Up @@ -411,6 +415,15 @@ <h3>Romantic Getaway</h3>
</section>

<!-- Cab or Auto Booking -->
<section id="cab-booking" class="cab-booking-section">
<form action="/book-cab" method="POST">
<h2>BOOK NOW</h2>
<br>

<!-- Pickup Location -->
<div class="form-group">
<label for="pickup-location">Pickup Location</label>
<input
<section
id="cab-booking"
class="cab-booking-section"
Expand Down Expand Up @@ -457,6 +470,14 @@ <h3>Romantic Getaway</h3>
id="pickup-location"
name="pickup-location"
placeholder="Enter pickup location"
required />
</div>

<!-- Drop Location -->
<div class="form-group">
<label for="drop-location">Drop Location</label>
<input

required
/><br /><br />
</div>
Expand All @@ -470,6 +491,40 @@ <h3>Romantic Getaway</h3>
id="drop-location"
name="drop-location"
placeholder="Enter drop location"
required />
</div>

<!-- Vehicle Type -->
<div class="form-group">
<label for="vehicle-type">Vehicle Type</label>
<select id="vehicle-type" name="vehicle-type" required>
<option value="cab">Cab</option>
<option value="auto">Auto</option>
</select>
</div>

<!-- Travel Date -->
<div class="form-group">
<label for="travel-date">Travel Date</label>
<input
type="date"
id="travel-date"
name="travel-date"
required />
</div>

<!-- Travel Time -->
<div class="form-group">
<label for="travel-time">Travel Time</label>
<input
type="time"
id="travel-time"
name="travel-time"
required />
</div>

<!-- Submit Button -->
<input type="submit" value="Book Now" class="btn-book" />
required
/><br /><br />
</div>
Expand Down Expand Up @@ -530,6 +585,7 @@ <h3>Romantic Getaway</h3>
</button>
</form>
</section>
<hr style="color: #007bff;">

<!-- recommendations -->
<section id="recommendations" class="recommendations-section">
Expand Down
184 changes: 184 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1042,6 +1042,190 @@ body.dark-mode {
transition: transform 0.3s ease, color 0.3s ease;
}

.social-icons a:hover {
color: black;
transform: scale(1.3) translateY(-5px);
background-color: #b74b4b;
box-shadow: 0 0 25px #b74b4b;
}

/* 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) {...}*/
/* Styling the main section */

.cab-booking-section {
max-width: 600px; /* Limits the width for better readability */
margin: 30px auto; /* Centers the section and adds spacing */
padding: 20px;
border: 2px solid #007bff; /* Adds a blue border */
border-radius: 10px; /* Rounds the corners */
background-color: #f9f9f9; /* Light background for contrast */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
}

/* Styling the headings */
.cab-booking-section h2 {
color: #007bff; /* Blue heading */
text-align: center;
margin-bottom: 20px; /* Space below the heading */
font-family: 'Arial', sans-serif;
}

/* Styling each form-group for consistent spacing */
.form-group {
margin-bottom: 15px; /* Adds spacing between each input group */
font-size: 20px;
}

.form-group label {
display: block; /* Ensures label and input are on separate lines */
margin-bottom: 5px; /* Adds a gap between the label and input */
}

/* Styling input and select fields */
input[type="text"],
input[type="date"],
input[type="time"],
select {
width: 100%; /* Full width for inputs */
padding: 12px; /* Padding inside the inputs */
border: 1px solid #ccc; /* Light gray border */
border-radius: 5px; /* Rounds the input corners */
font-size: 16px; /* Increases font size */
font-family: 'Arial', sans-serif;
box-sizing: border-box; /* Ensures padding doesn't affect the width */
transition: border-color 0.3s; /* Adds a transition for focus state */
}

/* Styling the input fields on focus */
input:focus,
select:focus {
border-color: #007bff; /* Changes border color when focused */
outline: none; /* Removes the default outline */
}

/* Styling the submit button */
.btn-book {
background-color: #007bff; /* Blue background */
color: white; /* White text */
padding: 12px 20px; /* Padding for a bigger button */
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 18px; /* Bigger text for the button */
font-family: 'Arial', sans-serif;
transition: background-color 0.3s; /* Adds a transition for hover */
width: 100%; /* Makes the button full width */
}

/* Change background color on hover */
.btn-book:hover {
background-color: #0056b3; /* Darker blue on hover */
}

/* Add responsiveness for mobile devices */
@media (max-width: 768px) {
.cab-booking-section {
padding: 15px;
}

input[type="text"],
input[type="date"],
input[type="time"],
select {
font-size: 14px;
padding: 10px;
}

.btn-book {
font-size: 16px;
padding: 10px 15px;
}
}


/*Dark mode for booking section*/

/* Main Section Dark Mode */
.dark-mode .cab-booking-section {
background-color: #333; /* Dark background */
color: #f1f1f1; /* Light text color */
border: 2px solid #444; /* Darker border */
}

/* Dark mode headings */
.dark-mode .cab-booking-section h2 {
color: #ffffff; /* White heading */
}

/* Dark mode input fields */
.dark-mode input[type="text"],
.dark-mode input[type="date"],
.dark-mode input[type="time"],
.dark-mode select {
background-color: #444; /* Dark input background */
color: #f1f1f1; /* Light text color */
border: 1px solid #555; /* Darker border for inputs */
}

.dark-mode input[type="text"]::placeholder,
.dark-mode input[type="date"]::placeholder,
.dark-mode input[type="time"]::placeholder {
color: #888; /* Dimmer placeholder text */
}

/* Dark mode input focus state */
.dark-mode input:focus,
.dark-mode select:focus {
border-color: #007bff; /* Blue border on focus */
}

/* Dark mode submit button */
.dark-mode .btn-book {
background-color: #0056b3; /* Darker blue for the button */
color: #ffffff; /* White text */
}

.dark-mode .btn-book:hover {
background-color: #003f8f; /* Even darker blue on hover */
}

/* Dark mode form-group */
.dark-mode .form-group label {
color: #f1f1f1; /* Light label text */
}

/* Responsive adjustments for dark mode */
@media (max-width: 768px) {
.dark-mode .cab-booking-section {
padding: 15px;
}

.dark-mode input[type="text"],
.dark-mode input[type="date"],
.dark-mode input[type="time"],
.dark-mode select {
font-size: 14px;
padding: 10px;
}

.dark-mode .btn-book {
font-size: 16px;
padding: 10px 15px;
}
}
.twitter:hover {
background-color: #1e97e3; /* Twitter's official blue color */
transform: scale(1.1);
Expand Down

0 comments on commit 95da8eb

Please sign in to comment.