Hello friends, today in this blog, we will learn how to create a Stunning Tourist Agency Landing Page with HTML and CSS. In our previous blog, we saw how to create a toast alert dark design in HTML & CSS. You can check my other javascript projects after reading this blog.
A well-designed landing page is critical for tourist agencies looking to attract and convert potential customers. As a standalone webpage, a landing page is optimized to prompt visitors to take a specific action, such as booking a tour or contacting your agency. By creating an optimized landing page with compelling design and content, you can improve your online presence and drive more bookings for your business.
If you're new to designing landing pages, this step-by-step guide will help you create an effective landing page for your tourist agency using HTML and CSS. This guide offers a comprehensive approach to building a visually appealing and engaging landing page that targets the keyword "landing page" for SEO purposes.
In this guide, we'll cover everything from planning your landing page design to optimizing it for search engines, including keyword research and on-page optimization. By the end of this guide, you'll be equipped with the knowledge and skills to create a high-converting landing page that ranks well on search engines for the keyword "landing page". So let's dive in and get started on crafting a landing page that enhances your business's online visibility and drives more bookings.
About this project [Stunning Tourist Agency Landing Page]
1. Navigation Bar
As part of our project to create an effective tourist agency landing page using HTML and CSS, we have implemented a responsive navigation bar (navbar) at the top of the page. The navbar includes a logo on the left side and links on the right side, as shown in the image above. On smaller devices, the links are hidden, and a menu toggle button appears in their place. When clicked, the menu slides out from the top left corner and closes in the top right corner.
A well-designed navbar is critical for creating a high-converting landing page. It provides visitors with easy access to your website's content and helps them navigate your site efficiently. By making the navbar responsive, you ensure that it works well on all devices, which improves the user experience and increases the chances of converting visitors into customers. Additionally, by incorporating a menu toggle button on mobile devices, you make it easy for visitors to access the links they need, which can improve the mobile user experience and increase the time visitors spend on your landing page.
In summary, a responsive and well-designed navbar is essential for creating a successful landing page that targets the keyword "landing page" for SEO purposes. With this guide, you will learn how to create a stunning tourist agency landing page that includes a responsive navbar and other essential features. By following our step-by-step approach, you can create a landing page that enhances your business's online visibility and drives more bookings.
2. Hero Section
The hero section of our tourist agency landing page plays a crucial role in capturing visitors' attention and encouraging them to explore the site further. By incorporating an image of mountains with stars in the sky as the background for this section, we create a sense of adventure and excitement that resonates with our target audience. The inclusion of a bold heading that reads "Switzerland Has Never Been So Affordable" is also an effective way to appeal to travelers seeking budget-friendly vacation options.
To further encourage engagement, we have included a brief description of the agency's services, along with a clear call-to-action button inviting visitors to explore the agency's offerings. This combination of persuasive copy and clear calls-to-action is designed to drive conversions and bookings. By using HTML and CSS to build a responsive and visually appealing landing page, you can enhance your business's online presence and attract more potential customers. An effective landing page is an essential component of any SEO strategy, and by following the steps outlined in this guide, you can create a stunning landing page that ranks well in search results and drives traffic to your site.
3. Top Programs Section
To further enhance our tourist agency landing page, we've added a card element to showcase the agency's diverse range of services. This feature is an effective way to highlight the agency's offerings, providing visitors with a quick glimpse of what they can expect from the agency's programs and services.
Continuing down the page, the 'Top Programs' section features a bold title and a series of engaging images to attract visitors' attention. The section serves as an opportunity to optimize the landing page for search engines by including relevant alt tags and descriptions for the images. This optimization helps improve the page's overall SEO and increases the likelihood of the landing page ranking higher in search engine results.
By incorporating a visually attractive design and clear calls-to-action throughout the landing page, we've created a user-friendly layout that encourages visitors to engage with the agency's offerings. With the use of HTML and CSS, you can optimize your landing page to rank higher in search engine results, attract potential customers, and drive conversions for your tourism business.
4. Customer Reviews Section
To optimize our tourist agency's Landing page and increase its visibility to potential customers, we have included a customer review section. This section provides social proof that can help establish trust and credibility with visitors, ultimately driving higher conversion rates.
Located prominently on the Landing page, the customer review section features a large title and individual customer images with their corresponding reviews. By incorporating relevant keywords and phrases used in the reviews, we can improve the page's SEO and increase its ranking in search engine results.
The slider feature used in the customer review section also improves the page's engagement metrics by allowing users to easily navigate through the reviews. Longer on-page times can lead to better SEO and increased visibility to potential customers, which is crucial for the success of any Landing page.
Moreover, including a customer review section on the Landing page can provide valuable feedback for the agency and help identify areas for improvement. This can lead to a better user experience and ultimately drive higher conversion rates and revenue for the tourist agency.
If you find it challenging to understand the concepts discussed in this guide, feel free to examine the source code and preview it for additional assistance. These resources are intended to help you clarify any doubts and understand the content better.
Note:
You can check live demo and download code files from here.
Full View of the Project:
Code of HTML, CSS, and JavaScript Files
Here's the good news: you don't have to write all the code of this project from scratch! I have created a GitHub repository that contains all the HTML, CSS, and JavaScript code needed to build the app. You can check it out and use it as a starting point for your own project.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<!-- -------------------------- Created By InCoder -------------------------- -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>
Tour & Travels - InCoder
</title>
<link href="main.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
</meta>
</meta>
</head>
<body>
<div class="heroSection">
<div class="navbar">
<div class="logo">
InCoder
</div>
<div class="links">
<ul>
<a href="">
<li>
Home
</li>
</a>
<a href="">
<li>
Day Tours
</li>
</a>
<a href="">
<li>
Multi-Day Tours
</li>
</a>
<a href="">
<li>
Themes
</li>
</a>
</ul>
<button class="menuToggleBtn">
<i class="fa-solid fa-bars">
</i>
</button>
</div>
<div class="mobileMenu">
<button class="menuToggleBtn">
<i class="fa-solid fa-xmark">
</i>
</button>
<ul>
<a href="">
<li>
Home
</li>
</a>
<a href="">
<li>
Day Tours
</li>
</a>
<a href="">
<li>
Multi-Day Tours
</li>
</a>
<a href="">
<li>
Themes
</li>
</a>
</ul>
</div>
</div>
<h3 class="heroTitle">
Switzerland Has Never Been So Affordable
</h3>
<p>
Discover Switzerland. Choose the best programs, guides, hotels and restaurants.
</p>
<button class="exploreBtn">
Start to Explore
</button>
</div>
<div class="programsSection">
<div class="cards">
<div class="card">
<div class="heading">
<p>
Audio Guide
</p>
<i class="fa-solid fa-headphones">
</i>
</div>
<div class="desc">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio, perspiciatis.
</div>
<a href="#">
Select Guide
</a>
</div>
<div class="card">
<div class="heading">
<p>
Programs
</p>
<i class="fa-solid fa-headphones">
</i>
</div>
<div class="desc">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio, perspiciatis.
</div>
<a href="#">
Select Guide
</a>
</div>
<div class="card">
<div class="heading">
<p>
Hotels & Restaurants
</p>
<i class="fa-solid fa-hotel">
</i>
</div>
<div class="desc">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio, perspiciatis.
</div>
<a href="#">
Select Guide
</a>
</div>
</div>
<div class="topPrograms">
<div class="title">
Top Programs
</div>
<div class="desc">
Lorem, ipsum dolor sit amet consectetur adipisicing, elit. Veritatis quo est quam quibusdam libero quos assumenda perferendis autem, magnam quasi!
</div>
<div class="cardBox">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
<button class="moreBtn">Show More</button>
</div>
</div>
<div class="testimonials">
<h1>Emotions are the best you can get in this life</h1>
<p>Checkout the reviews of people who used our services.</p>
<div class="cardWrapper owl-carousel">
<div class="card">
<i class="fa-solid fa-quote-left"></i>
<img src="https://images.ctfassets.net/lh3zuq09vnm2/yBDals8aU8RWtb0xLnPkI/19b391bda8f43e16e64d40b55561e5cd/How_tracking_user_behavior_on_your_website_can_improve_customer_experience.png" alt="">
<div class="message">
Lorem, ipsum dolor sit amet consectetur adipisicing, elit. Laboriosam itaque fugiat, beatae ab veritatis iste quis. Fugit, cum officiis sit harum animi nihil neque, molestiae voluptate dignissimos ex ducimus quod quo nostrum minus. Odit, itaque laboriosam error distinctio voluptatum delectus.
</div>
</div>
<div class="card">
<i class="fa-solid fa-quote-left"></i>
<img src="https://images.ctfassets.net/lh3zuq09vnm2/yBDals8aU8RWtb0xLnPkI/19b391bda8f43e16e64d40b55561e5cd/How_tracking_user_behavior_on_your_website_can_improve_customer_experience.png" alt="">
<div class="message">
Lorem, ipsum dolor sit amet consectetur adipisicing, elit. Laboriosam itaque fugiat, beatae ab veritatis iste quis. Fugit, cum officiis sit harum animi nihil neque, molestiae voluptate dignissimos ex ducimus quod quo nostrum minus. Odit, itaque laboriosam error distinctio voluptatum delectus.
</div>
</div>
<div class="card">
<i class="fa-solid fa-quote-left"></i>
<img src="https://images.ctfassets.net/lh3zuq09vnm2/yBDals8aU8RWtb0xLnPkI/19b391bda8f43e16e64d40b55561e5cd/How_tracking_user_behavior_on_your_website_can_improve_customer_experience.png" alt="">
<div class="message">
Lorem, ipsum dolor sit amet consectetur adipisicing, elit. Laboriosam itaque fugiat, beatae ab veritatis iste quis. Fugit, cum officiis sit harum animi nihil neque, molestiae voluptate dignissimos ex ducimus quod quo nostrum minus. Odit, itaque laboriosam error distinctio voluptatum delectus.
</div>
</div>
<div class="card">
<i class="fa-solid fa-quote-left"></i>
<img src="https://images.ctfassets.net/lh3zuq09vnm2/yBDals8aU8RWtb0xLnPkI/19b391bda8f43e16e64d40b55561e5cd/How_tracking_user_behavior_on_your_website_can_improve_customer_experience.png" alt="">
<div class="message">
Lorem, ipsum dolor sit amet consectetur adipisicing, elit. Laboriosam itaque fugiat, beatae ab veritatis iste quis. Fugit, cum officiis sit harum animi nihil neque, molestiae voluptate dignissimos ex ducimus quod quo nostrum minus. Odit, itaque laboriosam error distinctio voluptatum delectus.
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
const menuToggleBtn = document.querySelectorAll(".menuToggleBtn")
mobileMenu = document.querySelector(".mobileMenu")
menuToggleBtn.forEach((btn) => {
btn.addEventListener("click", () => {
mobileMenu.classList.toggle("active")
})
})
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop: true,
nav: true,
margin: 20,
autoplay: true,
autoplayTimeout: 1800,
autoplayHoverPause: true,
responsive: {
320: {
items: 1
},
700: {
items: 1
},
1000: {
items: 1
},
1500: {
items: 1
},
2000: {
items: 1
},
3000: {
items: 1
}
}
})
});
</script>
</body>
</html>
CSS Code
@import url("https://fonts.googleapis.com/css2?family=Amaranth:ital,wght@0,400;0,700;1,400;1,700&display=swap");
/*-------------------------- Created By InCoder --------------------------*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Amaranth", sans-serif;
}
.heroSection {
width: 100%;
height: 100vh;
position: relative;
text-align: center;
background: url("images/bg.jpg");
background-position: center;
background-size: cover;
}
.heroSection::after {
left: 0;
bottom: 0;
content: "";
width: 100%;
height: 20rem;
position: absolute;
background: linear-gradient(to bottom, transparent, #0e1020);
}
.heroSection .navbar {
height: 3rem;
display: flex;
color: #ffffff;
align-items: center;
justify-content: space-between;
border-bottom: .5px solid rgb(255 255 255 / 20%);
}
.heroSection .navbar .logo {
font-weight: 550;
font-size: 1.4rem;
margin-left: 1rem;
letter-spacing: .7px;
}
.heroSection .navbar .logo:hover {
color: #ff360e;
}
.heroSection .navbar ul {
height: 3rem;
display: flex;
align-items: center;
}
.heroSection .navbar ul li {
list-style: none;
}
.heroSection .navbar ul a {
color: #ffffff;
margin-left: .8rem;
margin-right: .8rem;
text-decoration: none;
}
.heroSection .navbar ul a:hover {
color: #ff360e;
}
.heroSection .navbar .links {
display: flex;
justify-content: space-between;
}
.heroSection .navbar button {
border: 0;
z-index: 2;
width: 3rem;
height: 3rem;
display: none;
outline: none;
color: #ffffff;
cursor: pointer;
font-size: 1.4rem;
position: relative;
background: #ff360e;
}
.navbar .mobileMenu {
top: 0;
right: 0;
z-index: -1;
width: 3rem;
height: 3rem;
position: fixed;
overflow: hidden;
background: #ff360e;
transition: all .5s ease;
}
.navbar .mobileMenu.active {
z-index: 4;
right: auto;
width: 100%;
height: 100%;
}
.navbar .mobileMenu ul {
margin-top: 3rem;
flex-direction: column;
}
.navbar .mobileMenu ul a {
font-size: 2.5rem;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
flex-direction: column;
}
.navbar .mobileMenu button {
float: right;
border: 2px solid #fff;
border-top: 0;
border-right: 0;
}
.navbar .mobileMenu ul a:hover {
color: #fff;
text-decoration: underline;
}
.heroSection .heroTitle {
color: #fff;
margin-top: 4rem;
max-width: 38rem;
font-size: 3.5rem;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-bottom: 1rem;
}
.heroSection p {
max-width: 20rem;
margin-left: auto;
margin-right: auto;
color: rgb(255 255 255 / 50%);
}
.exploreBtn {
border: 0;
z-index: 2;
width: 10rem;
outline: none;
color: #ffffff;
height: 2.5rem;
cursor: pointer;
font-size: 1rem;
position: relative;
margin-top: 1.8rem;
border-radius: .2rem;
background: rgb(255 54 14 / 70%);
}
.exploreBtn:hover {
background: rgb(255 54 14);
}
@media (max-width: 550px) {
.heroSection .navbar button {
display: block;
}
.heroSection .heroTitle {
font-size: 2.5rem;
max-width: 30rem;
}
.heroSection p {
max-width: 14rem;
}
.heroSection .navbar .links ul {
display: none;
}
.cards .card {
max-width: 100%!important;
}
.testimonials h1{
max-width: 17rem!important;
font-size: 1.8rem!important;
}
}
@media (max-width: 900px) {
.topPrograms .cardBox {
height: 100%!important;
flex-direction: column;
display: flex!important;
}
.topPrograms .cardBox .card {
width: 100%;
margin-top: 0!important;
margin-bottom: 1rem;
height: 20rem!important;
}
}
@media (min-height: 1600px) {
.heroSection {
height: 40vh!important;
}
.programsSection {
height: 40vh!important;
}
}
.programsSection {
width: 100%;
max-width: 100vw;
background: #0e1020;
}
.cards {
display: flex;
transform: translateY(-5rem);
flex-wrap: wrap;
justify-content: center;
}
.cards .card {
padding: 1rem;
max-width: 20rem;
margin-left: 1rem;
margin-right: 1rem;
margin-bottom: 1rem;
background: rgb(255 255 255 / 10%);
}
.cards .card .heading {
display: flex;
color: #ffffff;
margin-bottom: .5rem;
justify-content: space-between;
}
.cards .card .heading p {
font-weight: 600;
font-size: 1.2rem;
}
.cards .card .desc {
max-width: 95%;
color: rgb(255 255 255 / 30%);
margin-bottom: .5rem;
}
.cards .card i {
color: #ff360e;
}
.cards .card a {
position: relative;
text-decoration: none;
color: rgb(255 255 255 / 80%);
transition: color .2s ease-in-out;
}
.cards .card a::before {
left: 0;
width: 0%;
content: "";
height: .1rem;
bottom: -.1rem;
position: absolute;
border-radius: 1rem;
background: #ff360e;
transition: width .2s ease-in-out;
}
.cards .card a:hover {
color: rgb(255 54 14 / 80%);
}
.cards .card a:hover::before {
width: 70%;
}
.topPrograms {
margin-top: 1.5rem;
text-align: center;
}
.topPrograms .title {
font-size: 3rem;
text-align: center;
color: rgb(255 255 255);
}
.topPrograms .desc {
max-width: 35rem;
margin-top: 1rem;
margin-left: auto;
text-align: center;
margin-right: auto;
color: rgb(255 255 255 / 50%);
}
.topPrograms .cardBox {
height: 48rem;
display: grid;
padding: 1rem;
max-width: 80rem;
margin-top: 2rem;
margin-left: auto;
margin-right: auto;
grid-row-gap: 15px;
grid-column-gap: 15px;
grid-template-rows: 1.5fr 2fr;
grid-template-columns: repeat(3, 1fr);
}
.topPrograms .card {
background: #ff360e;
border-radius: .5rem;
}
.topPrograms .card:nth-child(1) {
grid-row: 1;
grid-column: 1;
height: 20rem;
background: url("https://images.unsplash.com/photo-1568715684971-9ac138754ab9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=865&q=80");
background-size: cover;
background-position: center;
}
.topPrograms .card:nth-child(2) {
grid-row: 1;
grid-column: 2;
height: 30rem;
background: url("https://images.unsplash.com/photo-1542224566-6e85f2e6772f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=388&q=80");
background-size: cover;
background-position: center;
}
.topPrograms .card:nth-child(3) {
grid-row: 1;
grid-column: 3;
height: 20rem;
background: url("https://images.unsplash.com/photo-1627241129356-137242cf14f0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=934&q=80");
background-size: cover;
background-position: center;
}
.topPrograms .card:nth-child(4) {
grid-row: 2;
height: 24rem;
grid-column: 1;
margin-top: -10rem;
background: url("https://images.unsplash.com/photo-1654654405366-203a39838847?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80");
background-size: cover;
background-position: center;
}
.topPrograms .card:nth-child(5) {
grid-row: 2;
height: 14rem;
grid-column: 2;
background: url("https://images.unsplash.com/photo-1482647397731-1f423251b1c1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80");
background-size: cover;
background-position: center;
}
.topPrograms .card:nth-child(6) {
grid-row: 2;
height: 24rem;
grid-column: 3;
margin-top: -10rem;
background: url("https://images.unsplash.com/photo-1550047510-01619f5f1899?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE1fHx8ZW58MHx8fHw%3D&w=1000&q=80");
background-size: cover;
background-position: center;
}
.moreBtn {
border: 0;
width: 10rem;
outline: none;
height: 2.8rem;
color: #ffffff;
color: #ff360e;
cursor: pointer;
margin-left: auto;
font-size: 1.2rem;
margin-bottom: 2rem;
border-radius: .5rem;
background: transparent;
border: 2px solid #ff360e;
transition: all .2s ease-in-out;
}
.moreBtn:hover {
color: #fff;
background: #ff360e;
}
.testimonials{
display: flex;
height: 35rem;
position: relative;
background: #0e1020;
align-items: center;
padding-bottom: 2rem;
flex-direction: column;
justify-content: center;
}
.testimonials h1{
font-size: 2.6rem;
max-width: 30rem;
margin-top: 1rem;
color: #fff;
text-align: center;
}
.testimonials p{
max-width: 17rem;
margin-top: 1rem;
text-align: center;
color: rgb(255 255 255 / 60%);
}
.testimonials .cardWrapper{
width: 100%;
height: 20rem;
display: flex;
position: relative;
justify-content: center;
background: rgb(14 16 32);
}
.testimonials .cardWrapper .card{
display: flex;
margin-top: 2rem;
margin-left: 2rem;
margin-right: 2rem;
user-select: none;
position: relative;
align-items: center;
flex-direction: column;
justify-content: center;
}
.testimonials .cardWrapper .card i{
top: 0;
left: 0;
font-size: 12rem;
position: absolute;
color: rgb(255 255 255 / 3%);
}
.testimonials .cardWrapper .card img{
width: 5rem;
height: 5rem;
margin-top: 15px;
border-radius: 50%;
margin-bottom: 1rem;
}
.testimonials .cardWrapper .card .message{
max-width: 28rem;
margin-left: 1rem;
text-align: center;
color: rgb(255 255 255 / 30%);
margin-right: 1rem;
}
.owl-dots{
display: none;
}
.owl-nav{
float: right;
margin-right: 2rem;
}
.owl-nav button{
margin-left: 1rem;
margin-right: 1rem;
font-size: 2rem!important;
color: rgb(255 255 255 / 50%)!important;
}
.owl-nav button:hover{
color: rgb(255 255 255 / 100%)!important;
}
Top comments (0)