Project Documentation

Table of Contents
Abstract ...................................................................................................................................... 2
Description ................................................................................................................................. 3
Advantages ................................................................................................................................. 4
Disadvantages ............................................................................................................................ 5
Limitation ................................................................................................................................... 6
System Design ........................................................................................................................... 7
System Testing ........................................................................................................................... 8
System Requirement .................................................................................................................. 9
Overview .................................................................................................................................. 10
Structure of HTML .................................................................................................................... 11
HTML Code ............................................................................................................................... 12
CSS Code ................................................................................................................................... 29
Web Site Home Page ................................................................................................................ 53
Conclusion ................................................................................................................................ 57
1
ABSTRACT
An online hotel booking system is a web application that allows users to search for and reserve
hotel rooms on the internet. The system is built using HTML, which is the markup language used
to create web pages. The abstract of an online hotel booking system in HTML would describe
the basic structure and functionality of the system.
The system would consist of a user interface that allows users to enter their search criteria, such
as the location, dates, number of rooms, and number of guests. The system would then search a
database of available hotel rooms that meet the user's criteria and display the results to the user.
The user would be able to select a hotel room from the list of available options and reserve it
using the system. The system would collect the necessary information from the user, such as
their name, email address, and payment details, and process the reservation.
The system would also include features such as a login system for registered users, a dashboard
for managing reservations, and an administrative interface for managing hotel listings and
reservations.
Overall, the online hotel booking system in HTML would provide a convenient and efficient way
for users to search for and reserve hotel rooms on the internet.
2
DISCRIPTION
An online hotel booking system in HTML would typically consist of several web pages that
allow users to search for and book hotel rooms. Here is a description of some of the pages that
might be included in such a system:
Homepage: This page would typically introduce the user to the online hotel booking system and
provide links to other pages such as search, login, and registration.
Search page: This page would allow users to search for available hotel rooms by specifying their
destination, check-in and check-out dates, number of guests, and other search criteria. The search
results would be displayed on the same page or on a separate page, depending on the design of
the system.
Room details page: When a user clicks on a specific hotel room from the search results page,
they would be taken to a room details page that provides more information about the room, such
as its price, availability, amenities, and photos.
Booking page: Once a user has selected a room, they would be taken to a booking page where
they can enter their personal information, payment details, and other necessary information to
complete the booking.
Confirmation page: After the user has completed the booking process, they would be shown a
confirmation page that provides them with details about their booking, such as the room number,
check-in and check-out dates, and total cost.
User account page: Users can log in to their account to view their booking history, modify their
bookings, or cancel their bookings. This page would also allow users to update their personal
information, such as their name, email, and password.
Overall, an online hotel booking system in HTML would need to be designed with a user-
friendly interface and should incorporate secure payment processing and data handling to ensure
the privacy and security of users' information.
3
ADVANTAGES
An online hotel booking system developed using HTML offers several advantages to
hoteliers and customers. Here are some of the advantages of an online hotel booking system
in HTML:
Easy access: With an online hotel booking system in HTML, customers can easily access the
system from anywhere and at any time, as long as they have an internet connection. This allows
customers to book their hotel rooms quickly and easily, without having to visit the hotel or call to
make a reservation.
Convenient for customers: Online hotel booking systems in HTML are designed to be user-
friendly, which makes it easy for customers to search for hotel rooms based on their preferences
and requirements. Customers can also view room availability, prices, and other details, allowing
them to make informed decisions before making a booking.
Increased revenue: An online hotel booking system in HTML can help hoteliers to increase
their revenue by allowing them to reach a wider audience. This is because the system is
accessible to customers from all over the world, which means that hotels can attract customers
who would not have otherwise been able to make a reservation.
Improved efficiency: Online hotel booking systems in HTML can help to improve the
efficiency of hotel operations by automating the booking process. This can save hotel staff time
and resources, allowing them to focus on other important tasks.
Secure payment processing: Online hotel booking systems in HTML can be designed to
incorporate secure payment processing, which ensures that customers' payment information is
protected. This can help to build customer trust and confidence in the system.
Real-time updates: Online hotel booking systems in HTML can be designed to provide real-
time updates on room availability, prices, and other details. This ensures that customers have
access to the most up-to-date information, which can help them to make informed decisions
when booking a hotel room.
Overall, an online hotel booking system in HTML can provide several benefits to both customers
and hoteliers, making it an essential tool for the hospitality industry.
4
DISADVANTAGES
While an online hotel booking system in HTML offers many benefits, there are also some
potential disadvantages to consider. Here are some of the disadvantages of an online hotel
booking system in HTML:
Technical issues: Online hotel booking systems in HTML can experience technical issues, such
as website downtime or slow loading times, which can frustrate customers and impact their
booking experience.
Limited personal interaction: An online hotel booking system in HTML can reduce the amount
of personal interaction between hotel staff and customers. Some customers may prefer to speak
with a hotel representative directly to ask questions or make special requests.
Privacy and security concerns: Online hotel booking systems in HTML require customers to
enter personal and financial information, which can raise privacy and security concerns.
Customers may be hesitant to provide their information, which could lead to lower booking rates.
Lack of customization: Online hotel booking systems in HTML can be limited in terms of
customization options, which may not meet the specific needs of some hoteliers. Customization
can be more difficult to implement in a HTML-based system than in a system that uses a more
flexible programming language.
Dependence on technology: An online hotel booking system in HTML relies heavily on

