INFORMATION TECHNOLOGY

TRAVEL WEBSITE
WEB DEVELOPMENT
18FE18-WEB APPLICATION DEVELOPMENT USING JAVA

MINI PROJECT
REPORT

GIRITHARAN K
20F116
LAVEENKUMAR L
20F128
SAKTHIVEL R
20F145

1
 BONAFIDE CERTIFICATE

Certified that this project report “Travel Website” is the bonafide work of GIRITHARAN K
(20F116), LAVEENKUMAR L(20F128), SAKTHIVEL R (20F145) who carried out the project
work under my supervision. Certified further that to the best of my knowledge the work reported
here in does not form part of any other dissertation on the basis of which degree or award was
conferred on an earlier occasion this or any other candidate.

SIGNATURE SIGNATURE
Dr.P.MURUGESWARI Mr.P.JEGATHESH
HEAD OF THE DEPARTMENT SUPERVISOR

Certified that the candidate was examined in the viva-voce examination held on

……………………….......
(Internal Examiner)

2
 ACKNOWLEDGEMENT

We express our sincere thanks to Karpagam educational and charitable trust for
providing necessary facilities to bring out the project successfully. We felt greatness
to record our thanks to the chairman Dr.R.VASANTHAKUMAR, B.E.,(Hons), D.Sc
for all his support and ray of strengthening hope extended.
It is the moment of immense pride for us to reveal our profound thanks to our
respected principal Dr.P.VIJAYAKUMAR,M.E.,Ph.D. who happens to be striving
force in all our endeavors.
We express our sincere thanks to Dr. P. MURUGESWARI,
M.Tech., Ph.D. Head of the Department of Information Technology for providing an
opportunity to work on this project. Her valuable suggestions helped us a lot to do this
project.
A word of thanks would not be sufficient for the work of our project guide Mr.
P. JEGATHESH, M.Tech Department of Information Technology whose efforts and
inspiration lead us through every trying circumstance.
We deeply express our gratitude to all the members of the faculty of the
department of Information Technology for the encouragement, which we received
throughout the semester.

3
CONTENTS

ACKNOWLEDGEMENT ........................................................................................................................................ 3

ABSTRACT ....................................................................................................................................................... 5

1. INTRODUCTION ..................................................................................................................................... 6

1.1. OBJECTIVE ............................................................................................................................................... 6

1.2. PRODUCT SCOPE ....................................................................................................................................... 6

2. REQUIREMENTS SPECIFICATION ........................................................................................................ 7

2.1. EXTERNAL INTERFACE REQUIREMENTS ....................................................................................................... 7

2.2. FUNCTIONAL REQUIREMENTS SPECIFICATION .............................................................................................. 7

3. HIGH LEVEL DESIGN ............................................................................................................................. 8

4. DETAILED DESIGN ................................................................................................................................. 9

4.1. MODULE NAME AND DESCRIPTION ............................................................................................................. 9

4.2. DESIGN ALTERNATIVES ............................................................................................................................. 9
4.3. ASSUMPTIONS ........................................................................................................................................... 9

5. PROJECT IMPLEMENTATION ............................................................................................................. 10

6.OUTPUT ...................................................................................................................................................... 32

7. CONCLUSION............................................................................................................................................. 37

8. BIBLIOGRAPHY ......................................................................................................................................... 38

4
ABSTRACT

Here I have developed a project on Travel website. Online Tour and Travel Booking is a system that
gives you the facility of booking any type of packages (Summer special packages, adventures packages,
eco package, curies package etc.,). This system is made, so that customer can easily book ticket for all
packages of tourist place such as hills, trekking, adventures, spirituals and user can also register for hotels
for different types of room.

The project ‘Travel website’ is developed to replace the currently existing system, which helps in
keeping records of the customer, details of destination as well as payment received. It saves the precious
asset that is time, and also accuracy, reliability and uniformity can be maintained. This project is useful
for the manager of the company as it helps them to search the data faster than existing system, to get
customer record easily and report of the customer payment, etc are generated as per requirement.

Details of different types of tours which include tours like family tours, couple tours, general tours, date
and time of departure and the fair of the tours etc are maintained. Through this site we can provide
different types of travel packages to the customers. These sites provide everything related to it itineraries.

This site gives new packages on flexible price, so that user can book easily. According to season admin
can change packages. We revise our itineraries regularly. Travel website offers a large range of travel
opportunities.

5
1. INTRODUCTION

1.1. Objective

