SYNOPSIS

B. Sc. (Voc.
Hons) COMPUTER
APPLICATION
ON JOB TRAINING(Report)
Project on
“WEB DEVELOPMENT”
Submitted By Name: RUPESH TIRKEY

Class Roll Number: 1304
Registration Number: 21SXC047887
Examination Roll Number: 21VBCA047887
Semester: VI
Session: 2021-2024
ACKNOWLEDGEMENT
I, RUPESH TIRKEY would like to express my sincere gratitude to my subject
teacher Mr. Surya Narayan prasad & Internship program instructor Mr. Sarju
Kumar Sharma for providing their valuable guidance, comments and suggestions
throughout the course of the assignment. I would specially thank them for
constantly motivating me to work harder providing me the assignment samples,
which have made it possible for me to work dedicatedly and provided me with
required information whenever needed.
I would like to thank my parents Mrs. Reena Devi & Mr. Dinesh Tirkey for their
continuous guidance and help.
Name: RUPESH TIRKEY

B. Sc. (Hons.): CAPP (SEC B)
Class Roll No: 1304
Exam Roll No: 21VBCA047887
Session: 2021-24
CERTIFICATE
This is to certify that this “ON JOB TRAINING( Internship program ) ” embodies
all the efforts and work done by Mr. RUPESH TIRKEY bearing Class Roll Number
1304 , Registration Number: 21SXC04887 and Examination Roll Number :
21VBCA047887 , student of class B.Sc.( Voc. Honours) Computer Application of
St. Xavier college, Ranchi, done from a private firm “REFRESH INFRATECH PVT.
Ltd.” Under the guidance of Mr. Sarju Kumar Sharma in partial fulfillment for
the purpose of the end semester practical examination.
(Internal Examiner) (External Examiner)

Mr. Sarju Kumar Sharma
(Signature & stamp)
CONTENTS
• Company Introduction
• Project on Web Developing
• Project Details
• Tools and Software Required
• Source Codes in HTML
• Source codes in CSS
• Source codes in PHP
• Website Designs
• Declaration
COMPANY INTRODUCTION
ABOUT : Refresh Infratech established in Lalpur, Ranchi the heart

of city is a hub of various companies and educational institution .
They are committed to deliver quality driven world class software
solutions at affordable price with art of various technology. They
provide range of products and services deep domain expertise
close knit associated with leading technologies, the origin of
company is deeply rooted in the software development
technology. Refresh Infratech provides designing and developing
software solutions for a wide range of commercial and scientific
applications.
Refresh Infratech services is leading provider in software

development web development mobile app development
management, system account and inventory management. It
provide complete end to end solutions for the various companies
and clients. Refresh Infratech with expert technical experts has
world class technology. They have team of highly skilled dedicated
professional have experience in multiple technologies having the
capabilities to deliver the projects in given deadline with accuracy,
they believe in providing quality services to our clients. They
specialized in designing and developing highly interactive software
app and website.
PROJECT ON WEB DEVELOPING
OVERVIEW : Web development is the process of building and

maintaining websites and web applications. It encompasses a
range of tasks, including web design, content creation, client-side
scripting, server-side scripting, network security configuration, and
database management.
Here are some key components and concepts in web

development:
1. HTML (Hypertext Markup Language): HTML is the standard

markup language used to create web pages. It provides the
structure for web content by using tags to define elements
such as headings, paragraphs, images, links, and more.
2. CSS (Cascading Style Sheets): CSS is used to style the

presentation of HTML elements. It allows developers to
control the layout, colors, fonts, and other visual aspects of a
website.
3. JavaScript: JavaScript is a programming language that adds

interactivity and dynamic behavior to web pages. It is
commonly used for tasks such as form validation, DOM
manipulation, and creating interactive elements like sliders,
dropdown menus, and accordions.
4. Backend Development: Backend development involves
building the server-side of web applications. This includes
writing code that runs on the server, handles requests from
clients, interacts with databases, and generates dynamic
content to be sent back to the client's browser. Common
backend technologies include languages like Python, Ruby,
Java, PHP, and frameworks like Node.js, Django, Ruby on Rails,
and Laravel.
5. Frontend Development: Frontend development focuses on

