Tour Management File - 1

A Minor Project Report On …
TOUR MANAGEMENT WEBSITE WITH

HTML & CSS….
SUBMITED IN THE PARTIAL FULLFILLMENT OF THE

AWARD OF
DIPLOMA IN
COMPUTER SCIENCE & ENGNEERING
BY UTTARAKHAND BOARD OF TECHNICAL EDUCATION ROORKEE
(HARIDWAR)
SESSION: 2023-24
COMPUTER SCIENCE & ENGNEERING 3rd YEAR/5th SEM
SUBMITTED TO :-
THE DEPARTMENT OF COMPUTER SCIENCE & ENGNEERING

GOVERNMENT POLYTECHNIC SULT, ALMORA
(UTTARAKHAND)
SUBMITTED BY:-
PRADEEP SINGH.
NIKITA RAWAT.
1
ACKNOWLEDGEMENT
These project are not the work of an individual, it rather incorporates the
effects of all the members of this group and also several other people who
have contributes directly to the successful completion of the project and the
preparation of this report. Here we make an effort to express our gratitude to
them.
Head of department of Department of Computer Science & Engineering,

Government Polytechnic Sult(Almora) and Mr. Dharmendra Prakash lecturer
in Computer Science & Engineering for their Cooperation and Encouraging
during the Preparation of the Project.
Sincerely thanks due, to Mr. Dharmendra Prakash Lecturer in for his pain
taking reading the manuscript and suggesting the correction for the
betterment of this report and helping us as project guide. I also want to thank
all my friends for help and support they gave me.
At the end, heartily thanks the technical staff of the Department.
Thank You
2
Abstract
HTML (Hypertext Markup Language) is the standard language used to

create the structure and content of webpages.
It uses tags to define different elements like headings, paragraphs,
images, links, and more. CSS (Cascading Style Sheets) is a stylesheet
language that is used to control the presentation and layout of HTML
elements.
It allows you to customize the appearance of your webpage by
specifying properties such as colour fonts, margins, and positioning.
With HTML, you can create the basic structure of your webpage,
including headings, paragraphs, lists, and tables. You can also insert
images, videos, and audio elements.
HTML provides semantic tags that help search engines and screen
readers understand the content better.CSS, on the other hand, lets you
style your webpage by targeting specific HTML elements or classes.
You can change the font style, size, and colour adjust the spacing
between elements, create responsive layouts, and add animations and
transitions.
CSS also supports media queries, which allow you to apply different
styles based on the screen size or device type.
Together, HTML and CSS form the backbone of web development.
They work hand in hand to create visually appealing and interactive
websites. By learning these languages, you can unleash your creativity
and bring your web design ideas to life.
3
Objective
Tour management, setting objectives is important to ensure a

successful and memorable experience for all participants. Here are
some objectives you can consider for tour management:
o Provide exceptional customer service throughout the entire

tour.
o Create a customized itinerary that caters to the interests

and preferences of the participants.
o Ensure seamless logistics, including transportation,

accommodation, and meals.
o Maintain a high level of safety and security for all tour

participants.
o Offer engaging and informative guided tours at each

destination.
o Deliver a unique and authentic travel experience,

showcasing the local culture and traditions.
o Establish strong partnerships with local vendors and

suppliers to ensure quality services.
o Manage the tour budget effectively, optimizing resources

without compromising on the experience.
4
o Provide clear and timely communication to participants
regarding tour details and any changes.
o Offer flexibility and adaptability to accommodate

individual needs and preferences.
o Foster sustainable and responsible tourism practices,

minimizing the impact on the environment and local
communities.
o Provide support and assistance to participants throughout

the tour, addressing any concerns or issues promptly.
o Continuously evaluate and improve tour operations based

on participant feedback and industry trends.
5
Table Of Content
UNIT 1
1. Introduction…………………………………………………………
2. Hypertext markup language (HTML)………………………………
3. Cascading Style Sheet (CSS)………………………………………..
UNIT 2
1. Structure Of Index Directory………………………………………..

2. Design Of Website…………………………………………………..
3. Code For HTML……………………………………………………..
4. Code for CSS………………………………………………………...
UNIT 3
1. Purpose Of This Website……………………………………………

2. Conclusion…………………………………………………………..
6
Unit 1
Introduction….
➢ What Do Web Developers Do?
Web developers often work for clients who are trying to get their product
or service onto the web. The work is typically very project focused and
involves collaborating with a team that helps to coordinate the client's
needs into the end product.
The client could be a tech company, an organization, or a government.