technology, which can be vulnerable to outages or other disruptions. This could impact the
ability of customers to book hotel rooms, resulting in lost revenue for hoteliers.
Difficulty in integrating with other systems: If a hotel already has other systems in place, such
as a property management system or a customer relationship management system, integrating an
online hotel booking system in HTML with these systems can be challenging.
Overall, while an online hotel booking system in HTML offers many benefits, there are also
some potential drawbacks to consider. Hoteliers should carefully evaluate the advantages and
disadvantages before deciding to implement an online booking system.
5
LIMITATION
Limited functionality: HTML is primarily used for creating static web pages and lacks the
ability to handle dynamic and interactive features such as real-time search results, advanced
filtering, and interactive maps.
Limited design capabilities: While HTML provides a basic structure for web pages, it may not
be suitable for designing a visually appealing user interface. Other tools such as CSS and
JavaScript may be required to achieve the desired design and functionality.
Security issues: HTML-based booking systems may be vulnerable to security threats such as
SQL injection and cross-site scripting attacks. Additional measures such as server-side validation
and encryption should be implemented to ensure the system's security.
Limited scalability: HTML-based booking systems may not be scalable to handle large volumes
of traffic, which can lead to slow response times or crashes. To handle high traffic, other
technologies such as server-side scripting languages and databases may be required.
Accessibility issues: HTML-based booking systems may not be accessible to users with
disabilities, such as those who use screen readers or have color blindness. Additional measures
such as proper markup and alternative text should be implemented to ensure accessibility.
6
SYSTEM DESIGN
Designing an online hotel booking system using HTML can be done by breaking down the
system into different components and designing each component separately. Below are
some of the essential components that need to be designed:
User Interface: The user interface is the first component that the user interacts with when using
the system. It should be designed in a way that is user-friendly and easy to navigate. The
interface should allow the user to select the location, dates of stay, and the number of guests.
Availability Checker: The availability checker is responsible for checking the availability of the
hotel rooms during the selected dates and returning the available rooms to the user. It should also
show the room details, such as room type, room price, and room features.
Booking Form: The booking form is where the user enters their details, such as name, contact
information, and payment details. The form should be designed in a way that is easy to fill out
and secure for the user.
Payment Gateway: The payment gateway is responsible for handling the user's payment details
and processing the payment securely. The gateway should support different payment methods,
such as credit cards, PayPal, and others.
Confirmation Page: Once the user has completed the booking process, a confirmation page
should be displayed to the user, which should include the booking details and a confirmation
number.
In addition to the above components, the system should also have an administration panel that
allows the hotel management to manage the room inventory, set room prices, and view bookings.
The administration panel should be designed in a way that is easy to use and secure.
Overall, the online hotel booking system should be designed in a way that is easy to use, secure,
and reliable for both the user and the hotel management. The design should take into
consideration the user's needs and provide a seamless experience from start to finish.
7
SYSTEM TESTING
Functionality Testing: This involves testing the features and functionalities of the system. You
should ensure that users can search for hotels, view available rooms, book rooms, cancel
bookings, and make payments without encountering any errors.
Usability Testing: This type of testing involves evaluating the user interface and user experience
of the system. You should ensure that the system is easy to use, intuitive, and user-friendly.
Users should be able to navigate through the system easily, without any confusion or difficulties.
Compatibility Testing: This type of testing involves evaluating the system's compatibility with
different devices and browsers. You should ensure that the system works well on different
devices and browsers, including desktops, laptops, smartphones, and tablets.
Performance Testing: This type of testing involves evaluating the system's speed, scalability,
and reliability. You should ensure that the system can handle a large number of users
simultaneously without slowing down or crashing.
Security Testing: This type of testing involves evaluating the system's security measures. You
should ensure that the system uses encryption to protect user data, has measures in place to
prevent fraud, and is compliant with data protection laws.
Overall, you should test the online hotel booking system thoroughly to ensure that it meets the
user's requirements, is easy to use, and provides a smooth user experience.
8
SYSTEM REQUIREMENT
Assuming that you want to create a basic online hotel booking system using HTML, here
are some system requirements you might want to consider:
Web server: You will need a web server to host your website and serve web pages to your users.
You can use Apache or Nginx web servers, or a hosting service that provides a web server.
HTML editor: You will need an HTML editor to create and edit your web pages. You can use a
simple text editor like Notepad, or a more advanced editor like Adobe Dreamweaver.
Database management system: You will need a database management system to store and
manage your hotel data, such as room types, availability, prices, and reservations. You can use
MySQL or PostgreSQL, or a cloud-based database service like Amazon RDS or Google Cloud
SQL.
Server-side scripting language: You will need a server-side scripting language to process user
input and generate dynamic web pages. You can use PHP, Python, or Node.js, among others.
Payment gateway integration: If you want to accept online payments from your users, you will
need to integrate a payment gateway into your system. You can use services like PayPal, Stripe,
or Square.
SSL certificate: You will need an SSL certificate to secure your website and protect user data.
You can obtain a free SSL certificate from Let's Encrypt, or purchase one from a certificate
authority.
Responsive design: You will need to ensure that your website is responsive and optimized for
different devices and screen sizes. You can use CSS and JavaScript frameworks like Bootstrap or
Foundation to achieve this.
Keep in mind that this is a basic list of system requirements, and your specific needs may vary
depending on the complexity and functionality of your online hotel booking system.
9
OVERVIEW
An online hotel booking system in HTML typically involves creating a website that allows users
to browse and book hotel rooms. The website will need to have a user-friendly interface that
allows customers to search for hotels based on location, date, and price range.
To build such a system, HTML can be used to structure the content of the website, define the
layout of the pages, and add text and images. However, HTML alone is not sufficient to create a
complete hotel booking system. Other technologies, such as CSS and JavaScript, are needed to
create a responsive design and to add interactive functionality such as booking forms, calendars,
and payment gateways.
In addition to the front-end development work, a hotel booking system also requires a back-end
system to manage bookings and inventory. This typically involves using a server-side scripting
language such as PHP, Python, or Ruby to create a database and handle data processing tasks.
Overall, creating an online hotel booking system in HTML requires a combination of front-end
and back-end development skills, as well as knowledge of web design and user experience
principles.
10
STRUCTURE OF HTML
The structure of an online hotel booking system in HTML typically involves organizing the
content of the website into several key elements that work together to create a cohesive user
experience. These elements include:
The header: This is the topmost section of the website and typically includes the logo of the
hotel booking system, a navigation menu, and search bar. The header provides users with easy
access to key pages on the website and helps them to quickly find the information they need.
The main content: This section of the website is where users can browse and search for hotels
based on their preferences. The main content area typically includes a list of available hotels,
along with their prices, ratings, and location information. Users can filter and sort the results to
find the hotel that best fits their needs.
The booking form: Once a user has selected a hotel, they can proceed to the booking form. The
booking form typically includes fields for entering personal information, such as name, address,
and credit card details. Users can also select the dates of their stay and any additional services
they require, such as breakfast or airport shuttle.
The footer: This is the bottommost section of the website and typically includes links to
important pages, such as the terms and conditions, privacy policy, and contact information. The
footer helps users to navigate the website and provides them with additional information about
the hotel booking system.
Overall, the structure of an online hotel booking system in HTML should be easy to navigate and
intuitive for users. The layout should be responsive, meaning that it adapts to different screen
sizes and devices, and the design should be visually appealing and professional.
11
HTML CODE:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Hotel Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"