building the user interface and client-side functionality of
web applications. It involves creating web pages that users
interact with directly in their web browsers. Frontend
technologies include HTML, CSS, JavaScript, and
frameworks/libraries like React.js, Angular, Vue.js, and
Bootstrap.
6. Responsive Web Design: With the proliferation of mobile

devices, responsive web design has become crucial. It
involves designing websites that adapt and respond to
different screen sizes and devices, ensuring a consistent user
experience across desktops, laptops, tablets, and
smartphones.
7. Web Accessibility: Web accessibility ensures that websites

and web applications are usable by people with disabilities.
This involves adhering to accessibility standards and
guidelines, making content perceivable, operable, and
understandable for all users, regardless of disabilities.
8. Web Security: Web security is essential for protecting

websites and web applications from various threats, including
hacking, data breaches, and malicious attacks. It involves
implementing security measures such as encryption,
authentication, authorization, input validation, and secure
coding practices.
9. Content Management Systems (CMS): CMS platforms like

WordPress, Joomla, and Drupal provide tools and frameworks
for creating, managing, and publishing digital content on the
web without requiring extensive coding knowledge.
10. Version Control: Version control systems like Git are used
to track changes to codebases, collaborate with other
developers, and manage different versions of a project
effectively.
Web development is a dynamic field that continuously evolves

with new technologies, frameworks, and best practices. Staying
updated with the latest trends and tools is essential for web
developers to create modern, efficient, and user-friendly websites
and web applications.
PROJECT DETAILS
TOPIC : TRAVEL WEBSITE
• Project Scope and Objectives: Defining the purpose of

the website (e.g., booking flights, hotels, tour
packages etc.).
Determining the target audience and their needs (e.g.,
budget travelers, luxury travelers, adventure seekers,
families, etc.).
• Design and User Experience: Creating a visually
appealing and user-friendly design that reflects the
travel theme and brand identity.
The website is responsive and optimized for various devices
and screen sizes.
Implements intuitive navigation and user flow to make it
easy for visitors to find information and complete tasks like
booking flights or hotels.
There’s high-quality images, videos, and interactive
elements to showcase destinations and attractions.
• Booking System: Integrate a secure booking system for

flights, hotels, rental cars, and other travel services.
This may involve APIs from airlines, hotels, and travel
agencies.
1. Search and Filter: Implement advanced search and
filtering options to help users find relevant travel options
based on criteria such as destination, dates, budget, and
preferences.
2. User Accounts: Allow users to create accounts to
manage bookings, save preferences, and receive
personalized recommendations.
3. Reviews and Ratings: Enable users to leave reviews and
ratings for hotels, attractions, and other services to help
others make informed decisions.
4. Itinerary Planning: Provide tools for users to create and
customize travel itineraries, including adding attractions,
activities, and accommodation.
5. Multilingual Support: If targeting an international
audience, consider providing multilingual support to
cater to users from different regions.
6. Payment Gateway Integration: Integrate secure payment
gateways to facilitate online transactions for bookings
and purchases.
• Content Management:
A content management system (CMS) to easily manage

and update website content, including travel guides,
blog posts, deals, and promotions.
• Testing and Quality Assurance:
Conducts thorough testing of the website across

different browsers, devices, and operating systems to
ensure compatibility and functionality.
Perform usability testing to identify and address any
usability issues or barriers to user engagement.
• Maintenance and Support:
Plan for ongoing maintenance and support to keep the

website running smoothly, address technical issues, and
update content and features as needed.
By considering these details and factors, one can create

a successful travel website that provides value to users
and helps them plan and book their dream vacations
with ease.
TOOLS & SOFTWARES REQUIRED
Languages used in this project :
• HTML
• CSS
• PHP
Code Editor used :
• VS Code
Database Connectivity :
• XAMP(My Sql PHP Admin)
Images and fonts are used from the online