This system provides Online Registration, Tour Package Information, Bus ticket
booking and all other destinations. The purpose of this project is very clear that user can find room
facilities easily & hotel service providers also get good customers very easily. Customer can register in
the website & can create his own registration then he can receive email for his room status related to his
reservation and book all packages. User can register hotel for different types of room what they want.

1.2. Product Scope

The purpose of tour and travel is mainly to provide online booking services for the
user. This statement describes the problem definition of the proposed system. The purpose of this site is
to book online ticket for hotels and all tourist places.

The problem definition of this website is to book online ticket for hotel and tourist place where user
wants to visit. It is a Web Based Application to develop website in which end user interact with the web-
app easily. In this website, Customer or User can search and book all tourist places and all hill stations
and all hotels of particular area or place.

The problem is that we although have many websites but they offer a different kind of services. The
customers are enjoying a lot but there is a lack of relationship between travel agency and customers and
hence we are establishing that relationship by carrying and servicing all customers in the same manner
that we wish to serve.

6
2. REQUIREMENTS SPECIFICATION

2.1. External Interface Requirements

USER INTERFACE:

• Input control like Buttons

• Information components like Message boxes and Modal window

• Navigation components like Icons

SOFTWARE INTERFACE:

• Text/Html editor

• Web Browser(any)

2.2. Functional Requirements Specification

• Contact page

• Feedback from

• History

• A User-Friendly, Responsive Interface.

• A By-Design Approach.

• Fast loading time.

• Excellent user support.

• Built-in integrations.

7
3.HIGH LEVEL DESIGN

8
4. DETAILED DESIGN

4.1. Module Name and Description

• Home module
• About us module
• Contact us module
• Package module
• Booking module

4.2. Design Alternatives

• Know your customers well

• Create a well-organized appearance for the travel
• Make your website more interactive in the future
• Make Content Accessible
• Make the contact page responsible

4.3Design Details

• creating user experience and user interface for musical social network and its adaptation for
web.

• Experience the process behind designing a user-interface for a Travel website, from Visual
Design.

4.3. Assumptions
The assumptions made in the design is that it would be helpful for the hotel managers to find the customer
reviews about their hotel and to advertise it easily and for the customers it would be easy to know about a
hotel.

9
5. PROJECT IMPLEMENTATION
ABOUT.HTML:
<!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">
<title>About</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
</head>
<body>
<section class="header">
<a href="index.html" class="logo">travel.</a>
<nav class="navbar">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="package.html">Package</a>
<a href="book.html">Book</a>
</nav>
<div id="menu-btn" class="fas fa-bars"></div></section>
<div class="heading" style="background:url(images/header-bg-1.png) no-repeat">
<h1>About Us</h1></div>
<section class="about">
<div class="image">
<img src="images/about-img.jpg " alt="">
</div>
<div class="content">
<h3>why choose us?</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque beatae neque animi tempora, vero, at saepe ipsam
quaerat cumque, eligendi molestias ipsum consequatur eveniet praesentium iste nulla ab modi officiis atque quibusdam
unde aspernatur autem veritatis ipsa! Optio culpa facilis ducimus eius blanditiis perspiciatis fuga!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita quasi sint iusto eos facere ex?</p>
<div class="icons-container">
<div class="icons">

10
 <i class="fas fa-map"></i>
<span>top destinations</span>
</div>
<div class="icons">
<i class="fas fa-hand-holding-usd"></i>
<span>affordable prices</span>
</div>
<div class="icons">
<i class="fas fa-headset"></i>
<span>24/7 guide</span>
</div></div> </div>
</section><section class="footer"> <div class="box-container"><div class="box">
<h3>Quick Links</h3>
<a href="index.html"><i class="fas fa-angle-right"></i> Home</a>
<a href="about.html"><i class="fas fa-angle-right"></i> About</a>
<a href="package.html"><i class="fas fa-angle-right"></i> Package</a>
<a href="book.html"><i class="fas fa-angle-right"></i> Book</a>
</div><div class="box">
<h3>Extra Links</h3>
<a href="#"><i class="fas fa-angle-right"></i> Ask Questions</a>
<a href="#"><i class="fas fa-angle-right"></i> FAQ</a>
<a href="#"><i class="fas fa-angle-right"></i> Privacy Policy</a>
<a href="#"><i class="fas fa-angle-right"></i> Terms of use</a>
</div><div class="box">
<h3>Contact Info</h3>
<a href="#"><i class="fas fa-phone"></i> 9585026204</a>
<a href="#"><i class="fas fa-envelope"></i> [email protected]</a>
<a href="#"><i class="fas fa-map"></i> Hosur,Tamilnadu,india</a></div>
<div class="box">
<h3>Follow us</h3>
<a href="#"><i class="fab fa-facebook"></i> Facebook</a>
<a href="#"><i class="fab fa-twitter"></i> Twitter</a>
<a href="#"><i class="fab fa-instagram"></i> Instagram</a>
<a href="#"><i class="fab fa-linkedin"></i> Linkedin</a> </div> </div> <div class="credit">created by
<span>Laveen</span></div></section>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