integrity="sha384-
AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
crossorigin="anonymous" />
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css"
integrity="sha512-
UTNP5BXLIptsaj5WdKFrkFov94lDx+eBvbKyoe1YAfjeRPC+gT5kyZ10kOHCfNZqEui1sxmq
vodNUx3KbuYI/A==" crossorigin="anonymous"
referrerpolicy="no-referrer" />
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.cs
s" integrity="sha512-
sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9
kfa/s+a4f4i5pLkw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-
ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
</head>
12
<body>
<header class="header" id="navigation-menu">
<div class="container">
<nav>
<a href="#" class="logo"> <img src="image/logo.png" alt=""> </a>
<ul class="nav-menu">
<li> <a href="#home" class="nav-link">Home</a> </li>
<li> <a href="#about" class="nav-link">About</a> </li>
<li> <a href="#rooms" class="nav-link">Rooms</a> </li>
<li> <a href="#restaurant" class="nav-link">Restaurant</a> </li>
<li> <a href="#gallery" class="nav-link">Gallery</a> </li>
<li> <a href="#contact" class="nav-link">Contact</a> </li>
</ul>
<div class="hambuger">
<span class="bar"></span>
</div>
</nav>
</div>
</header>
<script>
const hambuger = document.querySelector('.hambuger');
const navMenu = document.querySelector('.nav-menu');
13
hambuger.addEventListener("click", mobileMenu);
function mobileMenu() {
hambuger.classList.toggle("active");
navMenu.classList.toggle("active");
}
const navLink = document.querySelectorAll('.nav-link');

