ا

<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>Appointment Booking</title> <style> body { margin: 0; font-family: Arial, sans-serif; } .top-bar { position: fixed; top: 0; left: 0; width: 100%; background-color: #1abc9c; /* Turquoise */ color: white; padding: 10px 20px; z-index: 1000; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .top-bar input[type=”text”], .top-bar input[type=”email”], .top-bar input[type=”tel”] { padding: 8px; border: none; border-radius: 4px; background-color: #f2f2f2; color: #333; } .top-bar label { color: white; display: flex; align-items: center; } .top-bar input[type=”checkbox”] { margin-left: 5px; margin-right: 5px; } .top-bar button { background-color: #f39c12; /* Orange */ border: none; padding: 10px 15px; color: white; border-radius: 4px; cursor: pointer; } .content { margin-top: 80px; /* offset for sticky bar */ padding: 20px; } </style> </head> <body> <div class=”top-bar”> <input type=”text” placeholder=”Name”> <input type=”tel” placeholder=”Mobile”> <input type=”email” placeholder=”Email”> <label><input type=”checkbox”> I agree to T&C</label> <button>Book Appointment</button> </div> <div class=”content”> <p>Page content starts here…</p> </div> </body> </html>