11
BOOK.HTML:

<!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">
<title>Book</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
</head>
<body>
<section class="header"><a href="index.html" class="logo">travel.</a><nav class="navbar">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="package.html">Package</a>
<a href="book.html">Book</a></nav>
<div id="menu-btn" class="fas fa-bars"></div></section>
<div class="heading" style="background:url(images/header-bg-3.png) no-repeat"><h1>Book Now</h1></div>
<section class="booking"><h1 class="heading-title">book your trip!</h1>
<form action="book_form.php" method="post" class="book-form"><div class="flex">
<div class="inputBox"><span>name :</span><input type="text" placeholder="Enter your Name" name="name"></div>
<div class="inputBox"><span>email :</span><input type="email" placeholder="Enter your Email" name="email"></div>
<div class="inputBox"><span>phone :</span><input type="number" placeholder="Enter your Number"
name="phone"></div>
<div class="inputBox"><span>address :</span><input type="text" placeholder="Enter your Address"
name="address"></div>
<div class="inputBox"><span>Your Destination :</span><input type="text" placeholder="Enter your Destination"
name="location"></div>
<div class="inputBox"><span>how many members :</span><input type="number" placeholder="How many Members"
name="guests"></div>
<div class="inputBox"><span>Trip Starts on :</span><input type="date" name="arrivals"></div>
<div class="inputBox"><span>Returning back on :</span><input type="date" name="leaving"></div></div>
<input type="submit" value="submit" class="btn" name="send"></form></section>
<section class="footer"><div class="box-container"><div class="box">
<h3>Quick Links</h3>

12
 <a href="index.html"><i class="fas fa-angle-right"></i> Home</a>
<a href="about.html"><i class="fas fa-angle-right"></i> About</a>
<a href="package.html"><i class="fas fa-angle-right"></i> Package</a>
<a href="book.html"><i class="fas fa-angle-right"></i> Book</a></div>
<div class="box"><h3>Extra Links</h3>
<a href="#"><i class="fas fa-angle-right"></i> Ask Questions</a>
<a href="#"><i class="fas fa-angle-right"></i> FAQ</a>
<a href="#"><i class="fas fa-angle-right"></i> Privacy Policy</a>
<a href="#"><i class="fas fa-angle-right"></i> Terms of use</a></div>
<div class="box"><h3>Contact Info</h3>
<a href="#"><i class="fas fa-phone"></i> 9585026204</a>
<a href="#"><i class="fas fa-envelope"></i> [email protected]</a>
<a href="#"><i class="fas fa-map"></i> Hosur,Tamilnadu,india</a></div>
<div class="box"><h3>Follow us</h3>
<a href="#"><i class="fab fa-facebook"></i> Facebook</a>
<a href="#"><i class="fab fa-twitter"></i> Twitter</a>
<a href="#"><i class="fab fa-instagram"></i> Instagram</a>
<a href="#"><i class="fab fa-linkedin"></i> Linkedin</a>
</div></div><div class="credit">created by <span>Laveen</span></div></section>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

INDEX.HTML:
<!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">
<title>Home</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
</head>
<body>
<section class="header">
<a href="index.html" class="logo"><b>Trave.</b></a>

13
 <nav class="navbar">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="package.html">Package</a>
