Responsive Hotel Landing Page with HTML, CSS, and JavaScript

Faraz

By Faraz - Last Updated:

Learn how to create a responsive hotel landing page using HTML, CSS and JavaScript to attract more bookings and improve user experience.

Join us on Telegram
how to create a responsive hotel landing page with html, css and javascript that will attract more bookings.png
Read Alsocreate a tailwind login page responsive design.jpgCreate a Tailwind Login Page | Responsive Design

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

If you are looking for a new way to attract more visitors to your hotel, consider creating an attractive, responsive website that will automatically adapt to the screen size of any device. With the help of HTML, CSS, and JavaScript, you can create dynamic landing pages for your hotel that will be able to reach out to potential guests on any platform- from smartphones and tablets, to desktop computers and more.

In this tutorial, we'll talk about how you can use HTML, CSS, and JavaScript to create a responsive hotel landing page that will attract more bookings.

Let's start making an amazing hotel landing page using HTML, CSS, and JavaScript step by step.

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

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 landing page. Lets break down the HTML code:

1. HTML Structure Overview

The page consists of:

  1. A header section (though not explicitly defined here).
  2. A main section displaying hotel rooms with images, names, and details.
  3. A custom cursor effect to enhance user interaction.

2. Head Section (<head>)

<head>
  <title>Responsive Hotel Landing Page</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
  <link rel="stylesheet" href="styles.css" />
</head>
  • Title: Sets the webpage title.
  • Meta Charset: Defines the character encoding as UTF-8.
  • Meta Viewport: Makes the site responsive to different screen sizes.
  • Bootstrap CSS: Includes Bootstrap for styling and responsiveness.
  • Custom CSS (styles.css): Loads additional styling.

3. Body Section (<body>)

<div class="section">
  <div class="moving-image"></div>
  <div class="shadow-title">apartment maria</div>
  • .section: A wrapper for the main content.
  • .moving-image: Likely a background image or animation.
  • .shadow-title: Displays "apartment maria" as a title.

4. Navigation for Hotel Suites

<ul class="case-study-wrapper">
  <li class="case-study-name">                            
    <a href="#" class="hover-target">tanya</a>
  </li>
  <li class="case-study-name">                                         
    <a href="#" class="hover-target">helen</a>
  </li>
  <li class="case-study-name">                                        
    <a href="#" class="hover-target">andrea</a>
  </li>
  <li class="case-study-name">                                         
    <a href="#" class="hover-target">diana</a>
  </li>
</ul>
  • This unordered list (<ul>) contains links for different hotel suites.
  • Each suite name (e.g., "Tanya", "Helen", "Andrea", "Diana") is a clickable link.

5. Hotel Suite Details

<ul class="case-study-images">
  <li>
    <img src="https://ivang-design.com/svg-load/hotel/room1.jpg" alt="">          
    <p>suite tanya</p>
    <div class="info">
      <img src="https://ivang-design.com/svg-load/hotel/1.svg" alt="">   
      <img src="https://ivang-design.com/svg-load/hotel/2.svg" alt=""> 
      <img src="https://ivang-design.com/svg-load/hotel/3.svg" alt=""> 
      <img src="https://ivang-design.com/svg-load/hotel/5.svg" alt=""> 
      <a href="#" class="hover-target">full info</a>
    </div>
  </li>
</ul>
  • Each suite (<li>) has:
    • A hotel room image (<img>).
    • A suite name (<p>).
    • A div (.info) containing:
    • Icons representing room features (e.g., Wi-Fi, TV, pool).
    • A "Full Info" button (<a href="#">).
  • The same structure is repeated for four different suites.

6. Custom Cursor

<div class='cursor' id="cursor"></div>
<div class='cursor2' id="cursor2"></div>
<div class='cursor3' id="cursor3"></div>
  • These <div> elements create custom cursor effects, controlled by JavaScript.

7. Scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
  • jQuery: A JavaScript library for DOM manipulation and animations.
  • script.js: Custom JavaScript (not provided) that:
    • Controls cursor animations.
    • Enhances interactions (e.g., image hover effects).
Read AlsoBuild Your Own Nixie Tube Clock using HTML, CSS, and JavaScript.webpBuild Your Own Nixie Tube Clock using HTML, CSS, and JavaScript (Source Code)

Step 2 (CSS Code):

Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our hotel landing page. Below is a breakdown of its key elements:

