top of page

How to create simple taxi booking from using HTML & CSS

<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Taxi Booking</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; } .container { max-width: 600px; margin: 50px auto; background-color: #fff; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 5px; } h2 { text-align: center; color: #333; } form { display: flex; flex-direction: column; } label { margin-bottom: 8px; font-weight: bold; } input, select { padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; } button { background-color: #4caf50; color: #fff; padding: 10px; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #45a049; } </style> </head> <body> <div class=”container”> <h2>Taxi Booking Form</h2> <form action=”#” method=”post”> <label for=”name”>Name:</label> <input type=”text” id=”name” name=”name” required> <label for=”phone”>Phone:</label> <input type=”tel” id=”phone” name=”phone” required> <label for=”pickup”>Pickup Location:</label> <input type=”text” id=”pickup” name=”pickup” required> <label for=”drop”>Drop-off Location:</label> <input type=”text” id=”drop” name=”drop” required> <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=”carType”>Select Car Type:</label> <select id=”carType” name=”carType” required> <option value=”sedan”>Sedan</option> <option value=”suv”>SUV</option> <option value=”van”>Van</option> </select> <button type=”submit”>Book Taxi</button> </form> </div> </body> </html>

0 views0 comments

Recent Posts

See All

Comentarios


bottom of page