In this Tutorial, we are going make an essential transport ticket booking shape utilizing HTML and CSS. This frame will permit clients to choose their flight and goal areas, date and time of travel, number of passengers, and travel lesson. Here is the step-by-step direction to make this frame.
HTML Structure
We’ll begin with the HTML structure, which incorporates a frame with different input areas for the client to fill out. Here is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bus Ticket Booking</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Bus Ticket Booking</h1>
</header>
<div class="container">
<form>
<label for="from">From:</label>
<select value="">
<option value="">Gujarat</option>
<option value="">Mumbai</option>
<option value="">Delhi</option>
<option value="">Chennai</option>
</select>
<label for="to">To:</label>
<select value="">
<option value="">Gujarat</option>
<option value="">Mumbai</option>
<option value="">Delhi</option>
<option value="">Chennai</option>
</select>
<label for="date">Date:</label>
<input type="date" id="date" name="date" required>
<label for="time">Time:</label>
<input type="time" id="time" name="time" required>
<label for="passengers">Number of Passengers:</label>
<input type="number" id="passengers" name="passengers" min="1" max="10" required>
<label for="class">Class:</label>
<select id="class" name="class" required>
<option value="economy">Economy</option>
<option value="business">Business</option>
<option value="first">First Class</option>
</select>
<button type="submit">Book Ticket</button>
</form>
</div>
</body>
</html>
CSS Styling
Presently, let’s include a few CSS . Make a record named style.css and include the taking after styles:
body {
font-family: Arial, sans-serif;
background-color: #f7f7fc;
margin: 0;
padding: 0;
background-image: url("bus-ksrtc-launch-inbox.jpg");
background-size: 100% 100vh;
}
.container {
width: 50%;
margin: auto;
overflow: hidden;
padding: 20px;
background: transparent
}
header {
background: #222e30;
color: #5eddf3;
padding: 10px 0;
text-align: center;
}
form {
display: flex;
flex-direction: column;
}
label {
margin: 10px 0 5px;
}
input, select, button {
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background-color: #333;
color: #fff;
cursor: pointer;
}
button:hover {
background-color: #555;
}
Explanation
- HTML Structure:
- The HTML code incorporates a shape with input areas for “From”, “To”, “Date”, “Time”, “Number of Travelers“, and “Course“.
- The frame employment labels for the “From” and “To” areas, permit clients to choose from predefined areas.
- The “Date” and “Time” areas utilize labels with the sorts of “date” and “time” individually.
- The “Number of Travelers” field employments a tag with the sort “number”.
- The “Number of Travelers” field employments a tag with the sort “number”.
- The “Lesson” field employments a tag with alternatives for “Economy”, “Trade“, and “To begin with Lesson“.
- A yield button is given to yield the frame.
- CSS Styling:
- Essential styling is connected to the body to set the textual style and foundation color.
- The header is styled with a foundation color, content color, and cushioning.
- The holder lesson styles the shape holder, centering it and including cushioning, foundation color, and a box shadow.
- The frame, names, inputs, choices, and buttons are styled for steady dividing, cushioning, and border sweep.
- The yield button changes color on a float to improve client interaction.
Conclusion
This transport ticket booking frame can be upgraded to assist with more highlights like approval, made strides in UX/UI, and backend integration for a total booking framework.