1. Importing Google Fonts

@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=cyrillic,cyrillic-ext,devanagari,greek,greek-ext,latin-ext,vietnamese');
  • Loads the Poppins and Roboto fonts with different weights.
  • Supports multiple language subsets like Cyrillic, Greek, Devanagari, etc.

2. Body Styling

body {
    width: 100%;
    height: 100vh;
    background: #1f2029;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
}
  • Sets full-screen width and height (100vh).
  • Uses a dark background color (#1f2029).
  • Prevents scrolling with overflow: hidden;.
  • Sets the default font to Poppins.

3. Custom Cursor Effects

The code defines three cursor styles: .cursor, .cursor2, and .cursor3.

a) General Cursor Styling

.cursor, .cursor2, .cursor3 {
    position: fixed;
    border-radius: 50%;
    transform: translateX(-50%) translateY(-50%);
    pointer-events: none;
    left: -100px;
    top: 50%;
    mix-blend-mode: difference;
    transition: all 300ms linear;
}
  • Cursors are fixed in position and always circular (border-radius: 50%).
  • mix-blend-mode: difference; allows them to appear dynamically based on background contrast.

b) Primary Cursor

.cursor {
    background-color: #fff;
    height: 0;
    width: 0;
    z-index: 99999;
}
  • White cursor with no initial size (height: 0; width: 0;).

c) Secondary Cursors

.cursor2, .cursor3 {
    height: 36px;
    width: 36px;
    z-index: 99998;
    transition: all 0.3s ease-out;
}
  • Secondary cursors are 36px in size and have smooth transitions.

d) Hover Effect

.cursor2.hover, .cursor3.hover {
    transform: scale(2) translateX(-25%) translateY(-25%);
    border: none;
}
  • Expands cursors twice their size (scale(2)) on hover.

e) Cursor Outline

.cursor2 {
    border: 2px solid #fff;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}
  • .cursor2 is outlined with white and has a glow effect.
.cursor2.hover {
    background: rgba(255,255,255,1);
    box-shadow: 0 0 0 rgba(255, 255, 255, 0.2);
}
  • When hovering, .cursor2 becomes solid white.

4. Section Layout

.section {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    height: 100vh;
}
  • Ensures each section takes full screen height (100vh).
  • overflow: hidden; prevents unnecessary scrolling.

5. Shadow Title

.shadow-title {
    position: fixed;
    bottom: 20px;
    right: 20px;
    text-align: right;
    font-size: 20px;
    line-height: 1;
    color: #ccc;
    font-weight: 700;
    letter-spacing: 1px;
    z-index: 2;
    opacity: 0.5;
}
  • Places a fixed title at the bottom right.
  • Uses light gray (#ccc) with 50% opacity for a faded effect.

6. Moving Background Image

.moving-image {
    background: url('https://ivang-design.com/svg-load/hotel/[email protected]') repeat fixed;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    opacity: 0.4;
}
  • Full-screen background image with a scrolling effect (repeat fixed).
  • 40% transparency (opacity: 0.4;).

7. Case Study Sidebar Navigation

This section controls vertical navigation links on the left.

a) Wrapper

.case-study-wrapper {
    position: absolute;
    top: 50%;
    left: 20px;
    z-index: 10;
    transform: translateY(-50%);
    list-style: none;
}
  • Positions the navigation menu in the middle left.

b) Links Styling

.case-study-wrapper .case-study-name a {
    position: relative;
    display: inline-block;
    font-size: 17px;
    font-weight: 700;
    color: rgba(255,255,255,.3);
    writing-mode: vertical-lr;
    transition: all 300ms linear;
    text-decoration: none;
}
  • Vertical text (writing-mode: vertical-lr;).
  • White with 30% transparency (rgba(255,255,255,.3)).

c) Active Link

.case-study-wrapper .case-study-name.active a {
    color: #fff;
}
  • The active link appears fully white.

d) Colored Indicators

.case-study-wrapper .case-study-name:nth-child(2) a:before {
    background: linear-gradient(45deg, #0947db, #07d89d);
}
  • Each link has a color gradient indicator.

8. Case Study Images

This section displays images for each case study.

a) Image Container

.case-study-images {
    position: absolute;
    top: 50%;
    left: 70px;
    width: calc(100% - 90px);
    max-width: 500px;
    transform: translateY(-50%);
}
  • Centers images vertically (top: 50%).
  • Limits width (max-width: 500px).

