64 lines
2.7 KiB
PHP
64 lines
2.7 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Hotel Website</title>
|
|
<link rel="stylesheet" href="../assests/css/styles.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css"
|
|
integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
<body>
|
|
<section class="" id="reservation">
|
|
<div class="bg-[#C03030] w-full max-w-full mx-auto p-4 md:p-8 flex flex-col md:flex-row items-center justify-between">
|
|
<!-- Left Side: Reservation Title -->
|
|
<div class="md:w-1/2 mb-6 md:mb-0 ">
|
|
<h1 class="text-2xl md:text-left md:text-5xl font-bold text-white">Make a <span class="md:flex md:flex-col">Reservation</span></h1>
|
|
</div>
|
|
|
|
<!-- Right Side: Reservation Form -->
|
|
<div class="w-full md:w-1/2">
|
|
<form action="#" class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0 md:space-x-2">
|
|
<!-- Date Input -->
|
|
<div class="flex items-center space-x-2 w-full md:w-auto">
|
|
<span class="text-[#F2A057] text-lg">
|
|
<i class="fas fa-calendar-alt"></i>
|
|
</span>
|
|
<div class="flex flex-col ">
|
|
<input type="date" class="py-2 px-4 rounded-lg shadow-sm text-gray-700 md:mt-[28px]" placeholder="Date">
|
|
<p class="text-white mt-2 text-sm">Powered by OpenTable</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Time Input -->
|
|
<div class="flex items-center space-x-2 w-full md:w-auto">
|
|
<span class="text-[#F2A057] text-lg">
|
|
<i class="fas fa-clock"></i>
|
|
</span>
|
|
<input type="time" class="py-2 px-4 rounded-lg shadow-sm text-gray-700" value="14:00">
|
|
</div>
|
|
|
|
<!-- Guest Number -->
|
|
<div class="flex items-center space-x-2 w-full md:w-auto">
|
|
<span class="text-[#F2A057] text-lg">
|
|
<i class="fas fa-users"></i>
|
|
</span>
|
|
<input type="number" class="py-2 px-4 rounded-lg shadow-sm text-gray-700" placeholder="Guest Number">
|
|
</div>
|
|
|
|
<!-- Book a Table Button -->
|
|
<button type="submit" class="bg-gray-800 text-white py-2 px-8 rounded-lg shadow hover:bg-white hover:text-gray-800 transition duration-300 mt-4 md:mt-0 w-full md:w-auto">
|
|
Book a Table
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
</body>
|
|
</html> |