<a href="book.html">Book</a></nav>
<div id="menu-btn" class="fas fa-bars"></div>
</section> <section class="Home"><div class="swiper home-slider"> <div class="swiper-wrapper">
<div class="swiper-slide slide" style="background:url(images/home-slide-1.jpg) no-repeat"><div class="content">
<span>Explore, discover, travel</span>
<h3>travel around the world</h3>
<a href="package.html" class="btn">discover more</a></div></div>
<div class="swiper-slide slide" style="background:url(images/home-slide-2.jpg) no-repeat"><div class="content">
<span>Explore, discover, travel</span>
<h3>Discover new places</h3>
<a href="package.html" class="btn">discover more</a></div> </div>
<div class="swiper-slide slide" style="background:url(images/home-slide-3.jpg) no-repeat"><div class="content">
<span>Explore, discover, travel</span>
<h3>Make your travel worth</h3>
<a href="package.html" class="btn">discover more</a></div></div></div>
<div class="swiper-button-next"></div><div class="swiper-button-prev"></div></div></section>
<section class="services"><h1 class="heading-title"> Our Services</h1>
<div class="box-container"><div class="box"><img src="images/icon-1.png" alt=""><h3>Adventure</h3></div>
<div class="box"><img src="images/icon-2.png" alt=""><h3>Tour Guide</h3></div>
<div class="box"><img src="images/icon-3.png" alt=""><h3>Trekking</h3></div>
<div class="box"><img src="images/icon-4.png" alt=""><h3>Camp Fire</h3></div>
<div class="box"><img src="images/icon-5.png" alt=""><h3>Off Road</h3></div>
<div class="box"><img src="images/icon-6.png" alt=""><h3>Camping</h3></div>
</div></section>
<section class="home-about"><div class="image"><img src="images/about-img.jpg" alt=""></div>
<div class="content"><h3>about us</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, dolores dolor possimus rem nemo aliquid
eligendi qui id eos architecto dolore, iusto tempore, molestiae quo ullam quas eveniet illo suscipit?</p>
<a href="about.html" class="btn">Read More</a> </div></section>
<section class="home-packages">
<h1 class="heading-title"> our packages </h1>
<div class="box-container">
<div class="box">
<div class="image">
<img src="images/img-1.jpg" alt="">

14
 </div>
<div class="content">
<h3>adventure & tour</h3>
<p>Adventure tourism, in general, is defined as the type of tourism that encourages an individual to
come out of his/her comfort zone.</p>
<a href="book.html" class="btn">book now</a>
</div>
</div>
<div class="box">
<div class="image">
<img src="images/img-3.jpg" alt="">
</div>
<div class="content">
<h3>Eco & tour</h3>
<p>Eco tourism allows the tourist to experience the wonders and beauty of the underdeveloped,
natural and culturally sensitive destinations in India.</p>
<a href="book.html" class="btn">book now</a>
</div>
</div>
<div class="box">
<div class="image">
<img src="images/img-2.jpg" alt="">
</div>
<div class="content">
<h3>Cruise & tour</h3>
<p>Cruise tourism permits tourists to explore beautiful riverside villages, undisturbed sacred
islands and sights that will captivate and intrigue their senses.</p>
<a href="book.html" class="btn">book now</a>
</div>
</div>
</div>
<div class="load-more"> <a href="package.html" class="btn">load more</a> </div>
</section>
<!-- home packages section ends -->
<!-- home offer section starts -->
<section class="home-offer">
<div class="content">
<h3>upto 50% off</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam deleniti dicta nostrum veniam nisi

15
 asperiores mollitia ut obcaecati, blanditiis velit eveniet, sed voluptas quod, a saepe nulla assumenda
repudiandae praesentium.</p>
<div class="book-now"> <a href="book.html" class="btn">book now</a> </div></div></section>
<section class="footer"><div class="box-container"><div class="box">
<h3>Quick Links</h3>
<a href="index.html"><i class="fas fa-angle-right"></i> Home</a>
<a href="about.html"><i class="fas fa-angle-right"></i> About</a>
<a href="package.html"><i class="fas fa-angle-right"></i> Package</a>
<a href="book.html"><i class="fas fa-angle-right"></i> Book</a>
</divi <div class="box">
<h3>Extra Links</h3>
<a href="#"><i class="fas fa-angle-right"></i> Ask Questions</a>
<a href="#"><i class="fas fa-angle-right"></i> FAQ</a>
<a href="#"><i class="fas fa-angle-right"></i> Privacy Policy</a>
<a href="#"><i class="fas fa-angle-right"></i> Terms of use</a>
</div>
<div class="box">
<h3>Contact Info</h3>
<a href="#"><i class="fas fa-phone"></i> 9585026204</a>
<a href="#"><i class="fas fa-envelope"></i> [email protected]</a>
<a href="#"><i class="fas fa-map"></i> Hosur,Tamilnadu,india</a>
</div>
<div class="box">
<h3>Follow us</h3>
<a href="#"><i class="fab fa-facebook"></i> Facebook</a>
<a href="#"><i class="fab fa-twitter"></i> Twitter</a>
<a href="#"><i class="fab fa-instagram"></i> Instagram</a>
<a href="#"><i class="fab fa-linkedin"></i> Linkedin</a>
</div>
</div>
<div class="credit">created by <span>Laveen</span></div>
</section>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

