Discover how to create a seamless hotel booking website using HTML, CSS, and JavaScript. Enhance user experience and boost conversions.
Table of Contents
In today's digital era, the importance of a user-friendly hotel booking website cannot be overstated. It serves as the virtual gateway for travelers to explore and secure accommodations, making it a critical component of any hotelier's success. This comprehensive guide will walk you through the intricate process of creating an efficient hotel booking website using the dynamic trio of web development: HTML, CSS, and JavaScript.
By the end of this journey, you will understand how to craft a website that not only attracts guests but also ensures a seamless booking experience. We'll cover the fundamentals of website development, explore the key elements of an effective hotel booking system, and delve into the nuances of responsive design.
Whether you're a seasoned web developer looking to specialize in the hospitality industry or a hotel owner seeking to improve your online presence, this guide is your roadmap to success. Let's embark on this enlightening journey to create a hotel booking website that leaves a lasting impression on your guests.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our hotel website.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Let's break down the code step by step:
1. <!DOCTYPE html>: This declaration defines the document type and version of HTML being used, which is HTML5 in this case.
2. <html lang="en">: This is the opening tag for the HTML document. The lang attribute is set to "en" to indicate that the content of the webpage is in English.
3. <head>: This section contains metadata about the webpage and links to external resources, but it's not visible to the user.
- <meta charset="UTF-8">: This meta tag defines the character encoding of the document as UTF-8, which includes support for a wide range of characters and symbols.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag sets the viewport properties, ensuring that the webpage is responsive and adjusts to the width of the device's screen.
- <title>Hotel Website</title>: This sets the title of the webpage, which is displayed in the browser's title bar or tab.
- <link rel="stylesheet" href="styles.css">: This line links an external CSS (Cascading Style Sheets) file named "styles.css" to apply styles to the webpage.
- <script src="https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.umd.min.js"></script>: This line includes an external JavaScript file from a Content Delivery Network (CDN) for additional functionality on the webpage.
- Several <link> tags are used to preload fonts and icons from external sources.
- <script src="https://kit.fontawesome.com/b8a58bc95c.js" crossorigin="anonymous"></script>: This script tag loads the Font Awesome icon library from a CDN, allowing the use of Font Awesome icons on the webpage.
- <link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">: This is a link to a CSS file specifically for print media, but the media type and expressions are not defined in this snippet.
4. <body>: This section contains the visible content of the webpage.
- <header class="header" id="navigation-menu">: This is the header section of the webpage. It contains a navigation menu, a logo, and a hamburger menu icon for mobile navigation.
- <div class="location-ask">: This div contains a form for users to search for hotel locations, check-in dates, rooms, and special rates.
- <div class="hotel-front-container">: This div contains an image of the hotel's front view.
- <div class="welcome-text">: This div contains a welcoming message and a button for users to explore more.
- <div class="subheading">: This div represents a subheading with a related paragraph.
- <div class="destinations-images">: This div contains images and captions for various travel destinations.
- <div class="experience-images">: This div contains images and captions related to different travel experiences.
- <div class="different-hotels">: This div contains an image and text about "Homes & Villas," a type of accommodation.
- <div class="back-to-top">: This div contains a button that allows users to scroll back to the top of the webpage.
- <hr class="footer-line">: This horizontal line separates the footer from the rest of the content.
- <div class="footer">: This is the footer section of the webpage, containing links, buttons, and social media icons.
5. <script src="script.js"></script>: This script tag includes an external JavaScript file named "script.js" for additional interactivity and functionality on the webpage.
This is the basic structure of our hotel website using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the hotel website is in place, the next step is to add styling to the website using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our website. Let's break down the code section by section:
1. @import: This rule imports an external font from Google Fonts called 'Roboto Slab' with various weights (200, 300, 400, 500, 600, 700, 800, 900) and sets the display property to 'swap'. This font will be used throughout the website.
2. *: This is a universal selector that selects all elements on the page. It sets some initial styling for all elements, including removing padding and margin and ensuring that the box-sizing property is set to 'border-box'.
3. html, body: Selects the HTML and body elements and sets the font family to 'Roboto Slab' and enables smooth scrolling behavior.
4. li: Selects list items and removes the default list-style.
5. a: Selects anchor links and remove the default text decoration (underlining).
6. .container: Styles a class named "container" by setting a maximum width of 90% and centering it with auto margins.
7. .head_container: Styles a class named "head_container" in a similar way to the "container" class.
8. header: Styles the header element by setting a fixed height, background color, and a high z-index, possibly indicating it's a top-layer element.
9. .logo img: Selects images within elements with the class "logo" and sets a specific width for them.
10. header nav: Styles navigation elements within the header, making them flex containers and adjusting their alignment and padding.
11. .hamburger and .bar: These styles appear to be for a navigation menu toggle (hamburger menu) where the "bar" elements represent the lines of the hamburger icon.
12. header ul: Styles unordered lists within the header, configuring their alignment and spacing.
13. header ul li a: Styles anchor links within list items in the header, setting font size, color, and hover effects.
14. #navigation-menu: This is an ID selector for an element with the ID "navigation-menu" and styles it as a fixed navigation menu.
15. Media Query: This media query applies styles for screens with a maximum width of 768px. It reconfigures the header's appearance, making it a fixed, slide-in menu with adjustments to spacing and font colors. It also styles the hamburger icon's animation.
16. Various class selectors: These selectors style elements with specific classes, including forms, buttons, pop-up dialogs, images, and more. They define dimensions, colors, and positioning for these elements.
17. .footer and related styles: These styles are for the website's footer, configuring its layout, columns, and the appearance of buttons and links.
18. Media Query for Responsive Images: This media query adjusts the sizes of images for smaller screens.
This will give our hotel website an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200;300;400;500;600;700;800;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: 90%;
margin: auto;
order: 1;
}
.head_container {
max-width: 90%;
margin: auto;
}
header {
height: 14vh;
background-color: white;
z-index:1000
}
.logo img {
width: 120px;
}
header nav {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20px;
}
.hamburger {
display: none;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background-color: black;
}
header ul {
display: flex;
justify-content: space-between;
align-items: center;
}
header ul li {
margin-left: 3rem;
}
header ul li a {
font-size: 1.2rem;
font-weight: 400;
color: black;
transition: 0.5s;
}
header ul li a:hover {
color: #C1B086;
}
#navigation-menu {
position: fixed;
top: 0;
width: 100%;
}
@media only screen and (max-width: 768px) {
header ul {
display: block;
position: fixed;
left: -100%;
top: 7rem;
flex-direction: column;
background-color: #fff;
width: 100%;
border-radius: 10px;
text-align: center;
transition: 0.5s;
box-shadow: 0 10px 27px #000;
z-index: 20;
}
header ul.active {
left: 0%;
}
header ul li {
margin: 2.5rem 0;
}
header ul li a {
color: black;
}
.hamburger {
display: block;
cursor: pointer;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}
.location-ask {
margin: 130px 3%;
}
.where-to {
font-weight: bold;
}
.required {
font-weight: lighter;
}
.location {
width: 840.53px;
height: 43.2px;
}
input{
height: 30px;
border-color: #E6E6E6;
}
.booking{
display: inline-block;
}
.btn find-hotel {
color: white;
background-color: black;
}
.btn{
backface-visibility: hidden;
background-color: #fff;
border-radius: 8px;
box-sizing: border-box;
color: black;
cursor: pointer;
font-size: 90%;
height: 44px;
margin: 12px 0 0;
outline: none;
overflow: hidden;
padding: 0 10px;
width: 19vh;
}
.date-popup {
width: 700px;
height: 550px;
background: #fff;
border-style: solid;
border-radius: 6px;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%) scale(0.1);
text-align: center;
padding: 0 30px 30px;
color: #333;
visibility: hidden;
transition: transform 0.4s, top 0.4s;
}
.date-open-popup {
visibility: visible;
top: 55%;
transform: translate(-50%, -50%) scale(1);
}
.date-popup h2{
font-size: 18px;
font-weight: 500;
margin: 30px 0 10px;
}
.date-popup button {
width: 100%;
margin-top: 50px;
padding: 10px 0;
background: #6fd649;
color: #fff;
border: 0;
outline: none;
font-size: 18px;
border-radius: 4px;
cursor: pointer;
}
.room-popup {
width: 400px;
background: #fff;
border-style: solid;
border-radius: 6px;
position: absolute;
margin-top: 30px;
top: 0;
left: 50%;
transform: translate(-50%, -50%) scale(0.1);
text-align: center;
padding: 0 30px 30px;
color: #333;
visibility: hidden;
transition: transform 0.4s, top 0.4s;
}
.room-open-popup {
visibility: visible;
top: 40%;
transform: translate(-50%, -50%) scale(1);
}
.room-popup h2{
font-size: 38px;
font-weight: 500;
margin: 30px 0 10px;
}
.room-popup button {
width: 100%;
margin-top: 50px;
padding: 10px 0;
background: #6fd649;
color: #fff;
border: 0;
outline: none;
font-size: 18px;
border-radius: 4px;
cursor: pointer;
}
.rates-popup {
width: 400px;
background: #fff;
border-style: solid;
border-radius: 6px;
position: absolute;
top: 0;
margin-top: 30px;
left: 50%;
transform: translate(-50%, -50%) scale(0.1);
text-align: center;
padding: 0 30px 30px;
color: #333;
visibility: hidden;
transition: transform 0.4s, top 0.4s;
}
.rates-open-popup {
visibility: visible;
top: 55%;
transform: translate(-50%, -50%) scale(1);
}
.rates-popup h2{
font-size: 38px;
font-weight: 500;
margin: 30px 0 10px;
}
.rates-popup button {
width: 100%;
margin-top: 50px;
padding: 10px 0;
background: #6fd649;
color: #fff;
border: 0;
outline: none;
font-size: 18px;
border-radius: 4px;
cursor: pointer;
}
.find-hotels {
background-color: #000;
color: #fff
}
.container-room {
display: flex;
flex-direction: column;
}
input[type="number"] {
height: 32px;
border-radius: 4px;
border: 1px solid #d8d8d8;
position: relative;
text-align: center;
font-size: 20px;
width: 80px;
outline: none;
background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20viewBox%3D%220%200%2050%2067%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20stroke-width%3D%222%22%3E%3Cline%20x1%3D%221%22%20x2%3D%2250%22%20y1%3D%2233.5%22%20y2%3D%2233.5%22%20stroke%3D%22%23D8D8D8%22%2F%3E%3Cpolyline%20transform%3D%22translate(25%2020)%20rotate(45)%20translate(-25%20-20)%22%20points%3D%2219%2026%2019%2014%2032%2014%22%20stroke%3D%22%23000%22%2F%3E%3Cpolyline%20transform%3D%22translate(25%2045)%20rotate(225)%20translate(-25%20-45)%22%20points%3D%2219%2052%2019%2039%2032%2039%22%20stroke%3D%22%23000%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
background-position: center right;
background-size: contain;
background-repeat: no-repeat;
caret-color: transparent;
}
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none !important;
opacity: 1 !important;
background: transparent !important;
border-width: 0px;
margin: 0;
border-left: 1px solid #d8d8d8;
height: 34px;
width: 23px;
cursor: pointer;
}
input[type=text], textarea {
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}
input[type=text]:focus, textarea:focus {
box-shadow: 0 0 5px rgb(15, 201, 253);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgb(15, 201, 253);
}
.special-rates-checkbox{
font-size: 0.9rem;
font-weight: bold;
line-height: 1.1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5em;
}
.hotel-front {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.hotel-front-container {
padding-top: 50px;
}
.welcome-text h2 {
padding-top: 30px;
text-align: center;
font-size:xx-large;
}
.welcome-text p {
color: #333;
padding-top: 10px;
text-align: center;
font-size: large;
}
.welcome-text button {
color: #fff;
background-color: #000;
display: block;
margin-left: auto;
margin-right: auto;
}
.subheading {
padding-top: 100px
}
.subheading h2 {
padding-top: 30px;
font-size:xx-large;
}
.subheading p {
color: #333;
padding-top: 10px;
font-size: large;
}
.destinations-images {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
padding-top: 30px;
max-width: 100%;
left: 0px;
right: 0px;
top: 0px;
}
.destinations-images img {
width: 21.5vw;
height: 60vh;
}
.country {
position: relative;
text-align: center;
color: white;
margin-right: 20px;
cursor: pointer;
}
.country img {
filter: brightness(80%);
}
.country-text {
font-size: 39px;
font-family: 'Bebas Neue', sans-serif;
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
transition: top 250ms;
}
.hover-country-text {
top: 50%;
}
.experience-images {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
padding-top: 30px;
left: 0px;
right: 0px;
top: 0px;
}
.experience-images img {
width: 29vw;
height: 39.5vh;
min-width: 100px;
}
.experience {
position: relative;
text-align: center;
color: white;
margin-right: 20px;
cursor: pointer;
}
.experience img {
filter: brightness(80%);
padding-top: 20px;
}
.experience-text {
font-size: 39px;
font-family: 'Bebas Neue', sans-serif;
position: absolute;
width: 100%;
top: 85%;
left: 50%;
transform: translate(-50%, -50%);
transition: top 250ms;
}
.hover-experience-text {
top: 55%;
}
.different-hotels {
padding-top: 120px;
display: flex;
align-items: center;
justify-content: center
}
.different-hotels img{
width: 49.243vw ;
height: 66.488vh;
}
.different-hotels div{
padding-left: 50px;
}
.different-hotels h2 {
font-size: 36px;
font-family: 'Bebas Neue', sans-serif;
}
.different-hotels p {
padding-top: 20px;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
padding-bottom: 30px;
}
.different-hotels button {
background-color: #000;
color: #fff;
text-decoration: underline;
}
.back-to-top {
padding-top: 80px;
text-align: center;
}
.back-to-top button{
background-color: #000;
color: #fff;
width: 15%;
}
.footer-line {
margin-top: 50px;
border: 0;
border-top: 1px solid #c9c7c7;
}
.footer {
width: 100%;
padding: 50px 5%;
background-color: #fff;
display: grid;
grid-template-columns: 8fr 3fr 3fr;
align-items: start;
}
.col-1 button {
border: 0;
background-color: #104C97;
color: #fff;
width: 162px;
}
.col-2 a{
display: block;
text-decoration: none;
font-size: 14px;
padding-top: 12px;
color: #686868;
}
.col-3 a{
display: block;
text-decoration: none;
font-size: 14px;
padding-top: 12px;
color: #686868;
}
.footer div h3 {
font-weight: 300;
margin-bottom: 30px;
}
.social-icons {
margin-top: 30px;
}
.social-icons i{
font-size: 22px;
margin: 10px;
cursor: pointer;
}
@media (max-width: 1208px) {
.destinations-images img{
width: 404.59px;
height: 539.45px;
}
.experience-images img {
width: 404.59px;
height: 269.72;
}
.different-hotels {
display: block;
}
.different-hotels img{
width: 100%;
height: auto;
}
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript. Let's break down what it does step by step:
1. It starts by selecting DOM elements using document.querySelector and document.querySelectorAll based on their CSS class names and IDs.
2. It sets up event listeners for certain elements, such as a hamburger menu button (presumably for a mobile menu) and navigation links. These event listeners trigger functions when specific events occur (e.g., a click event).
3. There are several functions defined in the code:
- mobileMenu: This function toggles the "active" class on the hamburger menu and the navigation menu, presumably to show/hide the mobile menu.
- closeMenu: This function is intended to close the mobile menu by removing the "active" class from the hamburger menu and toggling it on the navigation menu.
- dateOpenPopup, dateClosePopup, roomOpenPopup, roomClosePopup, ratesOpenPopup, and ratesClosePopup are functions that add or remove specific CSS classes to show/hide popup elements.
- topFunction scrolls the document back to the top when called.
4. It creates a date picker using an external library called easepick and sets various options for its behavior, like specifying the element it should attach to and its appearance.
5. There are multiple event listeners set up for different DOM elements like "italyDiv," "portugalDiv," etc. These listeners add or remove CSS classes to change the appearance of associated text elements when the mouse enters or leaves the respective div elements.
Create a JavaScript file with the name script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');
hamburger.addEventListener("click", mobileMenu);
function mobileMenu() {
hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
}
const navLink = document.querySelectorAll('.nav-link');
navLink.forEach((n) => n.addEventListener("click", closeMenu));
function closeMenu() {
hamburger.classList.remove("active");
navMenu.classList.toggle("active");
}
let datePopup = document.getElementById("date-popup");
let roomPopup = document.getElementById("room-popup");
let ratesPopup = document.getElementById("rates-popup");
function dateOpenPopup() {
datePopup.classList.add("date-open-popup");
}
function dateClosePopup() {
datePopup.classList.remove("date-open-popup");
}
function roomOpenPopup() {
roomPopup.classList.add("room-open-popup");
}
function roomClosePopup() {
roomPopup.classList.remove("room-open-popup");
}
function ratesOpenPopup() {
ratesPopup.classList.add("rates-open-popup");
}
function ratesClosePopup() {
ratesPopup.classList.remove("rates-open-popup");
}
const picker = new easepick.create({
element: "#datepicker",
css: [
"https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.css"
],
zIndex: 10,
grid: 2,
calendars: 2,
inline: true,
plugins: [
"RangePlugin"
]
})
let italyDiv = document.getElementById("italy-div");
let italyText = document.getElementById("italy-text");
italyDiv.addEventListener('mouseenter', () => italyText.classList.add("hover-country-text"));
italyDiv.addEventListener('mouseleave', () => italyText.classList.remove("hover-country-text"));
let portugalDiv = document.getElementById("portugal-div");
let portugalText = document.getElementById("portugal-text");
portugalDiv.addEventListener('mouseenter', () => portugalText.classList.add("hover-country-text"));
portugalDiv.addEventListener('mouseleave', () => portugalText.classList.remove("hover-country-text"));
let japanDiv = document.getElementById("japan-div");
let japanText = document.getElementById("japan-text");
japanDiv.addEventListener('mouseenter', () => japanText.classList.add("hover-country-text"));
japanDiv.addEventListener('mouseleave', () => japanText.classList.remove("hover-country-text"));
let egyptDiv = document.getElementById("egypt-div");
let egyptText = document.getElementById("egypt-text");
egyptDiv.addEventListener('mouseenter', () => egyptText.classList.add("hover-country-text"));
egyptDiv.addEventListener('mouseleave', () => egyptText.classList.remove("hover-country-text"));
let discountDiv = document.getElementById("discount-div");
let discountText = document.getElementById("discount-text");
discountDiv.addEventListener('mouseenter', () => discountText.classList.add("hover-experience-text"));
discountDiv.addEventListener('mouseleave', () => discountText.classList.remove("hover-experience-text"));
let pointsDiv = document.getElementById("points-div");
let pointsText = document.getElementById("points-text");
pointsDiv.addEventListener('mouseenter', () => pointsText.classList.add("hover-experience-text"));
pointsDiv.addEventListener('mouseleave', () => pointsText.classList.remove("hover-experience-text"));
let parkingDiv = document.getElementById("parking-div");
let parkingText = document.getElementById("parking-text");
parkingDiv.addEventListener('mouseenter', () => parkingText.classList.add("hover-experience-text"));
parkingDiv.addEventListener('mouseleave', () => parkingText.classList.remove("hover-experience-text"));
let plangDiv = document.getElementById("plan-div");
let planText = document.getElementById("plan-text");
plangDiv.addEventListener('mouseenter', () => planText.classList.add("hover-experience-text"));
plangDiv.addEventListener('mouseleave', () => planText.classList.remove("hover-experience-text"));
let firstTimeDiv = document.getElementById("first-time-div");
let firstTimeText = document.getElementById("first-time-text");
firstTimeDiv.addEventListener('mouseenter', () => firstTimeText.classList.add("hover-experience-text"));
firstTimeDiv.addEventListener('mouseleave', () => firstTimeText.classList.remove("hover-experience-text"));
let membersDiv = document.getElementById("members-div");
let membersText = document.getElementById("members-text");
membersDiv.addEventListener('mouseenter', () => membersText.classList.add("hover-experience-text"));
membersDiv.addEventListener('mouseleave', () => membersText.classList.remove("hover-experience-text"));
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}Final Output:
Conclusion:
In the fast-paced world of online hospitality, a well-crafted hotel booking website can be your key to success. Throughout this guide, we've explored the essential elements that make a website stand out in the competitive market. From the foundational aspects of HTML, CSS, and JavaScript to the intricacies of a seamless booking system, and responsive design – we've covered it all.
By now, you should have a clear vision of how to create a user-friendly hotel booking website that not only attracts visitors but also converts them into satisfied guests. Remember, a visually appealing and intuitive website is your digital storefront, and it plays a pivotal role in shaping the perception of your brand.
As you move forward on your journey to establish a strong online presence for your hotel or accommodation business, keep these principles in mind. Continuously strive for improvement, listen to your customers, and adapt to emerging technologies. The world of web development is ever-evolving, and staying ahead of the curve will set you apart from the competition.
We hope this guide has been a valuable resource in your quest to create a top-tier hotel booking website. Implement these strategies, monitor your performance, and don't hesitate to seek further expertise when needed. Your success in the hospitality industry awaits – now go out there and make your mark!
Code by: MichaelZhou334
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
