html code

[xix1738]

<title>Hotel Website</title> <style>

#form-container {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
padding: 20px;
margin-top: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 500px;
width: 100%;
box-sizing: border-box;
}

• {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

body {
font-family: Arial, sans-serif;
}

a {
text-decoration: none;
color: #c5bcbc;
}

header {
background-color: #1b1919;
color: #4c4949;
padding: 20px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
display: flex;
justify-content: space-between;
align-items: center;
}

nav ul {
list-style: none;
display: flex;
}

nav li {
margin-right: 20px;
}

nav li:last-child {
margin-right: 0;
}

nav a {
color: #fff;
padding: 10px;
transition: all 0.3s ease-in-out;
}

nav a:hover {
background-color: #fff;
color: #333;
}

/* Main Styles */
main {
padding-top: 80px;
}

#hero {
background-image: url('hero.jpg');
background-size: cover;
background-position: center;
height: 600px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: #928888;
}

#hero h1 {
font-size: 5rem;
margin-bottom: 30px;
text-shadow: 2px 2px #333;
}

#hero p {
font-size: 1.5rem;
margin-bottom: 40px;
text-shadow: 1px 1px #333;
}

#hero button {
background-color: #fff;
color: #333;
padding: 15px 30px;
border: none;
border-radius: 5px;
font-size: 1.2rem;
cursor: pointer;
transition: all 0.3s ease-in-out;
}

#hero button:hover {
background-color: #333;
color: #4a4646;
}

#rooms {
background-color: #f9f9f9;
padding: 50px 0;
text-align: center;
}

#rooms h2 {
font-size: 3rem;
margin-bottom: 40px;
color: #333;
}

.room {
display: flex;
flex-direction: column;
margin: 20px;
}

.room img {
width: 100%;
height: auto;
margin-bottom: 20px;
}

.room h3 {
font-size: 1.5rem;
margin-bottom: 10px;
color: #333;
}

.room p {
font-size: 1.2rem;
margin-bottom: 20px;
color: #999;
}

#services {
padding: 50px 0;
text-align: center;
}

#services h2 {
font-size: 3rem;
margin-bottom: 40px;
color: #333;
}

#services ul {
list-style: none;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

#services li {
margin-right: 30px;
font-size: 1.2rem;
color: #333;
}

#contact {
background-color: #333;
padding: 50px 0;
text-align: center;
color: #fff;
}

#contact h2 {
font-size: 3rem;
margin-bottom: 40px;
}

#contact form {
display: flex;
flex-direction: column;
align-items: center;

}

#contact label {
font-size: 1.2rem;
margin-bottom: 10px;
}
</style>
<style>
/* Styles for the form container */
#form-container {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
padding: 20px;
margin-top: 20px;
}

    /* Styles for the form inputs */
    form label {
      display: block;
      margin-bottom: 10px;
      font-weight: bold;
      color: #333;
    }
    
    form input[type="text"],
    form input[type="email"],
    form input[type="date"] {
      width: 100%;
      padding: 10px;
      margin-bottom: 20px;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-size: 16px;
      color: #333;
    }
    
    form input[type="submit"] {
      background-color: #4CAF50;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
    }
    
    /* now we od the pop up style  */
    #popup {
      
      background-color: rgba(0,0,0,0.5);
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }
    #popup {

background-color: rgb(255, 255, 255);
color: #000;
}

    #popup-inner {
      background-color: #fff;
      border: 1px solid #151515;
      border-radius: 5px;
      padding: 20px;
      max-width: 500px;
      text-align: center;
    }
    
	#popup {

position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

    #popup-inner h2 {
      margin-top: 0;
      margin-bottom: 20px;
      font-weight: bold;
      color: #333;
      
    }
    
    #popup-inner p {
      margin-bottom: 10px;
      font-size: 16px;
      color: #f0eded;
    }
    
    #popup-inner button {
      background-color: #4CAF50;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
    }
	#form-container {

margin-top: 20px;
}

  </style></style>

• Home
• Rooms
• Services
• Contact

Welcome to our Hotel

Book your stay today and enjoy our luxurious rooms and services.

        <button onclick="showForm()">Book Now</button>

Enter Your Information

Name:

<label for="adults">Number of Adults:</label>

Number of Children:

<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>


<label for="checkin">Check-in Date:</label>
<input type="date" id="checkin" name="checkin" required><br>


<label for="checkout">Check-out Date:</label>
<input type="date" id="checkout" name="checkout" required><br>
<label for="room-type">Room Type:</label>


<select id="room-type" name="room-type">
  <option value="standard">Standard ($100/night)</option>

  <option value="deluxe">Deluxe ($150/night)</option>

  <option value="suite">Suite ($200/night)</option>
</select><br>
<button type="submit">Submit</button>

Your Information

Name:

Email:

Check-in Date:

Check-out Date:

Room Type:

Price: $

Number of Adults:

Number of Children:

Close

<script> function showForm() { document.getElementById("form-container").style.display = "block"; } function showPopup() { event.preventDefault(); var name = document.getElementById("name").value; var email = document.getElementById("email").value; var checkin = document.getElementById("checkin").value; var checkout = document.getElementById("checkout").value; var adults = document.getElementById("adults").value; var children = document.getElementById("children").value; var roomType = document.getElementById("room-type").value; var price; switch (roomType) { case "standard": price = 100; break; case "deluxe": price = 150; break; case "suite": price = 200; break; } document.getElementById("popup-name").innerHTML = name; document.getElementById("popup-email").innerHTML = email; document.getElementById("popup-checkin").innerHTML = checkin; document.getElementById("popup-checkout").innerHTML = checkout; document.getElementById("popup-room-type").innerHTML = roomType; document.getElementById("popup-adults").innerHTML = adults; document.getElementById("popup-children").innerHTML = children; document.getElementById("popup-price").innerHTML = price; document.getElementById("popup").style.display = "block"; } function hidePopup() { document.getElementById("popup").style.display = "none"; document.getElementById("form-container").style.display = "none"; document.getElementById("name").value = ""; document.getElementById("email").value = ""; document.getElementById("checkin").value = ""; document.getElementById("checkout").value = ""; document.getElementById("adults").value= ""; document.getElementById("children").value= ""; document.getElementById("room-type").selectedIndex = 0; } </script>

	</section>
	<section id="rooms">
		<h2>Our Rooms</h2>
		<p>We offer a variety of rooms to suit your needs, from standard to deluxe.</p>
		<div class="room">
			<img src="room1.jpg" alt="Room 1">
			<h3>Standard Room</h3>
			<p>Starting at $100/night</p>
		</div>



		<div class="room">
			<img src="room2.jpg" alt="Room 2">
			<h3>Deluxe Room</h3>
			<p>Starting at $150/night</p>
		</div>



  <div class="room">
    <img src="room3.jpg" alt="room 3">
    <h3>sperior room</h3>
    <p>staring at 200/night</p>
  </div>



	</section>
	<section id="services">
		<h2>Our Services</h2>
		<p>We offer a range of services to make your stay as comfortable as possible.</p>
		<ul>
			<li>24/7 Front Desk</li>
			<li>Room Service</li>
			<li>Free Wi-Fi</li>
			<li>Swimming Pool</li>
			<li>Spa</li>
		</ul>
	</section>
	
</main>
<footer>
	<p>&copy; 2023 Hotel Website</p>
</footer>
<script src="script.js"></script>