resources .
SOURCE CODES IN 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>Adventure Awaits</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=Poppi
ns: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>
<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="
Adventure Awaits " onclick="location.href='./index.html';">
<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>ADVENTURE AWAITS</h1>
<p> Make your trip with us and explore around the world with the most
affordable packages!</p>
<a href="./register.html" class="button">Register Now!</a>
</div>
</div>
</div>

<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>
<a href="Services.html#flight" class="readmore">Read More</a>
<p>Arrival and Departure</p>
</div>
<img src="./files/2a.jpg" alt="Food Services">
</div>
<h4>Food Services</h4>
<a href="Services.html#food" class="readmore">Read More</a>
<p>Catering</p>
</div>
<img src="./files/3a.jpg" alt="Travel Services">
</div>
<h4>Travel Services</h4>
<a href="Services.html#travel" class="readmore">Read More</a>
<p>Pick-up/drop</p>
</div>
<img src="./files/4a.jpg" alt="Hotel Services">
</div>
<h4>Hotel Services</h4>
<a href="Services.html#hotel" class="readmore">Read More</a>
<p>Check-in/out</p>
</div>
</div>
</div>
</section>


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

content">
<img src="./files/Kerela.jpg" alt="">
<h5>India</h5>
<p>Kashmir</p>
</div></a>
<a href="./locations.html#istanbul" target="_blank"><div class="col-

content">
<img src="./files/l2.jpg" alt="">
<h5>Turkey</h5>
<p>Istanbul</p>
</div></a>
<a href="./locations.html#paris" target="_blank"><div class="col-

content">
<h5>France</h5>
<p>Paris</p>
</div></a>
<a href="./locations.html#bali" target="_blank"><div class="col-

content">
<h5>Indonesia</h5>
<p>Bali</p>
</div></a>
<a href="./locations.html#dubai" target="_blank"><div class="col-
content">
<h5>United Arab Emirates</h5>
<p>Dubai</p>
</div></a>
<a href="./locations.html#geneva" target="_blank"><div class="col-

content">
<h5>Switzerland</h5>
<p>Geneva</p>
</div></a>
<a href="./locations.html#port-blair" target="_blank"><div class="col-

content">
<h5>Andaman & Nicobar</h5>
<p>Port Blair</p>
</div></a>
<a href="./locations.html#rome" target="_blank"><div class="col-

content">
<h5>Italy</h5>
<p>Rome</p>
</div></a>
</div>
</section>

<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>
<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>
<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>
<li class="footer-list-item">
<ion-icon name="call-outline" aria-hidden="true"></ion-icon>
<a href="tel:+0123456789" class="contact-link">+91

6206196808</a>
</li>
<ion-icon name="mail-outline" aria-hidden="true"></ion-icon>
<a href="mailto:support@gmail.com" class="contact-

link">tirkeyrupesh920@gmail.com</a>
</li>
<ion-icon name="maps" aria-hidden="true"></ion-icon>
<a
href="https://www.google.com/maps/place/St.+Xavier's+College,+Ranchi/@
23.3679569,85.3237191,17z/data=!3m1!4b1!4m6!3m5!1s0x39f4e10f23a297
11:0xff6ba51098fa3dca!8m2!3d23.367952!4d85.326294!16zL20vMDgyZmoy
?entry=ttu"
target="_blank" class="link">google maps</a>
</li>
</ul>
</div>
<h4>Connect</h4>
<div class="social">
<a href=" https://www.instagram.com/tirkey_why/"