navLink.forEach((n) => n.addEventListener("click", closeMenu));
function closeMenu() {
hambuger.classList.remove("active");
navMenu.classList.remove("active");
}
</script>
<section class="home" id="home">

<div class="head_container">
<div class="box">
<div class="text">
<h1>Hello.Salut.Hola</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<button>MORE INFO</button>
</div>
</div>
<div class="image">
<img src="image/home1.jpg" class="slide">
14
</div>
<div class="image_item">
<img src="image/home1.jpg" alt="" class="slide active"
onclick="img('image/home1.jpg')">
<img src="image/home2.jpg" alt="" class="slide" onclick="img('image/home2.jpg')">
</div>
</div>
</section>
<script>
function img(anything) {
document.querySelector('.slide').src = anything;
}
function change(change) {
const line = document.querySelector('.image');
line.style.background = change;
}
</script>
<section class="book">
<div class="container flex">
<div class="input grid">
<div class="box">
<label>Check-in:</label>
<input type="date" placeholder="Check-in-Date">
</div>
<div class="box">
<label>Check-out:</label>
15
<input type="date" placeholder="Check-out-Date">
</div>
<div class="box">
<label>Adults:</label> <br>
<input type="number" placeholder="0">
</div>
<div class="box">
<label>Children:</label> <br>
<input type="number" placeholder="0">
</div>
</div>
<div class="search">
<input type="submit" value="SEARCH">
</div>
</div>
</section>
<section class="about top" id="about">
<div class="left">
<div class="img">
<img src="image/a1.jpg" alt="" class="image1">
<img src="image/a2.jpg" alt="" class="image2">
</div>
</div>
<div class="right">
<div class="heading">
<h5>RAISING COMFOMRT TO THE HIGHEST LEVEL</h5>
<h2>Welcome to Luviana Hotel Resort</h2>
16
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<button class="btn1">READ MORE</button>
</div>
</div>
</div>
</section>
<section class="wrapper top">
<div class="text">
<h2>Our Amenities</h2>
<div class="content">
<div class="box flex">
<i class="fas fa-swimming-pool"></i>
<span>Swimming pool</span>
</div>
<i class="fas fa-dumbbell"></i>
<span>Gym & yogo</span>
</div>
<i class="fas fa-spa"></i>
17
<span>Spa & massage</span>
</div>
<i class="fas fa-ship"></i>
<span>Boat Tours</span>
</div>
<i class="fas fa-swimmer"></i>
<span>Surfing Lessons</span>
</div>
<i class="fas fa-microphone"></i>
<span>Conference room</span>
</div>
<i class="fas fa-water"></i>
<span>Diving & smorking</span>
</div>
<i class="fas fa-umbrella-beach"></i>
<span>Private Beach</span>
</div>
</div>
</div>
</div>
</section>
<section class="room top" id="room">
18
<div class="heading_top flex1">
<h5>RAISING COMFORT TO THE HIGHEST LEVEL</h5>
<h2>Rooms $ Suites</h2>
</div>
<div class="button">
<button class="btn1">VIEW ALL</button>
</div>
</div>
<div class="content grid">

