index.html

PHOTO EMBED

Mon Jul 22 2024 13:20:37 GMT+0000 (Coordinated Universal Time)

Saved by @orince13224 

<!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>&copy; 2024 Ride App</p>
    </footer>
  </div>
  <script src="scripts.js"></script>
</body>

</html>
content_copyCOPY