target="_blank"><i class='bx bxl-instagram' ></i></a>
</div>
</div>
</div>
</div>
<div class="end">
<p>Copyright © 2024 Adventure Awaits All Rights Reserved.<br>Website
developed by: Rupesh Tirkey</p>
</div>
</section>
</body>
</html>
• #location.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Travel Destinations</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link
rel="stylesheet">
</head>
<body class="location-body">
<nav>
<img src="./files/logo.png" class="logo" alt="Logo" title=" Adventure
Awaits " onclick="location.href='./index.html';">
<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="location-section">
<div class="location-heading">
<h1>Discover The <span>Beautiful World</span></h1>
</div>
<div class="location-detail" id="kashmir">
<h1>Kashmir</h1>
<div class="stars">
<a href="#"><i class='bx bxs-star'></i></a>
</div>
<p>Heaven on Earth Kashmir is one of the most beautiful travel destinations
to visit in North India.
Nowhere in India you will behold the scenic landscapes, icy glaciers,
pristine lakes and lofty mountains as beautiful as Kashmir.
Serenity and Tranquility redefines itself from the ambiance of Kashmir. Be
it summer, Winter or Monsoon, every season has its own charm in Kashmir.
The numerous wonders of nature, culture, cuisines and rich history of
Kashmir will elevate your travel experience in Incredible India.</p>
<div class="location-img">
<img src="./files/t1.jpg" alt="">
</div>
<div class="book-now-link">
<a href="./register.html">book-now</a>
</div>
<div class="explore-packages-link">
</div>
<div class="location-detail" id="istanbul">

<h1>Istanbul</h1>
<div class="stars">
<a href="#"><i class='bx bxs-star-half'></i></a>
</div>
<p>Istanbul, that offers unique historical and cultural riches together has
hosted many different civilizations with its geography spread over two
continents. This unique city which is admired by its charming nature and the
attractive atmosphere is also the symbol of dynamic and modern city life.
Istanbul has a multicultural texture and a lively atmosphere that melts the past
and future in a single pot which provides a sense of universal history at every
step.</p>
</div>
</div>
</div>
<div class="location-detail" id="paris">

<h1>Paris</h1>
<div class="stars">
</div>
<p>Paris is a diverse and sophisticated city that appeals to the wealthy but
can also be enjoyed on a budget. In addition to the Eiffel Tower, Paris has
countless other gorgeous landmarks and monuments that add to the beauty
of the spacious boulevards and their charming cafes. French cuisine is also
world famous, and you can find some of the best of it in Paris. It has many
stunning sights that showcase impressive architecture and design, and these
places have become world-famous for their beauty.</p>
</div>
</div>
</div>
<div class="location-detail" id="bali">

<h1>Bali</h1>
<div class="stars">
</div>
<p>Bali's beauty goes way deeper than its beautiful appearances. Matching
Bali's natural wonders are its ever-growing choice of awesome
accommodations. From lavish resorts to affordable hostels, developers go all-
out to create outstanding, well-equipped and enjoyable places to stay. Private
villas can even be rented at unbelievably affordable prices. Many resorts and
hotels have splendid swimming and infinity pools, most of which are
attractions in themselves.</p>
</div>
</div>
</div>
<div class="location-detail" id="dubai">

<h1>Dubai</h1>
<div class="stars">
</div>
<p>Dubai is an ideal holiday destination for families, with theme parks,
beaches, Friday brunches and more to keep everyone happy. The famous Burj
Khalifa, the tallest building in the world, is well worth the entrance fee. Burj
Al-Arab, often touted as the world's only 7-star hotel, remains
underwhelming. Similarly, the Aquaventure Water Park at the Palms Atlantis
Hotel is not to be missed. Jumeriah Beach Residence is well established as
Dubai's most popular beachfront, and its close proximity to a whole host of
restaurants, cafes and shops make it more than worthy of its status.</p>
</div>
</div>
</div>
<div class="location-detail" id="geneva">

<h1>Geneva</h1>
<div class="stars">
</div>
<p>The charming city of Geneva comes with a plethora of attractions and
tremendous natural beauty that makes every traveler fall in love with it.
However, because of this overabundance of attractions, it becomes difficult for
the backpackers to determine where to go first. Most of them generally miss
out on all the best things that this fantastic city has to offer. The capital of
Switzerland and a beautiful lakeside city, Geneva is home to many
international organisations like the UN.</p>
</div>
</div>
</div>
<div class="location-detail" id="port-blair">

