Creating a page for each room && Adding a form to search for availability

This commit is contained in:
Muyao CHEN
2024-06-29 11:53:45 +02:00
parent 2e9391d502
commit 2351db7178
8 changed files with 534 additions and 36 deletions

91
about.html Normal file
View File

@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="css/style.css" rel="stylesheet">
<style>
.room-image {
max-width: 50%;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Rooms
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="generals.html">General's Quarters</a></li>
<li><a class="dropdown-item" href="majors.html">Major's Suite</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="reservation.html">Book Now</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col">
<h1 class="text-center mt-3">About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed convallis urna, vitae congue
odio. Sed pulvinar diam a odio tristique, nec porta eros suscipit. Sed lacinia ut nisl ultrices
condimentum. Vivamus imperdiet sapien sit amet mauris ornare accumsan. Proin varius imperdiet
gravida. Suspendisse posuere velit leo, sit amet egestas quam porta quis. Duis in nulla eu quam
iaculis iaculis. Etiam commodo gravida venenatis. Phasellus in vehicula est, aliquam condimentum
nisi. In id ligula lacinia, varius leo vel, tincidunt libero. Nullam cursus vel lectus at consequat.
Quisque malesuada efficitur sem et sollicitudin. Donec eget tincidunt arcu. Quisque ut posuere ex.
</p>
</div>
</div>
<div class="row">
<footer class="py-3 my-4">
<ul class="nav justify-content-center border-bottom pb-3 mb-3">
<li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Features</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Pricing</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">FAQs</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">About</a></li>
</ul>
<p class="text-center text-body-secondary">© 2024 Company, Inc</p>
</footer>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>