<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ride App</title> <link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> </head> <body> <div class="container"> <header> <h1><i class="fas fa-taxi"></i> SOFI RIDE</h1> </header> <main> <form id="rideForm"> <label for="pickup"><i class="fas fa-map-marker-alt"></i> Pickup Location:</label> <input type="text" id="pickup" name="pickup" required> <label for="dropoff"><i class="fas fa-map-pin"></i> Dropoff Location:</label> <input type="text" id="dropoff" name="dropoff" required> <button type="submit"><i class="fas fa-car"></i> Request Ride</button> </form> <div id="confirmation" class="hidden"> <p><i class="fas fa-check-circle"></i> Your ride from <span id="pickupLocation"></span> to <span id="dropoffLocation"></span> has been requested!</p> <h2><i class="fas fa-car-side"></i> Available Rides:</h2> <ul id="ridesList"></ul> </div> </main> <footer> <p>© 2024 Ride App</p> </footer> </div> <script src="scripts.js"></script> </body> </html>