The work could involve front-end, back-end, or full-stack web
development.
A good profession for you if you like solving logical problems, building
useful things, and experimenting with new technologies. Web developers
are in high demand, generally have a good work/life balance, and
command comfortable salaries.
Google your specific location to get a better sense of your local web
development job opportunities.
7
Hypertext Markup Language (HTML)
The Hypertext Markup Language or HTML is the standard markup language for
documents designed to be displayed in a web browser. It defines the meaning and
structure of web content. It is often assisted by technologies such as Cascading
Style Sheets (CSS) and scripting languages such as JavaScript.
Web browsers receive HTML documents from a web server or from local storage
and render the documents into multimedia web pages. HTML describes the
structure of a web page semantically and originally included cues for its
appearance.
HTML elements are the building blocks of HTML pages. With HTML
constructs, images and other objects such as interactive forms may be embedded
into the rendered page.
HTML provides a means to create structured documents by denoting
structural semantics for text such as headings, paragraphs, lists, links, quotes, and
other items. HTML elements are delineated by tags, written using angle brackets.
Tags such as <img> and <input> directly introduce content into the page. Other
tags such as <p> and </p> surround and provide information about document
text and may include sub-element tags. Browsers do not display the HTML tags
but use them to interpret the content of the page.
HTML can embed programs written in a scripting language such as JavaScript,

which affects the behaviour and content of web pages.
8
EXAMPLE :
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
9
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) is a style sheet language used for describing
the presentation of a document written in a markup language such
as HTML or XML (including XML dialects such
as SVG, MathML or XHTML).[1] CSS is a cornerstone technology of the World
Wide Web, alongside HTML and JavaScript.
CSS is designed to enable the separation of content and presentation,
including layout, colours, and fonts. This separation can improve
content accessibility; provide more flexibility and control in the specification of
presentation characteristics; enable multiple web pages to share formatting by
specifying the relevant CSS in a separate . CSS file, which reduces complexity
and repetition in the structural content; and enable the . CSS file to be cached to
improve the page load speed between the pages that share the file and its
formatting.
Separation of formatting and content also makes it feasible to present the same
markup page in different styles for different rendering methods, such as on-
screen, in print, by voice (via speech-based browser or screen reader), and
on Braille-based tactile devices.
10
Example :
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
11
UNIT 2
Structure Of Index Directory….
What Is Vendors File?
Vendors are a part of the supply chain: the network of all the individuals,
organizations, resources, activities and technology involved in the creation and
sale of a product, from the delivery of source materials from the supplier to the
manufacturer, through to its eventual delivery to the end user.
Parts manufacturers are vendors of parts to other manufacturers that assemble

