creating a basic HTML template for an air ticket booking site involves designing a structured layout with placeholders for various sections such as navigation,search from,flight options booking details, etc.
<html lang="en"> <head> <meta charset="UTF-*"> <title>Air Ticket Booking</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Flight</a></li> <li><a href="#">Hotels</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <section class="hero"> <div class="hero-content"> <h1>Find Your Next Adventure</h1> <p>Book your flights with ease!</p> <form id="flightsearchForm"> <label for="departure">Departure:</label> <input type="text" id=""departure" required> <label for="destination">Destination:</label> <input type="text" id=""destination" required> <label for="departureDate">Departure Date:</label> <input type="text" id=""departurDate" required> <label for="returnDate">Return Date:</label> <input type="date" id="returnDate"> <button type="submit">search Flights</button> </form> </div> </selection> <section class="flight-options"> <h2>Available Flights</h2> <div class="flight-card"> <h3>Flight option1</h3> <p>Details about the flight option, price, etc.</p> <button>select Flight</button> </div> <div class="flight-card"> <h3>Flight option 2</h3> <p>Details about the flight option, price, etc.</p> <button>select Flight</button> </div> </section> <section class="booking-details"> <h2>Booking summary</h2> <div class="booking summary"> <h3>Flight Details</h3> <p>selected flights will appear here.</p> <h3>passenger information</h3> <form id="passengerDetailsForm"> <label for="name">Name:</label> <input type="text" id="name" required> <label for="email">Email:</label> <input type="email" id="email" required> <label for="phone">Phone:</label> <input type="tel" id="phone" required> <button type="submit">Book Ticket</button> </form> </div> </section> <footer> <p>2024 Air Ticket Booking.All rights reserved</p> </footer> <script src="scripts.js"></script> </body> </html>
Explanation:
1.Header(navigation Bar):
- provides navigation links to different sections of the website
2.Hero section:
- Contains a headline and a search form (‘flightsearchform’) for users to input departure,destination, and dates.
3.Flight Options Section:
- Displays available flight options in ‘flight-card’ containers. Each card includes flight details and a button to select the flight.
4.Booking Details Section:
- Shows a summary of the selected flight and provides a form and provides a form (‘passengerDetailsForm’) for entering passenger information (name,email,phone) and booking the ticket.
5.Foter:
- Includes copyright information.
6.Scripts and Styles:
- Links to external CSS (‘styles.css’) for styling and javaScript (‘script.js’) for handling dynamic behaviour
CSS (style.css):
Basic example of styles to get you started.Customize as needed for your design
body {
font-family:Arial,sans-serif;
line-height: 1.6;
background-color: #f0f0f0;
marign: 0;
padding: 0;
}
.container {
width: 80%;
marign: 0 auto;
padding: 20px;
}
header {
background: #333;
color: #fff;
padding: 10px 0;
text-aling: center;
}
header nav ul {
list-style-type:none;
margin: 0;
padding: 0;
}
header nav ul {
display: inline;
margin-right: 20px;
}
header nav ul li a {
color: #fff;
text-decoration: none;
padding: 5px 10px;
}
header nav ul i a:hover {
background-color: #555;
}
.hero {
background-image: url('background.jpg');
background-size: cover;
color: #fff;
padding: 100px 0;
text-align: center;
}
.hero h1 {
font-size: 3em;
margin-bottom: 20px;
}
.hero p {
font-size: 1.2em;
margin-bottom: 20px;
}
#flightsearchForm {
background-color: rgba(255,255,255,0.8);
padding: 20px;
border-radius: 8px;
display: inline-block;
}
#flightsearchForm label, #flightsearchForm input, #flightsearchForm buttom {
display: block;
margin-bottom: 10px;
}
.flight-options {
padding: 20px;
}
.flight-card {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
}
.flight-card h3 {
margin-top: 0;
}
.flight-card button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.booking-details {
padding: 20px;
}
.booking-summary {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 8px;
padding: 20px;
}
.booking-summary h3 {
margin-top: 0;
}
#passengerDetailsForm label, #passenegeDetailsForm input, #pasengerDetailsForm button {
display: block;
margin-bottom: 10px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
}
Additional considerations:
- Responsive Design: Ensures the layout adapts well to different screen sizes using media queries
- Form Validation: Implement client-side validation for input fields to improve user experience
- Dynamic Content: if your site retrieves flight data dynamically (via APIs), use javaScript to handle AJAX requests and update the UI accordingly.
- Accessibility: Consider accessibility standards for better usability.
- Security: If handling sensitive information like payment deatils, ensures secure transmission (HTTPS) and backend validation
This template provides a solid foundation for an air ticket booking site.