Learn how to create a responsive hotel landing page using HTML, CSS and JavaScript to attract more bookings and improve user experience.
Table of Contents
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.
Join My Telegram Channel to Download the Project: Click Here
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.
After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.
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. We will also add some padding and margin properties to ensure that everything looks correct.
This will give our hotel landing page 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/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.
Create a JavaScript file with the name of 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.
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:
Conclusion:
In conclusion, a responsive hotel landing page can greatly improve your hotel's online presence and increase bookings. By following the steps outlined in this guide, you'll be able to create a user-friendly and engaging website that attracts more guests to your hotel.
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 😊
