Travel/Tourism Website Project Using HTML and CSS Code
Create A Travel/Tourism Website Project Using HTML and CSS Code
Hello Coder, This post will teach you how to create a Travel/Tourism Website Project Using HTML and CSS Code. The webpage I’m going to share with you in this article is about traveling. It’s quite simple, and you’ll have your own Travel Tourism Website by the end of this article.
What is a Travel website?
A travel website is a sort of business that provides customers with travel-related services. When it comes to the future of this industry, numerous aspects 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.
50+ HTML, CSS and JavaScript Projects With Source Code
People are increasingly using their mobile gadgets when traveling, 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.
Create Portfolio Website Using HTML and CSS (Source Code)
Header Section of travel website
First, in the header section of our website, we will add a navbar for our travel website using the <nav> 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 <h1> 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 <a> 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 <div> to create a container for our service items, and within our div tag, we will add an image and a sub-heading using the <h2>, 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 img> 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 h2 tag to add the subheading of our place items. We’ll make 5 more image cards with zoom features like this one.
Restaurant Website Using HTML and CSS
Now, within our about section, we will use the <section> tag to create another section for About us, and within that, we will use the< img> tag to add a display image about our organization, 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 <div> 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 the <p> tag. We will generate links for the footer using the unordered list and the <h3> tag. We will include a heading for the quick link, as well as additional items and support.
Now that we’ve added structure to our webpage, let’s have a look at it.
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.8);
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.
Weather App Using HTML,CSS and JavaScript (Source Code)
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.
This is just scratching the surface of what you can do with CSS, And if you want an in-depth guide on CSS then we have got you covered. We have launched an E-Book for you, In this E-Book you will not only learn CSS but also HTML, Javascript, and Bootstrap as well. But Wait! It doesn’t end here, This E-Book also includes 100+ frontend projects and interview questions as well. You can find out more with this link — Master Frontend Development: Zero to Hero
Styling Banner:
Using the selector (.banner) and the background-image 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.
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
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.
Final Output of Travel/Tourism Website:
Live Preview Of our Travel/Tourism Projects using HTML and CSS:-
10+ HTML CSS Projects With Source Code
If you find 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.
follow: @codewithrandom
Written By: @Arun
Code By: @Nasim
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
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 in your html file.
What is a Travel website?
A travel website is a sort of business that provides customers with travel-related services. When it comes to the future of this industry, numerous aspects 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.