16
PACKAGE.HTML

<!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">
<title>Package</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
</head>
<body>
<section class="header"><a href="index.html" class="logo">travel.</a><nav class="navbar">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="package.html">Package</a>
<a href="book.html">Book</a></nav>
<div id="menu-btn" class="fas fa-bars"></div></section>
<div class="heading" style="background:url(images/header-bg-2.png) no-repeat"><h1>Package</h1></div>
<section class="packages"><h1 class="heading-title"> top destinations </h1><div class="box-container">
<div class="box"><div class="image"><img src="images/img-1.jpg" alt=""></div><div class="content">
<h3>adventure & tour</h3><p>Adventure tourism, in general, is defined as the type of tourism that encourages an
individual to come out of his/her comfort zone.</p>
<a href="book.html" class="btn">book now</a></div></div>
<div class="box"><div class="image"><img src="images/img-3.jpg" alt=""></div>
<div class="content"><h3>Eco & tour</h3><p>Eco tourism allows the tourist to experience the wonders and beauty of the
underdeveloped, natural and culturally sensitive destinations in India.</p>
<a href="book.html" class="btn">book now</a></div></div>
<div class="box"><div class="image"><img src="images/img-2.jpg" alt=""></div>
<div class="content"><h3>Cruise & tour</h3>
<p>Cruise tourism permits tourists to explore beautiful riverside villages, undisturbed sacred islands and sights that will
captivate and intrigue their senses.</p>
<a href="book.html" class="btn">book now</a></div></div>
<div class="box"><div class="image"><img src="images/img-4.jpg" alt=""></div>
<div class="content"><h3>adventure & tour</h3>
<p>Adventure tourism, in general, is defined as the type of tourism that encourages an individual to come out of his/her
comfort zone.</p>

17
<a href="book.html" class="btn">book now</a></div></div>
<div class="box"><div class="image"><img src="images/img-5.jpg" alt=""></div>
<div class="content"><h3>Eco & tour</h3>
<p>Eco tourism allows the tourist to experience the wonders and beauty of the underdeveloped, natural and culturally
sensitive destinations in India.</p>
<a href="book.html" class="btn">book now</a></div></div>
<div class="box"><div class="image"><img src="images/img-6.jpg" alt=""></div>
<div class="content"><h3>Cruise & tour</h3>
<p>Cruise tourism permits tourists to explore beautiful riverside villages, undisturbed sacred islands and sights that will
captivate and intrigue their senses.</p>
<a href="book.html" class="btn">book now</a></div></div>
<div class="box"><div class="image"><img src="images/img-7.jpg" alt=""></div>
<div class="content"><h3>adventure & tour</h3>
<p>Adventure tourism, in general, is defined as the type of tourism that encourages an individual to come out of his/her
comfort zone.</p>
<a href="book.html" class="btn">book now</a></div></div>
<div class="box"><div class="image"><img src="images/img-8.jpg" alt=""></div>
<div class="content"><h3>Eco & tour</h3>
<p>Eco tourism allows the tourist to experience the wonders and beauty of the underdeveloped, natural and culturally
sensitive destinations in India.</p>
<a href="book.html" class="btn">book now</a></div></div>
<div class="box"><div class="image"><img src="images/img-9.jpg" alt=""></div><div class="content"><h3>Cruise &
tour</h3>
<p>Cruise tourism permits tourists to explore beautiful riverside villages, undisturbed sacred islands and sights that
will captivate and intrigue their senses.</p>
<a href="book.html" class="btn">book now</a></div></div>
<div class="box"><div class="image"><img src="images/img-10.jpg" alt=""></div><div class="content"><h3>adventure
& tour</h3>
<p>Adventure tourism, in general, is defined as the type of tourism that encourages an individual to come out of his/her
comfort zone.</p>
<a href="book.html" class="btn">book now</a></div></div>
<div class="box"><div class="image"><img src="images/img-11.jpg" alt=""></div>
<div class="content"><h3>Eco & tour</h3>
<p>Eco tourism allows the tourist to experience the wonders and beauty of the underdeveloped, natural and
culturally sensitive destinations in India.</p>
<a href="book.html" class="btn">book now</a></div></div>
<div class="box"><div class="image"><img src="images/img-12.jpg" alt=""></div>
<div class="content"><h3>Cruise & tour</h3>