b) Hidden by Default

.case-study-images li {
    position: absolute;
    opacity: 0;
    transition: all 300ms linear;
}
  • Images are initially hidden (opacity: 0;).

c) Show Active Image

.case-study-images li.show {
    opacity: 1;
}
  • Active image is fully visible (opacity: 1;).

d) Image Title

.case-study-images li p {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 13px;
    color: #fff;
    background-color: rgba(0,0,0,.8);
    border-radius: 3px;
}
  • Titles are small, white, and have a dark background.
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=cyrillic,cyrillic-ext,devanagari,greek,greek-ext,latin-ext,vietnamese');

body{
	width: 100%;
	height: 100vh;
	background: #1f2029;
	overflow: hidden;
	font-family: 'Poppins', sans-serif;
}

/* #Cursor
================================================== */
.cursor,
.cursor2,
.cursor3{
	position: fixed;
	border-radius: 50%;	
	transform: translateX(-50%) translateY(-50%);
	pointer-events: none;
	left: -100px;
	top: 50%;
	mix-blend-mode: difference;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.cursor{
	background-color: #fff;
	height: 0;
	width: 0;
	z-index: 99999;
}
.cursor2,.cursor3{
	height: 36px;
	width: 36px;
	z-index:99998;
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out
}
.cursor2.hover,
.cursor3.hover{
	-webkit-transform:scale(2) translateX(-25%) translateY(-25%);
	transform:scale(2) translateX(-25%) translateY(-25%);
	border:none
}
.cursor2{
	border: 2px solid #fff;
	box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}
.cursor2.hover{
	background: rgba(255,255,255,1);
	box-shadow: 0 0 0 rgba(255, 255, 255, 0.2);
}

.section{
	position: relative;
	width: 100%;
	display: block;
	overflow: hidden;
	height: 100vh;
}
 .shadow-title{
	position: fixed;
	bottom: 20px;
	right: 20px;
	text-align: right;
	font-size: 20px;
	line-height: 1;
	color: #ccc;
	font-weight: 700;
   letter-spacing: 1px;
	z-index: 2;
  opacity: 0.5;
}

.moving-image {
	background: url('https://ivang-design.com/svg-load/hotel/[email protected]') repeat fixed;
	background-size: cover;
	position: absolute;
	top: 0; 
	left: 0; 
	right: 0;
	bottom: 0;
	z-index: 1;
	width:100%;
	opacity: 0.4;
}
.case-study-wrapper {
	position: absolute;
	top: 50%;
	left: 20px;
	z-index: 10;
	width: auto;
	margin: 0;
	padding: 0;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	list-style: none;
}
.case-study-wrapper .case-study-name {
	margin: 0;
	padding: 0;
}
.case-study-wrapper .case-study-name a {
	position: relative;
	list-style: none;
	margin: 0 auto;
	display: inline-block;
	text-align: center;
	padding: 0;
	margin-top: 6px;
	margin-bottom: 6px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 1px;
	color: rgba(255,255,255,.3);
	-webkit-writing-mode: vertical-lr;
	writing-mode: vertical-lr;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
	text-decoration: none;
}	
.case-study-wrapper .case-study-name a:hover {
	text-decoration: none;
}	
.case-study-wrapper .case-study-name.active a {
	color: #fff;
}
.case-study-wrapper .case-study-name a:before {
	position: absolute;
	content: '';
	left: -5px;
	top: 50%;
	height: 0;
	width: 4px;
	transform: translateY(-50%);
	background: linear-gradient(45deg, #f19872, #e86c9a);
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear; 
}	
.case-study-wrapper .case-study-name:nth-child(2) a:before {
	background: linear-gradient(45deg, #0947db, #07d89d);
}
.case-study-wrapper .case-study-name:nth-child(3) a:before {
	background: linear-gradient(45deg, #ee2d29, #f8ae2c);
}
.case-study-wrapper .case-study-name:nth-child(4) a:before {
	background: linear-gradient(45deg, #3a3d98, #6f22b9);
}
.case-study-wrapper .case-study-name.active a:before {
	height: 100%;
}

.case-study-images {
	position: absolute;
	top: 50%;
	left: 70px;
	width: calc(100% - 90px);
	max-width: 500px;
	margin:0;
	padding: 0;
	z-index:5;
	list-style: none;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}	
.case-study-images li {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	margin:0;
	padding: 0;
	list-style: none;
	opacity: 0;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 0 30px rgba(14,14,14,.35);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.case-study-images li.show {
	opacity: 1;
} 
.case-study-images li img {
	width: 100%;
	height: auto;
	display: block;
}
.case-study-images li p {
	position: absolute;
	top: 20px;
	left: 20px; 
	text-align: left;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 1px;
	color: #fff;
	font-weight: 300;
	margin: 0;
	padding: 5px 10px;
	background-color: rgba(0,0,0,.8);
	border-radius: 3px;
	display: inline-block;
}
.case-study-images li .info {
	position: relative; 
	padding: 12px 20px;
	background-color: rgba(0,0,0,.5);
	display: block;
}
.case-study-images li .info img {
	width: 20px;
	height: 20px;
	display: inline-block;
	margin-right: 10px;
}
.case-study-images li .info a {
	background-color: #000;
	font-size: 11px;
	text-transform: uppercase;
	line-height: 28px;
	letter-spacing: 2px;
	color: #fff;
	font-weight: 300;
	position: absolute;
	right: 20px;
	top: 10px;
	height: 28px;
	padding: 0 20px;
	border-radius: 3px;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.case-study-images li .info a:hover {
	text-decoration: none;
}

Step 3 (JavaScript Code):

Finally, we will create the JavaScript file that will power our landing page. This file will add some additional functionality to our hotel landing page. Here's a breakdown of what each section does:

1. Custom Cursor Effects

Tracking Mouse Movement

document.getElementsByTagName("body")[0].addEventListener("mousemove", function(n) {
    t.style.left = n.clientX + "px", 
    t.style.top = n.clientY + "px", 
    e.style.left = n.clientX + "px", 
    e.style.top = n.clientY + "px", 
    i.style.left = n.clientX + "px", 
    i.style.top = n.clientY + "px"
});
  • This moves three custom cursor elements (cursor, cursor2, and cursor3) based on the user's mouse position (n.clientX, n.clientY).
  • These elements must exist in the HTML (#cursor, #cursor2, #cursor3).

Cursor Hover Effects

var t = document.getElementById("cursor"),
    e = document.getElementById("cursor2"),
    i = document.getElementById("cursor3");

function n(t) {
    e.classList.add("hover"), i.classList.add("hover")
}

function s(t) {
    e.classList.remove("hover"), i.classList.remove("hover")
}
s();
  • cursor2 and cursor3 get a .hover class when hovering over certain elements.
  • s() ensures they don't have .hover by default.

Applying Hover Effects to Elements

for (var r = document.querySelectorAll(".hover-target"), a = r.length - 1; a >= 0; a--) {
    o(r[a])
}
function o(t) {
    t.addEventListener("mouseover", n), t.addEventListener("mouseout", s)
}
  • It selects all elements with the class .hover-target and adds hover event listeners.
  • When hovered, cursor2 and cursor3 get the .hover class.
  • When the mouse leaves, the class is removed.

2. Moving Background Effect

var pos = 0;
window.setInterval(function(){
    pos++;
    document.getElementsByClassName('moving-image')[0].style.backgroundPosition = pos + "px 0px";
}, 18);
  • Moves the background of the first element with the class .moving-image.
  • Updates the horizontal position (pos + "px 0px") every 18 milliseconds, creating a smooth scrolling effect.

3. Case Study Hover Effects

$(document).ready(function() {
    $('.case-study-name:nth-child(1)').on('mouseenter', function() {
        $('.case-study-name.active').removeClass('active');
        $('.case-study-images li.show').removeClass("show");
        $('.case-study-images li:nth-child(1)').addClass("show");
        $('.case-study-name:nth-child(1)').addClass('active');
    })
    $('.case-study-name:nth-child(2)').on('mouseenter', function() {
        $('.case-study-name.active').removeClass('active');
        $('.case-study-images li.show').removeClass("show");
        $('.case-study-images li:nth-child(2)').addClass("show");
        $('.case-study-name:nth-child(2)').addClass('active');
    })
    $('.case-study-name:nth-child(3)').on('mouseenter', function() {
        $('.case-study-name.active').removeClass('active');
        $('.case-study-images li.show').removeClass("show");
        $('.case-study-images li:nth-child(3)').addClass("show");
        $('.case-study-name:nth-child(3)').addClass('active');
    })
    $('.case-study-name:nth-child(4)').on('mouseenter', function() {
        $('.case-study-name.active').removeClass('active');
        $('.case-study-images li.show').removeClass("show");
        $('.case-study-images li:nth-child(4)').addClass("show");
        $('.case-study-name:nth-child(4)').addClass('active');
    })
    $('.case-study-name:nth-child(1)').trigger('mouseenter')
});
  • Uses jQuery to handle hover events on .case-study-name elements.
  • When a user hovers over a .case-study-name, it:
    • Removes the active class from any previously active .case-study-name.
    • Removes the show class from any .case-study-images li.
    • Adds show to the corresponding .case-study-images li.
    • Adds active to the hovered .case-study-name.
  • The last line ($('.case-study-name:nth-child(1)').trigger('mouseenter')) ensures the first case study is active by default.

Created by: Ivan Grozdic

(function($) { "use strict";
		
	//Page cursors

    document.getElementsByTagName("body")[0].addEventListener("mousemove", function(n) {
        t.style.left = n.clientX + "px", 
		t.style.top = n.clientY + "px", 
		e.style.left = n.clientX + "px", 
		e.style.top = n.clientY + "px", 
		i.style.left = n.clientX + "px", 
		i.style.top = n.clientY + "px"
    });
    var t = document.getElementById("cursor"),
        e = document.getElementById("cursor2"),
        i = document.getElementById("cursor3");
    function n(t) {
        e.classList.add("hover"), i.classList.add("hover")
    }
    function s(t) {
        e.classList.remove("hover"), i.classList.remove("hover")
    }
    s();
    for (var r = document.querySelectorAll(".hover-target"), a = r.length - 1; a >= 0; a--) {
        o(r[a])
    }
    function o(t) {
        t.addEventListener("mouseover", n), t.addEventListener("mouseout", s)
    }
	
	var pos = 0;
			window.setInterval(function(){
				pos++;
				document.getElementsByClassName('moving-image')[0].style.backgroundPosition = pos + "px 0px";
			}, 18
		);
	
	$(document).ready(function() {			
		
		$('.case-study-name:nth-child(1)').on('mouseenter', function() {
			$('.case-study-name.active').removeClass('active');
			$('.case-study-images li.show').removeClass("show");
			$('.case-study-images li:nth-child(1)').addClass("show");
			$('.case-study-name:nth-child(1)').addClass('active');
		})
		$('.case-study-name:nth-child(2)').on('mouseenter', function() {
			$('.case-study-name.active').removeClass('active');
			$('.case-study-images li.show').removeClass("show");
			$('.case-study-images li:nth-child(2)').addClass("show");
			$('.case-study-name:nth-child(2)').addClass('active');
		})
		$('.case-study-name:nth-child(3)').on('mouseenter', function() {
			$('.case-study-name.active').removeClass('active');
			$('.case-study-images li.show').removeClass("show");
			$('.case-study-images li:nth-child(3)').addClass("show");
			$('.case-study-name:nth-child(3)').addClass('active');
		})
		$('.case-study-name:nth-child(4)').on('mouseenter', function() {
			$('.case-study-name.active').removeClass('active');
			$('.case-study-images li.show').removeClass("show");
			$('.case-study-images li:nth-child(4)').addClass("show");
			$('.case-study-name:nth-child(4)').addClass('active');
		})
		$('.case-study-name:nth-child(1)').trigger('mouseenter')
					
	});
	
	
  })(jQuery);

Final Output:

how to create a responsive hotel landing page with html, css and javascript that will attract more bookings.gif
Read Alsohow to create a responsive navbar with hamburger menu using html, css and javascript.pngHow to Create a Responsive Navbar with Hamburger Menu Using HTML, CSS and JavaScript

Conclusion:

A well-designed responsive hotel landing page can significantly boost bookings by providing a seamless user experience. With HTML, CSS, and JavaScript, you can create an attractive, mobile-friendly website that engages visitors and encourages direct reservations.

By optimizing the design, adding clear call-to-action buttons, and ensuring fast load times, your hotel website will stand out from the competition. Start building your hotel landing page today and enhance your online presence!

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 😊

Tags: responsive, hotel, landing page, bookings, html, css, javascript, hotel website, user experience, mobile-friendly, ui design, navigation menu, hotel landing page, restaurant landing page
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