<div class="box">
<div class="img">
<img src="image/r1.jpg" alt="">
</div>
<div class="text">
<h3>Superior Soble Rooms</h3>
<p> <span>$</span>129 <span>/per night</span> </p>
</div>
</div>
<div class="box">
<div class="img">
</div>
<div class="text">
</div>
19
</div>
<div class="box">
<div class="img">
</div>
<div class="text">
</div>
</div>
</div>
</div>
</section>
<section class="wrapper wrapper2 top">
<div class="text">
<h5>AT THE HEART OF COMMUNICATION</h5>
<h2>People Say</h2>
</div>
<div class="para">

<div class="img">
<img src="image/c.jpg" alt="">
20
</div>
<div class="name">
<h5>KATE PALMER</h5>
<h5>IDAHO</h5>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="restaurant top" id="restaurant">

<div class="left">
<img src="image/re.jpg" alt="">
</div>
<div class="right">
<div class="text">
<h2>Our Restaurant</h2>
<p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>
<div class="accordionWrapper">
<div class="accordionItem open">
<h2 class="accordionIHeading">Italian Kitchen</h2>
<div class="accordionItemContent">
21
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div class="accordionItem close">
<h2 class="accordionIHeading">Mexican Kitchen</h2>
</p>
</div>
</div>
<h2 class="accordionIHeading">Italian Kitchen</h2>
</p>
</div>
</div>
<h2 class="accordionIHeading">Mexican Kitchen</h2>
</p>
22
</div>
</div>
</div>
</div>
</div>
</section>
<script>
var accItem = document.getElementsByClassName('accordionItem');
var accHD = document.getElementsByClassName('accordionIHeading');
for (i = 0; i < accHD.length; i++) {

accHD[i].addEventListener('click', toggleItem, false);
}
function toggleItem() {
var itemClass = this.parentNode.className;
for (var i = 0; i < accItem.length; i++) {
accItem[i].className = 'accordionItem close';
}
if (itemClass == 'accordionItem close') {
this.parentNode.className = 'accordionItem open';
}
}
</script>
<section class="gallary mtop " id="gallary">
23
<div class="heading_top flex1">
<h5>WELCOME TO OUR PHOTO GALLERY</h5>
<h2>Photo Gallery of Our Hotel</h2>
</div>
<div class="button">
<button class="btn1">VIEW GALLERY</button>
</div>
</div>
<div class="owl-carousel owl-theme">

<div class="item">
<img src="image/g1.jpg" alt="">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
24
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"
integrity="sha512-
gY25nC63ddE0LcLPhxUJGFxa2GoIyA5FLym4UJqHDEMHjp8RET6Zn/SHo1sltt3WuVtqfyxE
CP38/daUc/WVEA==" crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"
integrity="sha512-
bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q
+fyXBNcU9lrw==" crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<script>
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
dots: false,
navText: ["<i class='fas fa-chevron-left'></i>", "<i class='fas fa-chevron-right'></i>"],
25
responsive: {
0: {
items: 1
},
768: {
items: 2
},
1000: {
items: 4
}
}
})
</script>
<section class="map top">

