Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Enhance booking-section #158 #220

Merged
merged 2 commits into from
Oct 8, 2024
Merged

Enhance booking-section #158 #220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5afda5e
Enhance booking-section
poorvikaa08 Oct 6, 2024
9a6e9d9
Merge branch 'main' into booking-section
poorvikaa08 Oct 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 56 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,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 @@ -329,6 +333,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 @@ -375,6 +388,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 @@ -388,6 +409,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 @@ -448,6 +503,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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -972,6 +972,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
Loading