<h1>Port Blair</h1>
<div class="stars">
</div>
<p>Port Blair is an alluring destination for tourists as it includes a host of
attractive locales. There are shimmering but clean beaches, beaches that defy
the ferocity of sea and let tourists swim leisurely, relics of colonial power and
oppression, many must-go museums, libraries, coral reefs, and more.</p>
</div>
</div>
</div>
<div class="location-detail" id="rome">

<h1>Rome</h1>
<div class="stars">
</div>
<p>The capital of one of the most powerful ancient empires in the world,
Rome is a fascinating place that has inspired people to visit for millennia. With
incredible works of art, a leisurely pace of life and world-renowned cuisine,
the Eternal City is worth a visit at least once, though it would take a lifetime to
see all it has to offer.</p>
</div>
</div>
</div>
</section>

<div class="foot">
<ul>

6206196808</a>
</li>

</li>
<a
?entry=ttu"
</li>
</ul>
</div>
<h4>Connect</h4>
<a href="https://www.instagram.com/tirkey_why/"
</div>
</div>
</div>
</div>
<div class="end">
</div>
</section>
</body>
</html>
• #register.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Register Here</title>
<link
rel="stylesheet">
</head>
<body class="register-body">
<nav>
Awaits "
onclick="location.href='./index.html';">
<ul class="navbar">
<li>
</li>
</ul>
</nav>
<section class="registration">
<div class="register-form">
<h1>Register <span>Here</span></h1>
<form action="./db/register.php" method="post" 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" value="Male" required>
Male

<input type="radio" name="mygender" value="Female"> 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="travel_destination[]"
value="Kashmir"> Kashmir
value="Istanbul"> Istanbul
<input type="checkbox" name="travel_destination[]" value="Paris">
paris
<input type="checkbox" name="travel_destination[]" value="Bali">
Bali
value="Dubai"> Dubai
value="Geneva"> geneva
<input type="checkbox" name="travel_destination[]" value="port-
blair"> port-blair
value="Rome"> Rome

<br><br>
<input type="checkbox" name="terms_and_conditions" id=""

checked required> I accept the Terms &
Conditions.
<br><br>
<input type="submit" value="Submit" class="submitbtn">

</form>
</div>
</section>

<div class="foot">
<ul>
<ion-icon name="call-outline" aria-hidden="true"></ion-
icon>

6206196808</a>
</li>
<ion-icon name="mail-outline" aria-hidden="true"></ion-
icon>

</li>
<a
?entry=ttu"
</li>
</ul>
</div>
<h4>Connect</h4>
target="_blank"><i
class='bx bxl-instagram'></i></a>
</div>
</div>
</div>
</div>
<div class="end">
<p>Copyright © 2024 Adventure Awaits All Rights
Reserved.<br>Website developed by: Rupesh Tirkey</p>
</div>
</section>


<script>
function validateform() {
var tel = document.getElementById("phonenum").value;
if (tel.length < 10) {

alert("Phone number must be of atleast 10 digits!");
return false;
} else if (isNaN(tel)) {
alert("Phone number should not include character!");
return false;
}
return true;
}
</script>
</body>
</html>
• #contact.html
!DOCTYPE html>
<html lang="en">
<head>
<title>Contact Us</title>
<link
rel="stylesheet">
</head>
<body class="contactbody">
<nav>
<ul class="navbar">
<li>
</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="./db/contactUs.php" method="post">
<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>

<div class="foot">
<ul>

6206196808</a>
</li>