18
 <p>Cruise tourism permits tourists to explore beautiful riverside villages, undisturbed sacred islands and sights that
will captivate and intrigue their senses.</p>
<a href="book.html" class="btn">book now</a></div></div></div>
<div class="load-more"><span class="btn">load more</span></div></section>
<section class="footer"><div class="box-container"><div class="box"><h3>Quick Links</h3>
<a href="index.html"><i class="fas fa-angle-right"></i> Home</a>
<a href="about.html"><i class="fas fa-angle-right"></i> About</a>
<a href="package.html"><i class="fas fa-angle-right"></i> Package</a>
<a href="book.html"><i class="fas fa-angle-right"></i> Book</a></div>
<div class="box"><h3>Extra Links</h3>
<a href="#"><i class="fas fa-angle-right"></i> Ask Questions</a>
<a href="#"><i class="fas fa-angle-right"></i> FAQ</a>
<a href="#"><i class="fas fa-angle-right"></i> Privacy Policy</a>
<a href="#"><i class="fas fa-angle-right"></i> Terms of use</a></div>
<div class="box"><h3>Contact Info</h3>
<a href="#"><i class="fas fa-phone"></i> 9585026204</a>
<a href="#"><i class="fas fa-envelope"></i> [email protected]</a>
<a href="#"><i class="fas fa-map"></i> Hosur,Tamilnadu,india</a></div>
<div class="box"><h3>Follow us</h3>
<a href="#"><i class="fab fa-facebook"></i> Facebook</a>
<a href="#"><i class="fab fa-twitter"></i> Twitter</a>
<a href="#"><i class="fab fa-instagram"></i> Instagram</a>
<a href="#"><i class="fab fa-linkedin"></i> Linkedin</a>
</div></div><div class="credit">created by <span>Laveen</span></div></section>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

19
STYLE.CSS:

@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap');
:root{
--main-color:#7ad7f0;
--black:#222;
--white:#fff;
--light-black:#777;
--light-white:#fff9;
--dark-bg:rgba(0,0,0,.7);
--light-bg:#eee;
--border:.1rem solid var(--black);
--box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
--text-shadow:0 .5rem 3rem rgba(0,0,0,.3);
--gray:#808080;}
*{
font-family: 'Poppins',sans-serif;
margin: 0;padding: 0;
box-sizing: border-box;
outline: none; border: none;
text-decoration: none;
text-transform: capitalize;}
html{
font-size: 62.5%;
overflow-x:hidden ;}
html::-webkit-scrollbar{
width: 1rem;}
html::-webkit-scrollbar-track{
background-color: var(--white);}
html::-webkit-scrollbar-thumb{
background-color: var(--gray);}
section{
padding: 5rem 10%;}
@keyframes fadeIn{
0%{

20
 transform: scale(0);
opacity: 0; }}
.heading{
background-size: cover !important;
background-position: center !important;
padding-top: 10rem;
padding-bottom: 15rem;
display: flex;
align-items: center;
justify-content: center;}
.heading h1{
font-size: 10rem;
text-transform: uppercase;
color: var(--white);
text-shadow: var(--text-shadow);}
.btn{
display: inline-block;
background: var(--black);
margin-top: 1rem;
color: var(--white);
font-size: 1.7rem;
padding: 1rem 3rem;
cursor: pointer;}
.btn:hover{
background: var(--main-color);}
.heading-title{
text-align: center;
margin-top: 3rem;
font-size: 6rem;
text-transform: uppercase;
color: var(--black);}
.header{
position: sticky;
top:0; left:0; right:0;
z-index: 1000;
background-color: var(--white);

21
 display: flex;
padding-top: 2rem;
padding-bottom: 2rem;
box-shadow: var(--box-shadow);
align-items: center;
justify-content: space-between;}
.header .logo{
font-size: 2.5rem;
color:var(--black); }
.header .navbar a{
font-size: 2rem;
margin-left: 2rem;
color:var(--black); }
.header .navbar a:hover{
color:var(--main-color); }
#menu-btn{
font-size: 2.5rem;
cursor: pointer;
color:var(--black);
display: none; }
.Home{
padding: 0;}
.Home .slide{
text-align: center;
padding: 2rem;
display: flex;
align-items: center;
justify-content: center;
background-size: cover !important;
background-position: center !important;
min-height: 60rem;}
.Home .slide .content{
width: 85rem;
display: none;}
.Home .swiper-slide-active .content{
display: inline-block;}