<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d14131.036667732067!2d8
5.32395955!3d27.69383745!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2snp!4v
1637755481449!5m2!1sen!2snp" width="600" height="450" style="border:0;"
allowfullscreen="" loading="lazy"></iframe>
</section>
<footer>
<div class="container grid top">
<div class="box">
26
<img src="https://img.icons8.com/external-flatart-icons-flat-
flatarticons/48/000000/external-hotel-hotel-services-and-city-elements-flatart-icons-flat-
flatarticons-1.png" />
<p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.</p>
<p>Accepted payment methods</p>

<div class="payment grid">
<img src="https://img.icons8.com/color/48/000000/visa.png" />
<img src="https://img.icons8.com/color/48/000000/mastercard.png" />
<img src="https://img.icons8.com/color-glass/48/000000/paypal.png" />
<img src="https://img.icons8.com/fluency/48/000000/amex.png" />
</div>
</div>
<div class="box">
<h3>Recent News</h3>
<ul>
<li>Our Secret Island Boat Tour Is Just for You</li>
<li>Chill and Escape in Our Natural Shelters</li>
<li>September in Luviana Hotel</li>
<li>Live Music Concerts at Luviana</li>
</ul>
</div>
<div class="box">
<h3>For Customers</h3>
<ul>
27
<li>About Luviana</li>
<li>Customer Care/Help</li>
<li>Corporate Accounts</li>
<li>Financial Information</li>
<li>Terms & Conditions</li>
</ul>
</div>
<div class="box">
<h3>Contact Us</h3>
<ul>
<li>3015 Grand Ave, Cocount Grove, Merrick Way FL 123456</li>
<li><i class="far fa-envelope"></i>demoexample@gmail.com </li>
<li><i class="far fa-phone-alt"></i>123 456 7898 </li>
<li><i class="far fa-phone-alt"></i>123 456 7898 </li>
<li><i class="far fa-comments"></i>24/ 7 Customer Services </li>
</ul>
</div>
</div>
</footer>
</body>
</html>
28
CSS Code:
@import
url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200;300;400;500;600;700;80
0;900&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
font-family: 'Roboto Slab', serif;
scroll-behavior: smooth;
}
li {
list-style: none;
}
a{
text-decoration: none;
}
.container {
max-width: 80%;
margin: auto;
29
}
.head_container {
max-width: 90%;
margin: auto;
}
/*--------------header--------*/
header {
height: 8vh;
}
.logo img {
width: 120px;
}
header nav {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20px;
}
.hambuger {
display: none;
}
.bar {
30
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background-color: #fff;
}
header ul {
display: flex;
align-items: center;
}
header ul li {
margin-left: 3rem;
}
header ul li a {
font-size: 1.2rem;
font-weight: 400;
color: white;
transition: 0.5s;
}
header ul li a:hover {
color: #C1B086;
}
31
@media only screen and (max-width: 768px) {
header ul {
display: block;
position: fixed;
left: -100%;
top: 5rem;
flex-direction: column;
width: 100%;
border-radius: 10px;
text-align: center;
transition: 0.5s;
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
z-index: 20;
}
header ul.active {
left: 0%;
}
header ul li {
margin: 2.5rem 0;
}
header ul li a {
color: black;
}
32
.hambuger {
display: block;
cursor: pointer;
}
.hambuger.active .bar:nth-child(2) {
opacity: 0;
}
transform: translateY(8px) rotate(45deg);
}
transform: translateY(-8px) rotate(-45deg);
}
}
/*--------------header--------*/
/*--------------home--------*/
.home .image img {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
33
}
.home .text {
max-width: 50%;
color: white;
margin: 20% 0 0 10%;
}
.home h1 {
font-size: 80px;
font-weight: 400;
}
.home p {
font-weight: 400;
line-height: 25px;
font-family: sans-serif;
font-size: 17px;
margin: 50px 0 0 50px;
}
button {
padding: 20px 40px;
background: none;
outline: none;
border: 2px solid white;
border-radius: 50px;
color: white;
34
margin-top: 20px;
}
.home button {
margin-left: 50px;
}
.home .image_item {
position: absolute;
top: 20%;
right: 20%;
display: flex;
cursor: pointer;
}
.home .image_item img {

width: 140px;
height: 94px;
margin: 10px;
transition: 0.5s;
}
.home .image_item img.active {

border: 2px solid white;
}
.home .box .text {
35
position: relative;
}
.home .box .text::after {

position: absolute;
content: 'H';
font-size: 500px;
top: -120%;
font-weight: bold;
opacity: 0.1;
}
/*--------------home--------*/
/*--------------book--------*/
.flex {
display: flex;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 30px;
}
.book {
margin-top: 5%;
width: 100%;
height: 20vh;
36
color: white;
}
.book .input {
background: #242e5a;
padding: 20px 20px 40px 20px;
}
.book .search {
background: #3f9cc1;
padding: 20px;
}
input {
width: 100%;
padding: 15px;
border: 2px solid rgba(255, 255, 255, 0.1);
outline: none;
background: #263760;
margin-top: 20px;
color: white;
}
::placeholder {
color: white;
}
.book .search {
37
width: 20%;
}
.book .search input {

background: none;
border: none;
font-weight: bold;
font-size: 20px;
margin-top: 40px;
}
/*--------------book--------*/
/*--------------about--------*/
.top {
margin-top: 10%;
}
.mtop {
margin-top: 5%;
}
.left, .right {
width: 50%;
}
.about {
margin-bottom: 50px;
}
38
.about .img {
position: relative;
}
.about .image1 {
width: 310px;
height: 450px;
}
.about .image2 {
width: 325px;
height: 220px;
position: absolute;
bottom: 5px;
z-index: 2;
right: 30%;
}
.heading {
position: relative;
}
.heading::after {
position: absolute;
top: 0;
left: 0;
content: '';
39
width: 100px;
height: 4px;
background: #C1B086;
}
.heading h5 {
font-weight: 400;
letter-spacing: 2px;
padding-top: 20px;
color: #5f5f5f;
}
.heading h2 {
font-size: 30px;
font-weight: 400;
margin: 20px 0 40px 0;
color: #222222;
}
.heading p {
line-height: 25px;
color: #5f5f5f;
margin: 0 0 20px 50px;
}
.heading .btn1 {
margin: 50px 0 20px 50px;
40
}
.btn1 {
background: #C1B086;
color: white;
}
/*--------------about--------*/
/*--------------wrapper--------*/
.wrapper {
background-image: url("image/ami.jpg");
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 480px;
position: relative;
}
.wrapper .text {
background: #3f9cc1;
padding: 50px;
width: 40%;
height: 600px;
position: absolute;
top: -13%;
right: 10%;
padding-top: 10%;
color: white;
41
}
.wrapper .content {
display: grid;
grid-row-gap: 30px;
}
.wrapper h2 {
font-weight: 400;
}
.wrapper p {
margin: 20px 0 50px 0;
line-height: 30px;
}
.wrapper i {
margin: 5px 20px 0 0;
}
/*--------------wrapper--------*/
/*--------------room--------*/
.flex1 {
display: flex;
}
42
.room .grid {
}
.room img {
width: 100%;
height: 100%;
}
.room .box {
box-shadow: 0 13px 43px 0 rgb(37 46 89/10%);
}
.room .text {
padding: 20px;
}
.room h3 {
font-weight: 400;
}
.room p span {
font-size: 12px;
color: grey;
}
.room p {
43
font-size: 20px;
}
/*--------------room--------*/
/*--------------wrapper2--------*/
.wrapper2 {
background-image: url("image/w1.jpg");
}
.wrapper2 .text {
left: 10%;
}
.wrapper2 h5,
.wrapper2 h2 {
color: white;
}
.wrapper2 img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 20px;
}
.wrapper2 .para h5 {
font-size: 13px;
font-weight: 300;
44
margin-top: 5px;
}
.wrapper2 .para {
margin-left: 10%;
}
/*--------------wrapper2--------*/
/*--------------restaurant--------*/
.restaurant img {
width: 100%;
height: 100%;
}
.restaurant .right {
padding: 50px 50px 50px 100px;
}
.restaurant h2 {
font-weight: 400;
}
.restaurant .text p {
line-height: 25px;
}
45
.accordionItem {
margin-top: 30px;
}
.accordionItem p {
font-size: 15px;
opacity: 0.8;
font-family: sans-serif;
line-height: 20px;
}
.accordionIHeading {
cursor: pointer;
width: 100%;
border-radius: 3px;
font-weight: 400;
font-size: 17px;
color: #C1B086;
}
.close .accordionItemContent {
height: 0px;
transition: height 1s ease-out;
transform: scaleY(0);
float: left;
display: block;
46
}
.open .accordionItemContent {
padding: 30px;
width: 100%;
margin: 0 0 10px 0;
display: block;
transform: scaleY(1);
transform-origin: top;
transition: transform 0.4s ease;
box-sizing: border-box;
box-shadow: 0 13px 43px 0 rgb(37 46 89 / 10%);
}
/*--------------restaurant--------*/
/*--------------gallary--------*/
.gallary img {
width: 270px;
height: 350px;
}
.owl-carousel .owl-next,
.owl-carousel .owl-prev {
height: 50px;
position: absolute;
width: 50px;
cursor: pointer;
47
top: 35%;
background: white !important;
transition: 0.5s;
}
.owl-carousel .owl-prev {
left: 33px;
}
.owl-carousel .owl-next {
right: 33px;
}
.owl-carousel .owl-next:hover,
.owl-carousel .owl-prev:hover {
background: #C1B086 !important;
}
/*--------------gallary--------*/
/*--------------map--------*/
.map iframe {
width: 100%;
}
/*--------------map--------*/
/*--------------footer--------*/
footer h3 {
48
}
footer li {
transition: 0.5s;
}
footer li:hover {
color: #C1B086;
cursor: pointer;
}
/*--------------footer--------*/
@media only screen and (max-width:768px) {
.home .box .text {
max-width: 100%;
}
.home .box .text::after,

.home .image_item {
display: none;
}
.restaurant .container,
.about .container,
.book .container {
}
49
.grid {
}
.book {
margin-top: 10%;
height: auto;
}
.book .search {
width: 100%;
}
.book .search input {

margin-top: 0;
}
.left, .right {
width: 100%;
}
.wrapper .text {
width: 80%;
}
.room {
50
}
.room .grid {
}
.restaurant .right {
padding: 0;
margin-top: 50px;
}
footer .payment {
}
}
@media only screen and (max-width:768px) {

.grid {
}
.home .text {
margin: 10% 0 0 0;
}
.home h1 {
font-size: 40px;
}
51
.about p,
.home p {
margin: 50px 0 0 0;
}
.wrapper .text {
padding: 10px;
height: 600px;
}
.heading_top {
margin-top: 100px;
}
.heading_top button {
display: none;
}
.restaurant .flex {
flex-direction: column-reverse;
}
}
52
WEB SITE HOME PAGE
53
54
55
PHOTO GALLERY OF OUR HOTEL
56
CONCLUSION
An online hotel booking system is a crucial aspect of the hospitality industry in the modern era.
With the growth of the internet and technology, more and more people are turning to online
platforms to book their travel accommodations. Building an online hotel booking system in
HTML can be a challenging task, but it is possible with the right skills and knowledge.
In conclusion, creating an online hotel booking system using HTML is an effective and efficient
way to attract customers and increase revenue for a hotel business. The system should be user-
friendly, easy to navigate, and secure to ensure that customers have a positive experience and
trust in the booking process. It is essential to continuously update and improve the system to
meet the changing needs of customers and stay ahead of the competition.
57

Project Documentation

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Project Documentation

Uploaded by

Copyright:

Available Formats

Table of Contents

Dependence on technology: An online hotel booking system in HTML relies heavily on

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"

const navLink = document.querySelectorAll('.nav-link');

<section class="home" id="home">

<div class="content grid">

<div class="box flex">

<section class="restaurant top" id="restaurant">

for (i = 0; i < accHD.length; i++) {

<section class="gallary mtop " id="gallary">

<div class="owl-carousel owl-theme">

<section class="map top">

<p>Accepted payment methods</p>

.home .image_item img {

.home .image_item img.active {

.home .box .text {

.home .box .text::after {

.book .search input {

.home .box .text::after,

.book .search input {

@media only screen and (max-width:768px) {

You might also like