</li>
<a
?entry=ttu"
</li>
</ul>
</div>
<h4>Connect</h4>
</div>
</div>
</div>
</div>
<div class="end">
</div>
</section>
</body>
</html>
• #about.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>About Us</title>
<link
rel="stylesheet">
</head>
<body class="aboutbody">
<nav>
<ul class="navbar">
<li>
</li>
</ul>
</nav>
<section class="about">
<div class="main">
<img src="./files/tirkey.png" alt="My Photo">
<div class="abt-text">
<h1>About <span>Us</span></h1>
<p>Adventure Awaits is a travel website project developed by Rupesh
Tirkey using HTML, CSS and JavaScript.</p>
class="connectbtn" target="_blank">Connect with me!</a>
<div class="connect-section">
<div class="social-icons">
</div>
</div>
</div>
</section>


<div class="foot">
<ul>

6206196808</a>
</li>

</li>
<a
?entry=ttu"
</li>
</ul>
</div>
<h4>Connect</h4>
</div>
</div>
</div>
</div>
<div class="end">
</div>
</section>
</body>
</html>
• #services.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Thanks</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
text-align: center;
}
h1 {
color: #333;
}
p{
color: #555;
margin-bottom: 20px;
}
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h1>Thank You!</h1>
<p>This is Flight Services Page.</p>
<a href="../index.html" class="btn">Go to Home Page</a>
</div>
</body>
</html>
Source codes in CSS

#Style.CSS
*{
padding:0;
margin:0;
box-sizing:border;
font-family:'Poppins',sans-serif;
list-style: none;
scroll-behavior: smooth;
}
/* Home page */
.banner{
width:100%;
height: 100vh;
overflow: hidden;
display: flex;
}
.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));
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;
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;
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);
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;
}
/* Services */
.text h2{
font-size: 40px;
font-weight: 650;
margin-top: 40px;
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;
}
.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);
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{
}
/* Locations */
.location-content{
display: flex;
flex-wrap: wrap;
}
.book:hover:hover {
background-color: #ff6347; /* Change the background color to your preference */
color: #ffffff; /* Change the text color to your preference */
.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;
}
.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;
}
.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);
}
/* 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;
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;
}
/* 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;
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{
}
/* Contact Us */
.contactbody{
background-repeat: no-repeat;
background-size: cover;
.contact{
padding: 110px 30%;
height: 100%;
min-height: 100vh;
}
.contact-form h1{
font-size: 80px;
color: white;
}
.contact-form h1 span{
color:#fc0050;
}
.contact-form p{
color: white;
line-height: 30px;
font-size: 23px;
}
.contact-form form input,form textarea{

width: 100%;
padding: 17px;
border: none;
outline: none;
font-size: 20px;
color: white;
}
.contact-form form .submit-btn{

font-size: 27px;
font-weight: 600px;
width: 220px;
cursor: pointer;
.contact-form form .submit-btn:hover{

/* 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;
}
.register-form form .submitbtn{

font-size: 27px;
font-weight: 600px;
width: 220px;
cursor: pointer;
}
.register-form form .submitbtn:hover{

}
.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);
}
Source codes in PHP
• #contactUs.PHP
<?php
// Database connection parameters

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "adventure_awaits";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Process form submission

if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Retrieve form data
$name = $_POST["myname"];
$email = $_POST["email"];
$subject = $_POST["subject"];
$message = $_POST["message"];
// SQL to insert data into database

$sql = "INSERT INTO contact_us (name, email, subject, message) VALUES
('$name', '$email', '$subject', '$message')";
if ($conn->query($sql) === TRUE) {
header("Location: thanks.html");
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}
// Close connection
$conn->close();
?>


• #Register.PHP
<?php
$username = "root";
$password = "";
// Check connection
}

// Retrieve form data
$name = $_POST["myname1"];
$email = $_POST["myemail"];
$phone = $_POST["myphone"];
$age = $_POST["myage"];
$gender = $_POST["mygender"];
$departuredate = $_POST["departuredate"];
$returndate = $_POST["returndate"];
$travel_destination = implode(", ", $_POST["travel_destination"]);
$package = $_POST["package"];
$terms_and_conditions = isset($_POST["terms_and_conditions"]) ? 1 : 0;

$sql = "INSERT INTO registration_data (name, email, phone, age, gender,
departuredate, returndate, travel_destination, package,
terms_and_conditions)
VALUES ('$name', '$email', '$phone', '$age', '$gender',
'$departuredate', '$returndate', '$travel_destination', '$package',
'$terms_and_conditions')";
echo "New record created successfully";
// Redirect to thank you page
exit;
} else {
}
}
// Close connection
$conn->close();
?>





• #Thanks.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Thanks</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
height: 100vh;
}
.container {
text-align: center;
}
h1 {
color: #333;
}
p{
color: #555;
}
.btn {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h1>Thank You!</h1>
<p>Your form has been submitted successfully. We will contact you
soon.</p>
<a href="../index.html" class="btn">Go to Home Page</a>
</div>
</body>
</html>
WEBSITE DESIGN
DECLARATION
We hereby declare that the project on web

development entitled –“Travel Website”, which is being
submitted as Internship project of VI semester in
computer science to ST. XAVIER’s COLLEGE , RANCHI is
an authentic record of our genuine work under the
guidance of Mr. Sarju kumar Sharma who is the director
of a Software company named “REFRESH INFRATECH
PVT. LTD.” Located in Ranchi, Jharkhand.
Date: Rupesh Tirkey

29th March,2024

SYNOPSIS

Uploaded by

Document Information

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

SYNOPSIS

Uploaded by

Copyright:

Available Formats

B. Sc. (Voc.

Submitted By Name: RUPESH TIRKEY

Name: RUPESH TIRKEY

(Internal Examiner) (External Examiner)

ABOUT : Refresh Infratech established in Lalpur, Ranchi the heart

Refresh Infratech services is leading provider in software

OVERVIEW : Web development is the process of building and

Here are some key components and concepts in web

1. HTML (Hypertext Markup Language): HTML is the standard

2. CSS (Cascading Style Sheets): CSS is used to style the

3. JavaScript: JavaScript is a programming language that adds

5. Frontend Development: Frontend development focuses on

6. Responsive Web Design: With the proliferation of mobile

7. Web Accessibility: Web accessibility ensures that websites

8. Web Security: Web security is essential for protecting

9. Content Management Systems (CMS): CMS platforms like

Web development is a dynamic field that continuously evolves

TOPIC : TRAVEL WEBSITE

• Project Scope and Objectives: Defining the purpose of

• Booking System: Integrate a secure booking system for

A content management system (CMS) to easily manage

• Testing and Quality Assurance:

Conducts thorough testing of the website across

• Maintenance and Support:

Plan for ongoing maintenance and support to keep the

By considering these details and factors, one can create

Languages used in this project :

Code Editor used :

• XAMP(My Sql PHP Admin)

Images and fonts are used from the online

<div class="content" id="home">

<a href="./locations.html#kashmir" target="_blank"><div class="col-

<a href="./locations.html#istanbul" target="_blank"><div class="col-

<a href="./locations.html#paris" target="_blank"><div class="col-

<a href="./locations.html#bali" target="_blank"><div class="col-

<a href="./locations.html#geneva" target="_blank"><div class="col-

<a href="./locations.html#port-blair" target="_blank"><div class="col-

<a href="./locations.html#rome" target="_blank"><div class="col-

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

<a href="tel:+0123456789" class="contact-link">+91

<a href="mailto:support@gmail.com" class="contact-

<a href=" https://www.instagram.com/tirkey_why/"

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

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

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

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

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

<div class="location-detail" id="port-blair">

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

<a href="tel:+0123456789" class="contact-link">+91

<a href="mailto:support@gmail.com" class="contact-

<input type="checkbox" name="terms_and_conditions" id=""

<input type="submit" value="Submit" class="submitbtn">

<a href="tel:+0123456789" class="contact-link">+91

<a href="mailto:support@gmail.com" class="contact-