22
.Home .slide .content span{
display: block;
font-size: 2.2rem;
color: var(--light-white);
padding-bottom: 1rem;
animation: fadeIn .2s linear backwards .2s;}
.Home .slide .content h3{
font-size: 6vw;
color: var(--white);
text-transform: uppercase;
line-height: 1;
text-shadow: var(--text-shadow) ;
padding: 1rem 0;
animation: fadeIn .2s linear backwards .4s;}
.Home .slide .content .btn{
animation: fadeIn .2s linear backwards .6s;}
.services .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1.5rem;}
.services .box-container .box{
padding: 3rem 2rem;
text-align: center;
background: var(--main-color);
cursor: pointer;}
.services .box-container .box:hover{
background: var(--black);}
.services .box-container .box img{
height: 7rem; }
.services .box-container .box h3{
color: var(--white);
font-size: 1.7rem;
padding-top: 1rem;}
.home-about{
display: flex;
align-items: center;

23
 flex-wrap: wrap;}
.home-about .image{
flex: 1 1 41rem; }
.home-about .image img{
width:100%;}
.home-about .content{
flex: 1 1 41rem;
padding: 3rem;
background: var(--light-bg);}
.home-about .content h3{
font-size: 3rem;
color: var(--black);}
.home-about .content p{
font-size: 1.5rem;
padding: 1rem 0;
line-height: 2;
color: var(--black);}
.home-packages{
background: var(--light-bg);}
.home-packages .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap: 2rem;}
.home-packages .box-container .box{
border:var(--border);
box-shadow: var(--box-shadow);
background: var(--white);}
.home-packages .box-container .box:hover .image img{
transform: scale(1.1);}
.home-packages .box-container .box .image{
height: 25rem;
overflow: hidden;}
.home-packages .box-container .box .image img{
height: 100%;
width: 100%;
object-fit: cover;

24
 transition: .2s linear;}
.home-packages .box-container .box .content{
padding:2rem;
text-align: center;}
.home-packages .box-container .box .content h3{
font-size: 2.5rem;
color:var(--black);}
.home-packages .box-container .box .content p{
font-size: 1.5rem;
color:var(--light-black);
line-height: 2;
padding:1rem 0;}
.home-packages .load-more{
text-align: center;
margin-top: 2rem;}
.home-offer{
text-align: center;}
.home-offer .content{
max-width:70rem;
margin: 0 auto;}
.home-offer .content h3{
font-size: 4rem;
text-transform: uppercase;
color: var(--black);}
.home-offer .content p{
font-size: 1.5rem;
color: var(--light-black);
line-height: 2;
padding: 1rem 0;}
.home-offer .book-now{
text-align: center;
margin-top: 2rem;}
.about{
display: flex;
align-items: center;
flex-wrap: wrap;

25
 gap: 3rem;}
.about .image{
flex: 1 1 41rem;}
.about .image img{
width: 100%;}
.about .content{
flex: 1 1 41rem;
text-align: center;}
.about .content h3{
font-size: 3rem;
color: var(--black);}
.about .content p{
font-size: 1.5rem;
color: var(--light-black);
line-height: 2;
padding: 1rem 0;}
.about .content .icons-container{
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
align-items: flex-end;}
.about .content .icons-container .icons{
background: var(--light-bg);
padding: 2rem;
flex: 1 1 16rem;}
.about .content .icons-container .icons i{
font-size: 4rem;
margin-bottom: 2rem;
color: var(--main-color);}
.about .content .icons-container .icons span{
font-size: 1.5rem;
color: var(--light-black);
display: block;}
.packages .box-container{
display: grid;

26
 grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap: 2rem;}