the parts into something sold to wholesalers or retailers. Retailers are vendors of
products to consumers. In information technology as well as in other industries,
the term is commonly applied to suppliers of goods and services to
other companies.
12
Design Of Website (HTML)
Fig: Design Of Website Using (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>Go Easytrip</title>
<link rel="icon" href="./files/logo.png">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Paytone+One&family=Poppins:wght
@100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet">
<link rel="stylesheet"
href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
</head>
13
<body>

<div class="banner">
<video src="./files/bgvid.mp4" type="video/mp4" autoplay muted loop></video>


<div class="content" id="home">
<nav>
<img src="./files/logo.png" class="logo" alt="Logo" title="Go Easytrip">
<ul class="navbar">
<li>
<a href="#home">Home</a>
<a href="#locations">Locations</a>
<a href="#package">Packages</a>
<a href="./about.html">About Us</a>
<a href="./about.html">Contact Us</a>
</li>
</ul>
</nav>
<div class="title">
<h1>GO EASY TRIP</h1>
<p>Plan your trip with us and travel around the world with the most affordable
packages!</p>
<a href="./register.html" class="button">Register Now!</a>
</div>
</div>
</div>
14
Website Index Body……

<section class="container">
<div class="text">
<h2>We have the best services available for you!</h2>
</div>
<div class="rowitems">
<div class="container-box">
<div class="container-image">
<img src="./files/1a.jpg" alt="Flight Services">
</div>
<h4>Flight Services</h4>
<p>Arrival and Departure</p>
</div>
<img src="./files/2a.jpg" alt="Food Services">
</div>
<h4>Food Services</h4>
<p>Catering</p>
</div>
<img src="./files/3a.jpg" alt="Travel Services">
</div>
<h4>Travel Services</h4>
<p>Pick-up/drop</p>
</div>
<img src="./files/4a.jpg" alt="Hotel Services">
</div>
<h4>Hotel Services</h4>
<p>Check-in/out</p>
</div>
</div>
</div>
</section>
15

<section class="locations" id="locations">

<div class="package-title">
<h2>Locations</h2>
</div>
<div class="location-content">
<a href="./locations.html#Rishikesh" target="_blank">

<div class="col-content">
<img src="./files/l1.jpg" alt="">
<h5>Dehradun</h5>
<p>Rishikesh</p>
</div>
</a>
<a href="./locations.html#Haridwar" target="_blank">

<h5>Dehradun</h5>
<p>Haridwar</p>
</div>
</a>
<a href="./locations.html#Jim Corbett National Park" target="_blank">

<h5>Ramnagar</h5>
<p>Jim Corbett National Park</p>
</div>
</a>
<a href="./locations.html#Devprayag" target="_blank">
<h5>Tehri Garhwal</h5>
<p>Devprayag</p>
</div>
</a>
16
<a href="./locations.html#Nainital" target="_blank">
<h5>Kumaon</h5>
<p>Nainital</p>
</div>
</a>
<a href="./locations.html#Mussoorie" target="_blank">

<h5>Dehradun</h5>
<p>Mussoorie</p>
</div>
</a>
<a href="./locations.html#port-Surkanda Devi Temple" target="_blank">

<h5>Tehri Garhwal</h5>
<p>Surkanda Devi Temple</p>
</div>
</a>
<a href="./locations.html#Munsiyari" target="_blank">

<h5>Pithoragarh</h5>
<p>Munsiyari</p>
</div>
</a>
</div>
</section>
17

<section class="package" id="package">

<div class="package-title">
<h2>Packages</h2>
</div>
<div class="package-content">
<div class="box">
<div class="image">
<img src="./files/p1.jpg" alt="">
<h3>Rs.9,999/-</h3>
</div>
<div class="dest-content">
<div class="location">
<h4>Bronze</h4>
<ul class="pac-details">
<li>2 Star Hotel</li>
<li>5 Nights Stay</li>
<li>Free photo Session</li>
<li>Friendly Tour Guide</li>
<li>24/7 Customer Help Center</li>
</ul>
</div>
</div>
</div>
<div class="box">
<div class="image">
<h3>Rs.19,999/-</h3>
</div>
<h4>Silver</h4>
</ul>
</div>
</div>
</div>
18
<div class="box">
<div class="image">
<h3>Rs.29,999/-</h3>
</div>
<h4>Gold</h4>
<li>Breakfast and Dinner</li>
</ul>
</div>
</div>
</div>
<div class="box">
<div class="image">
<h3>Rs.39,999/-</h3>
</div>
<h4>Platinum</h4>
<li>Breakfast, Lunch and Dinner</li>
19
<li>Bornfire</li>
</ul>
</div>
</div>
</div>
</div>
</section>

<section class="newsletter">
<div class="newstext">
<h2>Newsletter</h2>
<p>Subscribe to get offers and latest<br>updates every week!</p>
</div>
<div class="send">
<form action="">
<input type="email" name="emailid" placeholder="E-mail" required>
<input type="submit" value="Subscribe">
</form>
</div>
</section>

<section class="footer">
<div class="foot">
<div class="footer-content">
<div class="footlinks">
<h4>Quick Links</h4>
<ul>
<li><a href="./register.html">Register</a></li>
<li><a href="./about.html">About Us</a></li>
<li><a href="./contact.html">Contact Us</a></li>
</ul>
</div>
<h4>Connect</h4>
<div class="social">
<a href="https://www.facebook.com/pradeep.bhandari.00?mibextid=ZbWKwL"
target="_blank"><i
class='bx bxl-facebook'></i></a>
<a
href="https://instagram.com/pr.dip.222?igshid=OGQ5ZDc2ODk2ZA=="
target="_blank"><i
class='bx bxl-instagram'></i></a>
20
<a href="https://x.com/pr_dip222?t=QEjhiouu4DWJqAnS9795rA&s=09"
target="_blank"><i
class='bx bxl-twitter'></i></a>
<a href="https://www.linkedin.com/in/pradeep-bhandari-
90546a29b?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medi
um=android_app"
target="_blank"><i class='bx bxl-linkedin'></i></a>
<a href="https://youtube.com/@itsuk19?si=d4_xw2-SYp8E9CDb" target="_blank"><i
class='bx bxl-youtube'></i></a>
</div>
</div>
</div>
</div>
<div class="end">
<p>Copyright © 2023 Go Easytrip All Rights Reserved.<br>Website developed by:
PRADEEP SINGH AND NIKITA RAWAT
</p>
</div>
</section>
</body>
</html>
21
Website Contact Body …..
<body class="contactbody">
<nav>
<ul class="navbar">
<li>
<a href="./index.html">Home</a>
<a href="./index.html#locations">Locations</a>
<a href="./index.html#package">Packages</a>
<a href="./contact.html">Contact Us</a>
</li>
</ul>
</nav>
<section class="contact">
<div class="contact-form">
<h1>Contact <span>Us</span></h1>
<p>We are always out there to help you! Fill out the form given below and get
a reply from us within 2 business days.</p>
<form action="">
<input type="text" name="myname" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your E-mail" required>
<input type="text" name="subject" placeholder="What brings you here?"
required>
<textarea name="message" cols="30" rows="10" placeholder="Your Message"
required></textarea>
<input type="submit" value="Submit" class="submit-btn">
</form>
</div>
</section>
22

<section class="footer">
<div class="foot">
<div class="footer-content">
<h4>Quick Links</h4>
<ul>
<li><a href="./register.html">Register</a></li>
<li><a href="./about.html">About Us</a></li>
<li><a href="./contact.html">Contact Us</a></li>
</ul>
</div>
<h4>Connect</h4>
<div class="social">
target="_blank"><i class='bx bxl-facebook'></i></a>
<a href="https://instagram.com/pr.dip.222?igshid=OGQ5ZDc2ODk2ZA=="
target="_blank"><i class='bx bxl-instagram' ></i></a>
target="_blank"><i class='bx bxl-twitter' ></i></a>
um=android_app" target="_blank"><i class='bx bxl-linkedin' ></i></a>
class='bx bxl-youtube' ></i></a>
</div>
</div>
</div>
</div>
<div class="end">
<p>Copyright © 2023 Go Easytrip All Rights Reserved.<br>Website developed by:
PRADEEP SINGH AND NIKITA RAWAT</p>
</div>
</section>
</body>
</html>
23
Website Location Body….
<body class="location-body">
<nav>
<ul class="navbar">
<li>
</li>
</ul>
</nav>
<section class="location-section">
<div class="location-heading">
<h1>Discover The <span>Beautiful World</span></h1>
</div>
<div class="location-detail" id="Rishikesh">
<h1>Rishikesh</h1>
<div class="stars">
<a href="#"><i class='bx bxs-star'></i></a>
</div>
<p>Rishikesh is a city in India’s northern state of Uttarakhand, in the
Himalayan foothills beside the Ganges River. The river is considered holy, and
the city is renowned as a center for studying yoga and meditation. Temples and
ashrams (centers for spiritual studies) line the eastern bank around Swarg
Ashram, a traffic-free, alcohol-free and vegetarian enclave upstream from
Rishikesh town</p>
<div class="location-img">
<img src="./files/t1.jpg" alt="">
</div>
</div>
24
<div class="location-detail" id="Haridwar">
<h1>Haridwar</h1>
<div class="stars">
<a href="#"><i class='bx bxs-star-half'></i></a>
</div>
<p>Haridwar is an ancient city and important Hindu pilgrimage site in North
India's Uttarakhand state, where the River Ganges exits the Himalayan
foothills. The largest of several sacred ghats (bathing steps), Har Ki Pauri
hosts a nightly Ganga Aarti (river-worshipping ceremony) in which tiny
flickering lamps are floated off the steps. Worshipers fill the city during
major festivals including the annual Kanwar Mela. </p>
</div>
</div>
<div class="location-detail" id="Jim Corbett National Park">

<h1>Jim Corbett National Park</h1>
<div class="stars">
</div><p>Jim Corbett National Park is a forested wildlife sanctuary in
northern India’s Uttarakhand State. Rich in flora and fauna, it’s known for
its Bengal tigers. Animals, including tigers, leopards and wild elephants,
roam the Dhikala zone. On the banks of the Ramganga Reservoir, the Sonanadi
zone is home to elephants and leopards, along with hundreds of species of
birds</p>
</div>
</div>
25
<div class="location-detail" id="Devprayag">
<h1>Devprayag</h1>
<div class="stars">
</div>
<p>Devprayag is a town and a nagar panchayat, near New Tehri city in Tehri
Garhwal District in the state of Uttarakhand, India, and is the final one of
the Panch Prayag of Alaknanda River where Alaknanda meets the Bhagirathi river
and both rivers thereafter flow on as the Ganges river or Ganga.</p>
</div>
</div>
<div class="location-detail" id="Nainital">

<h1>Nainital</h1>
<div class="stars">
</div>
<p>Nainital is a Himalayan resort town in the Kumaon region of India’s
Uttarakhand state, at an elevation of roughly 2,000m. Formerly a British hill
station, it’s set around Nainital Lake, a popular boating site with Naina Devi
Hindu Temple on its north shore. A cable car runs to Snow View observation
point (at 2,270m), with vistas over the town and mountains including Nanda
Devi, Uttarakhand’s highest peak.</p>
</div>
</div>
<div class="location-detail" id="Mussoorie">
26
<h1>Mussoorie</h1>
<div class="stars">
</div>
<p>Mussoorie, also known as Queen of the Hills, is among the most popular hill
stations of the country. A Britisher, Captain Frederick Young, accompanied by
an official named FJ Shore, had climbed up the hill from the Doon valley in
1827 and found this ridge offering great views and a salubrious climate. This
visit laid the foundation for this grand hill station. Mussoorie is a hill
station and a municipal board, near Dehradun city in the Dehradun district of
the Indian state Uttarakhand The hill station is in the foothills of the
Garhwal Himalayan range</p>
</div>
</div>
<div class="location-detail" id="Surkanda Devi Temple">

<h1>Surkanda Devi Temple</h1>
<div class="stars">
</div>
<p>Surkanda Devi is a Hindu temple near Kanatal, Uttarakhand, India. It is at
an altitude of about 2756 metres lies close to nearby hill stations of
Dhanaulti (8 kilometres [5.0 mi]) and Chamba (22 kilometres [14 mi]) walking
distance of approx 3 kilometres [1.9 mi] from Kaddukhal, the place where
vehicles are parkedIt is surrounded by dense forests and affords a scenic view
of the surrounding region including the Himalayas to the north, and certain
cities to the south (e.g., Dehradun, Rishikesh) The Ganga Dusshera festival is
celebrated every year between May and June and attracts a lot of people. This
is a temple which is situated among the trees of rounslii. It is covered with
fog most of the time of the year.</p>
27
</div>
</div>
<div class="location-detail" id="Munsiyari">

<h1>Munsiyari</h1>
<div class="stars">
</div>
<p>Munsiyari is the name of the sub-division headquarters, a conglomeration of
revenue villages and it also refers to the entire region as Munsiyari Tehsil
and Sub Division in the Pithoragarh District in the hill-state of Uttarakhand,
India.</p>
</div>
</div>
</section>
28
Website About Body…..
<body class="aboutbody">
<nav>
<ul class="navbar">
<li>
</li>
</ul>
</nav>
<section class="about">
<div class="main">
<div class="abt-text">
<h1>About <span>Us</span></h1>
<p>thank you For Visit</p>
class="connectbtn" target="_blank">Connect with me!</a>
<div class="connect-section">
<div class="social-icons">
target="_blank"><i class='bx bxl-facebook'></i></a>
target="_blank"><i class='bx bxl-instagram' ></i></a>
target="_blank"><i class='bx bxl-twitter' ></i></a>
um=android_app" target="_blank"><i class='bx bxl-linkedin' ></i></a>
class='bx bxl-youtube' ></i></a>
</div>
</div>
</div>
</div>
</section>
29
Website Registration Body….
<body class="register-body">
<nav>
<ul class="navbar">
<li>
</li>
</ul>
</nav>
<section class="registration">
<div class="register-form">
<h1>Register <span>Here</span></h1>
<form action="" onsubmit="return validateform()">
<input type="text" name="myname1" placeholder="Name" id="name" required>

<input type="email" name="myemail" placeholder="Email-Id" id="" required>
<input type="tel" name="myphone" placeholder="Phone No." id="phonenum"
required>
<input type="number" name="myage" placeholder="Age" id="" required>
<h4>Gender</h4>
<input type="radio" name="mygender" id="" required> Male

<input type="radio" name="mygender" id=""> Female
<h4>Departure</h4>
<input type="datetime-local" name="departuredate" id="" required>
<h4>Return</h4>
<input type="datetime-local" name="returndate" id="" required>
<h4>Travel Destination</h4>
<input type="checkbox" name="td" id=""> Rishikesh
<input type="checkbox" name="td" id=""> Haridwar
<input type="checkbox" name="td" id=""> Jim Corbett National Park

<input type="checkbox" name="td" id=""> Devprayag
30
<input type="checkbox" name="td" id=""> Nainital

<input type="checkbox" name="td" id=""> Mussoorie
<input type="checkbox" name="td" id=""> Surkanda Devi Temple

<input type="checkbox" name="td" id=""> Munsiyari
<br> <br>
<h4>Package</h4>
<input type="radio" name="locations" id="loc1" required> Bronze

<input type="radio" name="locations" id="loc1"> Silver
<input type="radio" name="locations" id="loc1"> Gold
<input type="radio" name="locations" id="loc1"> Platinum
<br> <br>
<input type="checkbox" name="t&c" id="" checked required> I accept the Terms &
Conditions.
<br> <br>
<input type="submit" value="Submit" class="submitbtn">
</form>
</div>
</section>
31
Design Of Website (CSS)
/* Home page */
.banner{
width:100%;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.banner video{
position: absolute;
top: 0;
left: 0;
object-fit: cover;
width: 100%;
height: 100%;
pointer-events: none;
}
.content{
position: relative;
z-index: 1;
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(1, 0, 5, 0.3),rgba(4, 1, 17, 0.3));
32
nav{
width: 100%;
position: fixed;
background-color: rgb(21, 74, 74);
box-shadow: 5px 5px 30px rgba(0, 0, 0, 15%);
display: flex;
justify-content: space-between;
}
nav .logo{
width: 60px;
margin: 2vh;
margin-left: 8%;
}
nav ul li{
list-style: none;
display: inline-block;
margin-left: 40px;
}
.navbar{
display: flex;
margin-right: 4vh;
}
.navbar a{
color: white;
font-size: 18px;
padding: 10px 22px;
border-radius: 4px;
font-weight: 500;
text-decoration: none;
transition: ease 0.40s;
}
.navbar a:hover,.navbar a.active{

background: white;
color: black;
box-shadow: 5px 10px 30px rgb(85 85 85 / 20%);
border-radius: 5px;
nav ul li a{
color: rgb(255, 255, 255);
33
font-size: 17px;
}
.title{
/* display: inline-block; */
font-size: 4vh;
color: rgb(255, 255, 255);
padding: 14px 17px;
margin-top: 32vh;
text-align: center;
vertical-align: center;
}
.title h1{
font-size: 10vh;
text-shadow: 2px black;
}
.title h1:hover{
color:transparent;
-webkit-text-stroke: 1px white;
.button{
margin-top:5vh;
font-size: 25px;
padding: 10px 30px;
color: rgb(21, 74, 74);
/* background-color:rgb(164, 44, 44); */
background-color: white;
border-radius: 20px;
}
.button:hover{
transform: scale(1.1);
color: white;
/* border: 2px solid rgb(42, 37, 68); */
box-shadow: 5px 10px 30px rgba(0, 0, 0, 0.4);
padding: 10px 30px;
}
34
/* Services */
.text h2{
font-size: 40px;
font-weight: 650;
margin-top: 40px;
margin-bottom: 10px;
line-height: 2;
text-align: center;
}
.rowitems{
display: grid;
grid-template-columns: repeat(auto-fit,minmax(100px,auto));
gap: 25px;
text-align: center;
margin-top: 20px;
margin-left: 30px ;
margin-right: 30px;
margin-bottom:10px ;
}
.container-box{
border: 1px solid #d3d3d3;
border-radius: 5px;
padding: 50px 10px;
transition: all 0.7s ease 0s;
cursor: pointer;
}
.container-image img{
height: 100px;
width: 100px;
padding: 10px;
}
.container-box h4{
font-size: 20px;
margin-bottom: 5px;
font-weight: 550;
35
}
.container-box p{
font-size: 16px;
color: #808080;
}
.container-box:hover{
transform: translateX(3px);
box-shadow: 5px 20px 50px rgba(78, 78, 78, 0.1);
border: 1px solid transparent;
border-radius: 0px;
}
/* Packages */
.package-title{
text-align: center;
}
.package-title h2{
font-size: 40px;
font-weight: 650;
padding-top: 75px;
padding-bottom: 10px;
line-height: 2;
}
.package-content{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.image{
position: relative;
transition: all 0.3s cubic-bezier(0.445,0.05,0.55,0.95);
36
cursor: pointer;
filter: brightness(95%);
}
.image img{
width: 100%;
height: 500px;
}
.image h3{
color: white;
position: absolute;
font-size: 30px;
font-weight: 600;
text-align: center;
top: 10px;
right: 20px;
}
.dest-content{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top: 15px;
}
.location h4{
font-size: 25px;
letter-spacing: 1px;
font-weight: 600;
margin-bottom: 2px;
}
.pac-details li{
font-size: 19px;
color: #4c4c4c;
margin-left: 15px;
margin-bottom: 2px;
list-style-type: disc;
}
.image:hover{
}
37
/* Locations */
.location-content{
display: flex;
flex-wrap: wrap;
}
.col-content{
position: relative;
filter:brightness(95%);
transition: all 0.3s cubic-bezier(0.445,0.05,0.55,0.95);
.col-content img{
height: 500px;
width: 100%;
.col-content h5{
position: absolute;
font-size: 25px;
color: white;
font-weight: 500;
left: 20px;
bottom: 105px;
cursor: pointer;
}
38
.col-content p{
position: absolute;
font-size: 20px;
color: white;
left: 20px;
bottom: 80px;
cursor: pointer;
}
.col-content:hover{
cursor: pointer;
}
/* Newsletter */
.newsletter{
display: flex;
flex-wrap: wrap;
}
.newstext h2{
margin-top: 100px;
font-size: 38px;
}
.newstext p{
font-size: 20px;
color: #4c4c4c;
}
39
.newsletter form{
margin-top: 100px;
width: 100%;
position: relative;
}
.newsletter form input:first-child{

width: 300px;
font-size: 17px;
outline: none;
border: none;
padding: 20px 150px 20px 30px;
box-shadow: 5px 10px 30px rgb(85 85 85 / 20%);
}
.newsletter form input:last-child{

position: absolute;
outline: none;
color: white;
padding: 14px 30px;
cursor: pointer;
font-size: 17px;
font-weight: 450;
top: 6px;
right: 6px;
}
.newsletter form input:last-child:hover{

border: 2px solid rgb(21, 74, 74);
color: rgb(21, 74, 74);
}
40
/* Footer */
.footer{
margin-top: 80px;
}
.foot{
padding: 20px 0;
}
.footer-content{
display: flex;
flex-wrap: wrap;
.footlinks h4{
margin-top: 30px;
font-size: 20px;
font-weight: 600;
color: white;
position: relative;
}
.footlinks h4::before{
content: "";
position: absolute;
height: 2px;
width: 70px;
left: 0;
bottom: -7px;
background: white;
}
.footlinks ul li{
}
.footlinks ul li a{
font-size: 17px;
color: #dddddd;
display: block;
}
.footlinks ul li a:hover{
transform: translate(6px);
color: white;
}
.social a{
font-size: 25px;
41
margin: 4px;
height: 40px;
width: 40px;
color: rgb(21, 74, 74);
display: inline-flex;
}
.social a:hover{
}
.end{
text-align: center;
padding-top: 60px;
padding-bottom: 12px;
}
.end p{
font-size: 15px;
color: white;
font-weight: 300;
}
42
/* About Us */
.aboutbody{
background-color: #191919;
}
.about{
width: 100%;
padding: 78px 0px;
}
.about img{
height: auto;
width: 400px;
}
.abt-text{
width: 500px;
}
.abt-text h1{
font-size: 70px;
color: white;
}
.abt-text h1 span{
color: #fc0050;
}
.abt-text p{
color: white;
font-size: 24px;
line-height: 30px;
}
.main{
width: 1130px;
max-width: 95%;
margin: 0 auto;
display: flex;
}
.connectbtn{
background-color: #fc0050;
font-size: 18px;
color: white;
font-weight: bold;
43
padding: 13px 30px;
}
.connectbtn:hover{
background-color: transparent;
border: 2px solid #fc0050;
}
.connect-section{
margin-top: 26px;
}
.social-icons a{
height: 40px;
width: 40px;
margin: 4px;
font-size: 30px;
color: #101010;
display: inline-flex;
}
.social-icons a:hover{
}
44
/* Registration Form */
.register-body{
background-repeat: no-repeat;
background-size: cover;
.registration{
padding: 110px 30%;
height: 100%;
min-height: 100vh;
}
.register-form h1{
font-size: 80px;
color: white;
}
.register-form h1 span{
color: #fc0050;
}
.register-form{
color: white;
font-size: 20px;
}
.register-form form input{

color: white;
padding: 17px;
font-size: 20px;
outline: none;
border: none;
}
.register-form h4{
font-size: 22px;
font-weight: 500;
margin-top: 20px;
color: #fc0050;
}
45
.register-form form .submitbtn{
background-color: #fc0050;
font-size: 27px;
font-weight: 600px;
width: 220px;
cursor: pointer;
}
.register-form form .submitbtn:hover{

border: 2px solid #fc0050;
background-color: transparent;
}
46
.location-body{
color: white;
}
.location-section{
padding: 110px;
height: 100%;
min-height: 100vh;
}
.location-heading h1{
margin-top: 20px;
font-size: 60px;
}
.location-heading h1 span{
color: #fc0050;
}
.location-detail h1{
padding-top: 60px;
color: #fc0050;
font-size: 40px;
}
.location-detail p{
font-size: 20px;
margin-top: 40px;
}
.location-img img{
height: 400px;
width: 400px;
margin-top: 30px;
}
.stars i{
font-size: 20px;
color: rgb(197, 167, 44);
}
47
UNIT 3
Purpose Of This Website
➢ Cost effective Multi-Platform Development:

A single batch of code can be used across platforms, devices and different
markets, this is an advantage because it results in lower development and
maintenance costs over the web site or web application's lifetime,
enabling you to use your resources elsewhere. Current best practice for
cross platform (e.g. IOS and Android) application development is a
'hybrid' approach, whereby web standards are followed within a native
application 'wrapper' that can be placed in the iOS or Android store.
➢ Good page ranking:
If the foundation of a website is not semantically accurate (i.e. unreadable,

non-standard based code) then the page itself will not attain a good rank
within search engines. No amount of Content Marketing in conjunction
with Search Engine Optimisation (SEO) will make a difference to rankings
if your page is not well structured HTML, easily readable by the Search
Engine, in a logical document structure. HTML5's new elements can be
relied on when sites are being re-indexed on search engines
48
➢ Offline Browsing:
In a similar way that 'apps' can be used offline, without an internet

connection, HTML5 supports local storage of web application code and
content, through the offline application cache.
➢ Consistency across multiple browsers:
Not all browsers support all web pages or web applications, however, the
implementation of HTML5 and CSS3 helps the designer to create a
compatible site or system within all browsers.
➢ Better mobile access to Business Intelligence:
Future development of HTML5 applications may lead to better access to

business intelligence as all devices that are compatible with HTML5 will
have the same ability to collect, collate and use data using standard (cross
device) browser based analytics tools.
➢ Extension of video to a wide range of platforms:
According to TechCrunch nearly two-thirds of web video was already

encoded for HTML5 in 2010, and one of the biggest benefits for marketers
now is that HTML5 has native video support and can be directly built in to
the supporting browsers
➢ Geolocation:
HTML5 supports geolocation. Once a user opts to share their location an

HTML5 application can use the user's location. This can be of primary
importance when developing location based services or apps.
49
➢ A better user experience:
HTML5 offers a wider range of design and presentation tools across media
types, giving the developers greater scope to produce a better web sites
and web applications.
50
Conclusion
HTML5 and CSS3 represent numerous opportunities in web

development for businesses that develop and deploy online content
and web applications. Overall, by using both of these tools in your
businesses' web development you can optimise your users' web
experience, provide a solid foundation for your SEO and content
marketing strategy and significantly reduce your cross-platform
web development and support costs whilst increasing your reach
and optimising web experience.
These Website Are More Attractive & More Responsive.
51
52

Tour Management File - 1

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tour Management File - 1

Uploaded by

Copyright:

Available Formats

A Minor Project Report On …

TOUR MANAGEMENT WEBSITE WITH

SUBMITED IN THE PARTIAL FULLFILLMENT OF THE

THE DEPARTMENT OF COMPUTER SCIENCE & ENGNEERING

Head of department of Department of Computer Science & Engineering,

At the end, heartily thanks the technical staff of the Department.

HTML (Hypertext Markup Language) is the standard language used to

Tour management, setting objectives is important to ensure a

o Provide exceptional customer service throughout the entire

o Create a customized itinerary that caters to the interests

o Ensure seamless logistics, including transportation,

o Maintain a high level of safety and security for all tour

o Offer engaging and informative guided tours at each

o Deliver a unique and authentic travel experience,

o Establish strong partnerships with local vendors and

o Manage the tour budget effectively, optimizing resources

o Offer flexibility and adaptability to accommodate

o Foster sustainable and responsible tourism practices,

o Provide support and assistance to participants throughout

o Continuously evaluate and improve tour operations based

1. Structure Of Index Directory………………………………………..

1. Purpose Of This Website……………………………………………

➢ What Do Web Developers Do?

The client could be a tech company, an organization, or a government.

HTML can embed programs written in a scripting language such as JavaScript,

<h1>My First Heading</h1>

What Is Vendors File?

Parts manufacturers are vendors of parts to other manufacturers that assemble

Fig: Design Of Website Using (HTML)

<section class="locations" id="locations">

<a href="./locations.html#Rishikesh" target="_blank">

<a href="./locations.html#Haridwar" target="_blank">

<a href="./locations.html#Jim Corbett National Park" target="_blank">

<a href="./locations.html#Mussoorie" target="_blank">

<a href="./locations.html#port-Surkanda Devi Temple" target="_blank">

<a href="./locations.html#Munsiyari" target="_blank">

<section class="package" id="package">

<div class="location-detail" id="Jim Corbett National Park">

<div class="location-detail" id="Nainital">

<div class="location-detail" id="Surkanda Devi Temple">

<div class="location-detail" id="Munsiyari">

<input type="text" name="myname1" placeholder="Name" id="name" required>

.navbar a:hover,.navbar a.active{

.newsletter form input:first-child{

.newsletter form input:last-child{

.newsletter form input:last-child:hover{

.register-form form input{

.register-form form .submitbtn:hover{

Purpose Of This Website

➢ Cost effective Multi-Platform Development:

➢ Good page ranking:

If the foundation of a website is not semantically accurate (i.e. unreadable,

In a similar way that 'apps' can be used offline, without an internet

➢ Consistency across multiple browsers:

➢ Better mobile access to Business Intelligence:

Future development of HTML5 applications may lead to better access to

➢ Extension of video to a wide range of platforms: