Hello, Reader. This post will teach you how to create a Travel Website (Tourism Website) Using HTML and CSS. The webpage I'm going to share with you in this article is about travelling. It's quite simple, and you'll have your own Travel Tourism Website by the end of this article.
A travel website is a sort of business that provides customers with travel-related services. When it comes to the future of this industry, there are numerous aspects that will influence how consumers plan their vacations. The rise of mobile usage, greater competition, and a shift in customer expectations are among these factors. The ideal tool for tourists is the travel website creator.
People are increasingly using their mobile gadgets when travelling, for example. As a result, businesses should ensure that their websites are mobile-friendly. To enhance their profits, companies employ an easy website builder for small enterprises. They should also be aware that competition among online booking sites is increasing.
I hope now you have a general idea of what the project entails. In our article, we will go over this project step by step.
Step1: Setting Up the Structure (HTML)
Let us begin by establishing a Travel/Tourism project. Create a new index.html file in a new subdirectory to house the website layout. copy and paste the HTML code given below into your html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Go Trip</title>
</head>
<body>
<body>
<!--===========Nav Bar=================-->
<section class="nav-bar">
<div class="logo">Go Trip</div>
<ul class="menu">
<li><a href="#">home</a></li>
<li><a href="#">tours</a></li>
<li><a href="#">package</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">contact us</a></li>
</ul>
</div>
</section>
<!--===============Banner================-->
<section class="banner">
<div class="banner-text-item">
<div class="banner-heading">
<h1>Find your Next tour!</h1>
</div>
<form class="form"> <input type="text" list="mylist" placeholder="Where would you like to go?"> <datalist id="mylist">
<option>London</option>
<option>Canada</option>
<option>Monaco</option>
<option>France</option>
<option>Japan</option>
<option>Switzerland</option>
<option>Seoul</option>
</datalist> <input type="date" class="date"> <a href="#" class="book">book</a> </form>
</div>
</section>
<!--=========Services===============-->
<section class="services">
<div class="service-item"> <img src="https://res.cloudinary.com/dxssqb6l8/image/upload/v1605293634/tour-guide_onzla9.png">
<h2>8000+ Our Local Guides</h2>
</div>
<div class="service-item"> <img src="https://res.cloudinary.com/dxssqb6l8/image/upload/v1605293738/reliability_jbpn4g.png">
<h2>100% Trusted Tour Agency</h2>
</div>
<div class="service-item"> <img src="https://res.cloudinary.com/dxssqb6l8/image/upload/v1605293635/experience_a3fduk.png">
<h2>28+ Years of Travel Experience</h2>
</div>
<div class="service-item"> <img src="https://res.cloudinary.com/dxssqb6l8/image/upload/v1605293634/feedback_s8z7d9.png">
<h2>98% Our Travelers are Happy</h2>
</div>
</section>
<!--==============Places===================-->
<section class="places">
<div class="places-text"> <small>FEATURED TOURS PACKAGES</small>
<h2>Favourite Places</h2>
</div>
<div class="cards">
<div class="card">
<div class="zoom-img">
<div class="img-card"> <img src="https://res.cloudinary.com/dxssqb6l8/image/upload/v1605293736/james-wheeler_xqmq2y.jpg"> </div>
</div>
<div class="text"> <span class="rating"></span>
<h2>The Dark Forest Adventure</h2>
<p class="cost">$1870 / Per Person</p>
<div class="card-box">
<p class="time"> 3 Days</p>
<p class="location"> Vancouver, Canada</p>
</div>
</div>
</div>
<div class="card">
<div class="zoom-img">
<div class="img-card"> <img src="https://res.cloudinary.com/dxssqb6l8/image/upload/v1605293755/paris_uj8wum.jpg"> </div>
</div>
<div class="text"> <span class="rating"></span>
<h2>The Dark Forest Adventure</h2>
<p class="cost">$1870 / Per Person</p>
<div class="card-box">
<p class="time"> 3 Days</p>
<p class="location"> Paris, France</p>
</div>
</div>
</div>
<div class="card">
<div class="zoom-img">
<div class="img-card"> <img src="https://res.cloudinary.com/dxssqb6l8/image/upload/v1605293955/monaco_usu7xb.jpg"> </div>
</div>
<div class="text"> <span class="rating"></span>
<h2>The Dark Forest Adventure</h2>
<p class="cost">$1870 / Per Person</p>
<div class="card-box">
<p class="time"> 3 Days</p>
<p class="location"> Monaco, Monaco</p>
</div>
</div>
</div>
<div class="card">
<div class="zoom-img">
<div class="img-card"> <img src="https://res.cloudinary.com/dxssqb6l8/image/upload/v1605293874/switzerland_tubxcm.jpg"> </div>
</div>
<div class="text"> <span class="rating"></span>
<h2>The Dark Forest Adventure</h2>
<p class="cost">$1870 / Per Person</p>
<div class="card-box">
<p class="time"> 3 Days</p>
<p class="location"> Bern, Switzerland</p>
</div>
</div>
</div>
<div class="card">
<div class="zoom-img">
<div class="img-card"> <img src="https://res.cloudinary.com/dxssqb6l8/image/upload/v1605293673/korea_bxrcj5.jpg"> </div>
</div>
<div class="text"> <span class="rating"></span>
<h2>The Dark Forest Adventure</h2>
<p class="cost">$1870 / Per Person</p>
<div class="card-box">
<p class="time"> 3 Days</p>
<p class="location"> Seoul, South Korea</p>
</div>
</div>
</div>
<div class="card">
<div class="zoom-img">
<div class="img-card"> <img src="https://res.cloudinary.com/dxssqb6l8/image/upload/v1605293673/night-4336403_1920_demehp.jpg"> </div>
</div>
<div class="text"> <span class="rating"></span>
<h2>The Dark Forest Adventure</h2>
<p class="cost">$1870 / Per Person</p>
<div class="card-box">
<p class="time"> 3 Days</p>
<p class="location"> Tokyo, japan</p>
</div>
</div>
</div>
</div>
</section>
<!--===========About Us===============-->
<section class="about">
<div class="about-img"> <img src="https://res.cloudinary.com/dxssqb6l8/image/upload/v1605293719/outdoor_tjjhxk.jpg"> </div>
<div class="about-text"> <small>ABOUT OUR COMPANY</small>
<h2>We are Go Trip Ravels Support Company</h2>
<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</p> <label><input type="checkbox" checked>Lorem ipsum dolor sit amet</label> <label><input type="checkbox" checked>consectetur adipisicing elit</label> <label><input type="checkbox" checked>Architecto atque consequuntur</label> <label><input type="checkbox" checked>cupiditate doloremque ducimus</label> <a href="#">ABOUT US</a>
</div>
</section>
<!--===========Footer=================-->
<div class="footer">
<div class="links">
<h3>Quick Links</h3>
<ul>
<li>Offers & Discounts</li>
<li>Get Coupon</li>
<li>Contact Us</li>
<li>About</li>
</ul>
</div>
<div class="links">
<h3>New Products</h3>
<ul>
<li>Woman Cloth</li>
<li>Fashion Accessories</li>
<li>Man Accessories</li>
<li>Rubber made Toys</li>
</ul>
</div>
<div class="links">
<h3>Support</h3>
<ul>
<li>Frequently Asked Questions</li>
<li>Report a Payment Issue</li>
<li>Terms & Conditions</li>
<li>Privacy Policy</li>
</ul>
</div>
</div>
</body>
</html>
</body>
</html>
Every website has three sections: the header, the main body, and the footer. In our project, we will use the same procedure; we will build a header section where we will add the heading, and we will add the main content inside the main section.
Header Section of travel website
First, in the header section of our website, we will add a navbar for our travel website using the tag, and inside the nav tag, we will create different navbar links for our website navbar using an unordered list.
Inside our header section, we will add another section called "banner," within which we will add a heading using the tag; a text input box using the form tag; a menu list for selecting the countries from the menu list; an input of type "date" to select the date from the calendar; and a book button using the tag.
Body Section of travel website
In the body section, we will develop three sections: one for services, one for places, and one for about us. In this section, we will introduce several structures. Within our services section, we will use the
to create a container for our service items, and within our div tag, we will add an image and a sub-heading using the, as well as three more service items.Concerning the places portion, we will create the locations in card format. In our places sections, we will first create some div tags, and within those, we will add an image related to the place using the tag, and the text for that place using another div tag. We'll use the span and h2 tags inside that div to add a rating for the place, and the tag to add the subheading of our place items. We'll make 5 more image cards with zoom features like this one.
Now, within our about section, we will use the tag to create another section for about us, and within that, we will use the< img> tag to add a display image about our organisation, and we will use the general html element to give a brief explanation about our website.
Footer Section:
We'll use the footer tag to create a footer section and the
tag to create a div section. Using the © tag, we will add the copyright emblem and copyright material, as well as the name of the person who designed the website, using thetag. We will generate links for the footer using the unordered list and the tag. We will include a heading for the quick link, as well as additional items and support.
Step2: Styling the Travel Website (CSS)
Let's concentrate on how we can style our website. I'll highlight some key points to remember when styling.
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
* {
box-sizing: border-box;
margin: 0;
}
body, html {
margin: 0;
padding: 0;
}
/*------------------------Scroll Bar-----------------------*/
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #fde65e;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #FDE02F;
}
/*========================Nav Bar=========================*/
.nav-bar {
display: flex;
flex-flow: row wrap;
width: 100%;
height: 90px;
background-color: #fff;
box-shadow: 3px 3px 10px lightslategray;
align-items: center;
justify-content: center;
position: sticky;
top: 0;
z-index: 1;
}
.logo {
flex: 1;
font-size: 40px;
padding: 20px;
margin-left: 50px;
font-family: Satisfy;
}
ul.menu {
flex: 1;
display: flex;
flex-flow: row wrap;
}
.menu li {
flex: 1;
list-style-type: none;
font-size: 16px;
font-family: "Barlow Condensed";
text-align: center;
}
.menu li a {
text-decoration: none;
color: #000;
text-transform: uppercase;
}
.menu li a:hover {
color: midnightblue;
text-decoration: underline;
}
/*=============================Banner=============================*/
.banner {
background-image: url("https://res.cloudinary.com/dxssqb6l8/image/upload/v1605294054/young-woman-enjoying-beautiful-scenery-of-lago-di-braies-italy-picjumbo-com_aa0fvw.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
/*overflow: hidden;*/
width: 100%;
height: 100vh;
text-align: center;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.banner::before {
content: '';
position: absolute;
display: block;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.2);
/*background-size: 100%;*/
}
.banner-text-item {
position: absolute;
width: 100%;
text-align: center;
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
}
.banner-heading {
flex: 1;
}
.banner-heading h1 {
font-size: 100px;
font-weight: normal;
color: #FDE02F;
font-family: Satisfy;
}
.banner-text-item .form {
flex: 1;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 5px;
width: 70%;
padding: 1% 2%;
}
.banner-text-item input,
.banner-text-item .date,
.banner-text-item .book {
padding: 15px;
margin-right: 10px;
font-size: 18px;
font-family: Roboto;
border-radius: 5px;
outline: 0;
border: none;
}
.banner-text-item input {
width: 50%;
flex: 2;
}
.banner-text-item .date {
width: 20%;
flex: 1;
}
.banner-text-item .book {
width: 20%;
flex: 1;
}
.banner-text-item .book {
text-decoration: none;
color: #000;
text-transform: uppercase;
padding: 15px;
cursor: pointer;
background-color: #FDE02F;
font-size: 16px;
font-weight: normal;
font-family: "Barlow Condensed";
width: 20%;
}
/*===========================Services===========================*/
.services {
display: flex;
flex-flow: row;
align-items: center;
justify-content: center;
}
.service-item {
flex: 1;
padding: 50px 10px;
border: lightcyan solid 1px;
text-align: center;
margin: 180px 50px;
transition: all 1s;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
.service-item:hover {
box-shadow: 3px 3px 20px lightsteelblue;
}
.service-item h2 {
font-family: Barlow Condensed;
font-size: 18px;
width: 120px;
color: #001F38;
flex: 1;
}
.service-item img {
width: 60px;
height: 60px;
flex: 1;
}
/*=============================Places===============================*/
.places-text {
text-align: center;
margin-bottom: 50px;
}
.places-text small {
font-family: Roboto;
color: #FFC342;
font-size: 15px;
font-weight: bolder;
}
.places-text h2 {
font-family: Barlow Condensed;
font-size: 55px;
color: #191D34;
letter-spacing: 1px;
}
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 30px;
align-items: center;
justify-items: center;
text-align: center;
}
.card {
border: 1px solid lightgray;
box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.3);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
width: 80%;
height: auto;
}
.card img {
max-width: 100%;
height: 300px;
border-radius: 8px;
cursor: pointer;
}
.cards .text {
padding: 20px;
font-family: Barlow Condensed;
line-height: 50px;
}
.cards .card-box {
display: flex;
flex-flow: row;
background-color: #FDE02F;
font-size: 18px;
font-family: Roboto;
align-items: center;
justify-content: center;
text-align: center;
}
.cards .time {
flex: 1;
}
.cards .location {
flex: 2;
}
.cards .cost {
color: #4CAFAD;
font-size: 20px;
}
/*------------Zoom in Photos--------------*/
.zoom-img {
float: left;
position: relative;
width: 100%;
height: 320px;
overflow: hidden;
}
.zoom-img .img-card {
position: absolute;
overflow: hidden;
}
.img-card img {
-webkit-transition: 0.8s ease;
transition: 0.8s ease;
}
.card:hover .zoom-img img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
/*=========================About Us=========================*/
.about {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
padding: 150px;
}
.about-img {
flex: 1;
}
.about-img img {
width: 500px;
height: 700px;
box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.3);
}
.about-text {
flex: 1;
/*width: 100px;*/
display: flex;
flex-flow: column wrap;
}
.about-text small,
.about-text p,
.about-text input,
.about-text a {
flex: 1;
font-family: Roboto;
}
.about-text small {
color: #FFC342;
font-size: 18px;
}
.about-text h2 {
flex: 1;
font-family: Barlow Condensed;
font-size: 60px;
color: #191D34;
width: 450px;
}
.about-text label {
padding-bottom: 10px;
color: #506172;
font-weight: bolder;
font-family: Roboto;
letter-spacing: 1px;
}
.about-text p {
width: 500px;
line-height: 30px;
color: #506172;
font-weight: bolder;
padding: 50px 0;
}
.about-text a {
background-color: #fff;
border: 2px solid #014B85;
text-decoration: none;
border-radius: 5px;
width: 180px;
padding: 20px;
text-align: center;
margin-top: 50px;
color: #014B85;
font-weight: bolder;
font-size: 14px;
}
.about-text a:hover {
background-color: #014B85;
color: #fff;
}
/*===============Footer===================*/
.footer {
background-image: url("https://res.cloudinary.com/dxssqb6l8/image/upload/v1605293781/pine-tree_mq2sgp.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 670px;
position: relative;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.footer::before {
position: absolute;
content: '';
display: block;
background-color: rgba(0, 0, 36, 0.80);
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.footer .links {
position: relative;
color: #fff;
flex: 1;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
.links ul {
list-style-type: none;
}
.links h3 {
font-family: Barlow Condensed;
font-weight: normal;
font-size: 23px;
margin-bottom: 15px;
}
.links li {
font-family: Roboto;
cursor: pointer;
padding: 15px 0;
}
.links li:hover {
color: #FFA801;
}
/*==========================Responsive=============================*/
@media all and (max-width: 1172px) {
.banner-text-item .form {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
width: 50%;
}
.banner-text-item .form input,
.banner-text-item .form .date,
.banner-text-item .form a {
flex: 1;
margin-bottom: 5px;
font-size: 14px;
}
.banner-text-item .form input {
width: 60%;
}
.banner-text-item .form .date {
width: 30%;
}
.banner-text-item .form .book {
width: 10%;
font-size: 14px;
}
.banner-heading h1 {
font-size: 60px;
}
}
@media all and (max-width: 1414px) {
.banner-text-item .form input {
width: 40%;
}
.banner-text-item .form .date {
width: 30%;
}
.banner-text-item .form .book {
width: 20%;
font-size: 14px;
}
}
@media all and (max-width: 942px) {
.nav-bar {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
width: 100%;
height: auto;
text-align: center;
position: static;
}
.logo {
flex: 1;
font-size: 30px;
margin: 10px auto;
font-family: Satisfy;
color: #FDE02F;
}
.nav-bar ul {
display: none;
}
.nav-bar ul li {
flex: 1;
margin-bottom: 5px;
font-size: 14px;
}
.services {
display: flex;
flex-flow: column wrap;
}
.services .service-item {
flex: 1;
margin-bottom: -130px;
width: 400px;
}
.places-text {
margin-top: 200px;
}
}
@media all and (max-width: 928px) {
.banner .form input, a {
font-size: 12px;
}
}
@media all and (max-width: 1173px) {
.banner .form {
background-color: transparent;
}
}
@media all and (max-width: 1194px) {
.places .card-box p {
font-size: 14px;
}
}
@media all and (max-width: 1086px) {
.places .cards .text {
line-height: 40px;
}
.cards .text .h2 {
font-size: 12px;
}
.cards .img-card img {
height: 260px;
}
}
@media all and (max-width: 974px) {
.cards {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(6, 1fr);
grid-gap: 20px;
}
.card {
width: 300px;
height: 500px;
margin: auto;
}
.cards .text {
padding: 5px;
font-family: Barlow Condensed;
}
}
@media all and (max-width: 1334px) {
.about-img img {
width: 300px;
height: 500px;
}
}
@media all and (max-width: 1116px) {
.about {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
}
.about-img {
flex: 1;
margin-bottom: 20px;
}
.about-text {
flex: 1;
margin: auto;
text-align: center;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
.about-text h2{
font-size: 35px;
}
.about-img img {
width: 400px;
height: 400px;
}
}
@media all and (max-width: 708px) {
.footer{
width: 100%;
height: 670px;
position: relative;
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
}
}
Default Styling:
We will import several new fonts for our travel website via Google's import link using the @import url function. Then, using the universal selection, we'll set the padding, margin, and box size to "border box". We'll style our scrollbar with :webkit-scrollbarselector, setting the scrollbar width to 20px and the border radius to 10px with a yellow background.
Navbar Styling:
We will use the class selector (.nav-bar) to set the display to "flex," with the width set to 100% and the height set to 90 px. We will change the background colour to white using the background colour property, and we will style the navbar items using the ul tag selector.
Styling Banner:
Using the selector (.banner) and the background-img property, we will add an image to our background. We'll set the width and height to 100% and 100vh, respectively, and use the text-align attribute to centre it. Our form element will also be styled.
Styling the Services and Places Section
We will utilise the basic CSS concept; first, we will choose the html element using the class selector, and then we will add a background image and set the width and height of the element using basic CSS styling.
Styling footer:
We will add an image background to our footer and the width and height of our footer using the undordered list tag selector. We will add a black background to our text using the background colour property, and the text will be set as white. We will add responsiveness to our trip website using the media query property.
Now we've completed our [travel website] using HTML, CSS . I hope you understood the whole project. Let's take a look at our Live Preview.
Now We have Successfully created our Travel website using HTML , CSS. You can use this project directly by copying into your IDE. WE hope you understood the project , If you any doubt feel free to comment!!
If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.
How to Create a Travel website design?
A Travel Website Is A Sort Of Business That Provides Customers With Travel-Related Services. When It Comes To The Future Of This Industry, There Are Numerous Aspects That Will Influence How Consumers Plan Their Vacations. The Rise Of Mobile Usage, Greater Competition, And A Shift In Customer Expectations Are Among These Factors. The Ideal Tool For Tourists Is The Travel Website Creator.
How to create a travel website using html code?
establishing a travel website project. Create a new index.html file in a new subdirectory to house the website layout. copy and paste the HTML code given below into your html file.
Top comments (0)