.packages .box-container .box{
border:var(--border);
box-shadow: var(--box-shadow);
background: var(--white);
display: none;}
.packages .box-container .box:nth-child(1),
.packages .box-container .box:nth-child(2),
.packages .box-container .box:nth-child(3),
.packages .box-container .box:nth-child(4),
.packages .box-container .box:nth-child(5),
.packages .box-container .box:nth-child(6){
display: inline-block;}
.packages .box-container .box:hover .image img{
transform: scale(1.1);}
.packages .box-container .box .image{
height: 25rem;
overflow: hidden;}
.packages .box-container .box .image img{
height: 100%;
width: 100%;
object-fit: cover;
transition: .2s linear;}
.packages .box-container .box .content{
padding:2rem;
text-align: center;}
.packages .box-container .box .content h3{
font-size: 2.5rem;
color:var(--black);}
.packages .box-container .box .content p{
font-size: 1.5rem;
color:var(--light-black);
line-height: 2;
padding:1rem 0;}
.packages .load-more{

27
 text-align: center;
margin-top: 2rem;}
.booking .book-form{
padding:2rem;
background: var(--light-bg);}
.booking .book-form .flex{
display: flex;
flex-wrap: wrap;
gap:2rem;}
.booking .book-form .flex .inputBox{
flex:1 1 41rem;}
.booking .book-form .flex .inputBox input{
width: 100%;
padding:1.2rem 1.4rem;
font-size: 1.6rem;
color:var(--light-black);
text-transform: none;
margin-top: 1.5rem;
border:var(--border);}
.booking .book-form .flex .inputBox input:focus{
background: var(--black);
color:var(--white);}
.booking .book-form .flex .inputBox input:focus::placeholder{
color:var(--light-white);}
.booking .book-form .flex .inputBox span{
font-size: 1.5rem;
color:var(--light-black);}
.booking .book-form .btn{
margin-top: 2rem;}
.booking .book-form .flex .inputBox textarea:focus{
background: var(--black);
color:var(--white);}
.footer{
background: url(../images/footer-bg.jpg) no-repeat;
background-size: cover;
background-position: center;}

28
.footer .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
gap: 3rem;}
.footer .box-container .box h3{
color:var(--white);
font-size: 2.5rem;
padding-bottom: 2rem;}
.footer .box-container .box a{
color:var(--light-white);
font-size: 1.5rem;
padding-bottom: 1.5rem;
display: block;}
.footer .box-container .box a i{
color:var(--main-color);
padding-right: .5rem;
transition: .2s linear;}
.footer .box-container .box a:hover i{
padding-right: 2rem;}
.footer .credit{
text-align: center;
padding-top: 3rem;
margin-top: 3rem;
border-top: .1rem solid var(--light-white);
font-size: 2rem;
color:var(--white);}
.footer .credit span{
color:var(--main-color);}
@media (max-width:1200px){
section{padding:3rem 5%;}}
@media (max-width:991px){
html{ font-size: 55%; }
section{ padding:3rem 2rem; }
.home .slide .content h3{ font-size: 10vw; } }
@media (max-width:768px){
.heading h1{

29
 font-size: 4rem; }
#menu-btn{
display: inline-block;
transition: .2s linear; }
#menu-btn.fa-times{
transform: rotate(180deg); }
.header .navbar{
position: absolute;
top:99%; left:0; right:0;
background-color: var(--white);
border-top: var(--border);
padding:2rem;
transition: .2s linear;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
.header .navbar.active{
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
.header .navbar a{
display: block;
margin:2rem;
text-align: center; }}
@media (max-width:450px){
html{
font-size: 50%;}
.heading-title{
font-size: 3.5rem; }}

30
SCRIPT.CSS:

let menu = document.querySelector('#menu-btn');

let navbar = document.querySelector('.header .navbar');
menu.onclick = () =>{
menu.classList.toggle('fa-times');
navbar.classList.toggle('active'); };
window.onscroll = () =>{
menu.classList.remove('fa-times');
navbar.classList.remove('active'); };
var swiper = new Swiper(".home-slider", {
loop:true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev", }, });
let loadMoreBtn = document.querySelector('.packages .load-more .btn');
let currentItem = 3;
loadMoreBtn.onclick = () =>{
let boxes = [...document.querySelectorAll('.packages .box-container .box')];
for (var i = currentItem; i < currentItem + 3; i++){
boxes[i].style.display = 'inline-block'; };
currentItem += 3;
if(currentItem >= boxes.length){
loadMoreBtn.style.display = 'none'; } }

31
6.OUTPUT
INDEX.HTML

32
33
ABOUT.HTML

34
BOOK.HTML

35
PACKAGE.HTML

36
7. CONCLUSION
This web application provides easy way to book tickets online. This application
developed is designed in such a way that any further enhancements can be done with ease.
Through this website user can book all packages of tourist places and hotels. By using
this site, we can save our time.

37
8. BIBLIOGRAPHY
• https://developer.mozilla.org/en-US/
• https://www.w3schools.com/
• https://www.youtube.com/
• https://stackoverflow.com/

38