Government Polytechnic Gondia

Micro project
“Creating a Travel Website Using HTML & CSS”
Submitted to
Department of Information Technology
For Practical Work
CLIENT SIDE SCRIPTING LANGUAGE
Subject Code (22519)
Academy Year: 2022-23
Submitted By Group No:
Sr no. Name Enrollment no
01 Vaidya Pragati Nanaji 2112420037
02 Choube Ujwal Santosh 1912420144
03 Kolhe Durga Kuwarlal 2012420214
04 Bagde Sayali Devendrakumar 2012420216
05 Pathode Nandini Santosh 2012420226

Guided By Dr.R.N. Nimbude

Pawan Katgaonkar HOD

Government Polytechnic Gondia

Information Technology
 Certificate
This is to certify that Micro-project is carried out under the guidance
of Mr. Pawan Katgaonkar Lecturer Department of Information
Technology. Entitled as bona- fide record of independent group research
done by Group no. under by supervision during winter (2022-23) submitted
to Department of Information Technology for Client Side Scripting
Language (22519) Practical work and that the has not previously format the
basic of any copy right work.

Date: / / 2022
Place: Gondia

Government Polytechnic Gondia

Information Technology
 Declaration

We are members of Group no. hereby declare by the micro-project

Entitled statistics submitted Department of Information Technology for
Client Side Scripting Language (22519) Practical work and that the has not
previously format the basic of any copy right work.

Submitted by
Sr no. Name Enrollment no
01 Vaidya Pragati Nanaji 2112420037
02 Choube Ujwal Santosh 1912420144
03 Kolhe Durga Kuwarlal 2012420214
04 Bagde Sayali Devendrakumar 2112420037
05 Pathode Nandini Santosh 2012420226

Date: / / 2022
Place: Gondia

Government Polytechnic Gondia

Information Technology
 Acknowledgement
This is completed micro project comes as gift to me after efforts that
has gone into it has been a beautiful Endeavour only because of the valuable
guidance of our guide and well-wishers.

We wished to extend our heart-felt gratitude to our guide By

Mr. Pawan Katgaonkar for her constant guidance encouragement
motivation for every stage of this work made this micro project a success
finally we are proud to express our gratitude and respect to each member of
this group.

Date: / / 2022
Place: Gondia

Government Polytechnic Gondia

Information Technology
 INDEX

Sr
Title Page
No. no.
1 Rationale 4

2 Aim/Benefit of the micro-project 4

3 Course Outcomes Addressed 4-5

4 Literature Review 6-8

5 Actual Methodology Followed 9

6 Actual Resources Used 10

7 Outputs of the Micro-Project 12-14

8 Skill Developed/learning out of this Micro-Project 15

9 Applications of this Micro-Project 15

Government Polytechnic Gondia

Information Technology
 Micro project Report
Part A: Plan
Title of the micro project: Creating a Gym Website Using
HTML & CSS.
Semester Fifth Scheme I Group no: 03

1.0 Brief Introduction:

After this pandemic situation each and every person wants an break with friends and
family which we let them to forget all the stress and difficulties for them we have created
an useful and amazing website called “Tour Around The World”.
In this website we have created an search engine form as a main page , in which
the user can search the location of desired areas. On the page a login button is there which is
linked to login form. The login form contains details of the user for giving customer good
service.

HTML:
HTML is at the core of every webpage, regardless the complexity of a site or number
of technologies involved. It’s the starting point for anyone learning how to create content for
the web, And, Luckily for us, it’s surprisingly easy to learn.

HTML stands for Hypertext Markup Language. “Markup language” means that, rather
than using a programming language to perform functions, HTML uses tags to identify
different types of content and the purposes they each serve to the webpage.

Markup languages work in the same way as you just did when you labeled those
content types, except they use to do it –specifically, they use HTML tags, also known as
“elements.” These tags have pretty intuitive names: Header tags, paragraph tags, image tags,
and so on. Every web page is made up of a bunch of these HTML tags denoting each type of
content on the page. Each type of content on the page is wrapped in, i.e. Surrounded by,
HTML tags.

For Example, the words you’re reading right now are part of a paragraph. If I were
coding this web page from scratch (instead of using the WYSIWG editor in Hub Spot’s
CMS), I would have started this paragraph tag: The “tag” part is denoted by open brackets,
and the letter “P” tells the computer that were opening a paragraph instead of some type of
content.

Government Polytechnic Gondia

Information Technology
CSS:
CSS stands for Client side Scripting Language. This programming language dictates
how the HTML elements of a website should actually appear on the frontend of the page. CSS
describe how HTML elements are to be displayed on screen, Paper, or in other media. CSS
saves a lot of work. It can control the layout of, multiple web pages all at once. External Style
sheets are stored in CSS files.

CSS History
 1994: First proposed by Hakan Wium lie on 10th October
 1996: CSS was published on 17th November with influencer Bert Bos
 Later he became Co-author of CSS
 1996: CSS became official with CSS was published in December
 1997: Created CSS level 2 on 4th November
 1998: Published on 12th May
CSS Editors

Some of the popular editors that are best suited to wire CSS code are as Following

 Atom
 Visual Studio Code
 Brackets
 Espresso(For Mac OS User)
 Notepad++(Great for HTML&CSS)
 Komodo Edit(Simple)
 Sublime Text (Best Editor)
2.0 Aim of the project:-
 The main objective of developing this project was to
 Create a static website for the Travels, from which user can get the details of the travel
such as about the Journey, contact details, address, images etc.
 This project is in HTML and CSS so it's a static website and does not perform any type
of dynamic database operations.

3.0 Course Outcome Addressed:-

 Create interactive web pages using program flow control structures.
 Implement Arrays and functions in java scripts.
 Create event based web forms using java scripts.
 Use JavaScript for handling cookies.
 Create interactive webpage using regular expressions for validations.
 Create Menus and navigations in web pages.
Government Polytechnic Gondia
Information Technology
4.0 Literature Review:-
A Review on Webpage Designing and Application K. Gokulnath1 , M. Raghunath2
1Student, Department of Mechatronics Engineering, Bannari Amman Institute of Technology,
Erode, India 2Assistant Professor, Dept. of Mechatronics Engineering, Bannari Amman
Institute of Technology, Erode, India.
Internet usage becomes increased tremendously and rapidly in the past decade. Web
sites have become the most important public communication portal for the most business and
the organization. Business-to-consumer interactions mainly occur online, website design is
critical in engaging users. Poorly designed websites may frustrate users and result in a high
“bounce rate” . Website Development is like house building, before house building process,
we ask to an architect about plan, building permit, oversee a survey of geological and license
from city. All things must have to see in the website development requirement, designing,
documentation, appropriate server and programming language etc.
This webpage is built on HTML5, CSS3 along with bootstrap framework. The header
section consists of a navbar built using the bootstrap navbar-default class. The showcase
section uses bootstrap grid. Similarly, the content section also uses bootstrap grid to split
content left and right. The table uses the semantic
After undergoing training in the basics of HTML and CSS for the first two weeks, I
started working on the development of the web page and developed it along with the bootstrap
framework. The final output is a webpage that contains responsive HTML elements like
navbar, grid, footer etc. Challenges faced during this period include identify the right colour
scheme for the webpage, this challenge was eventually overcome and a right colour scheme
for the website was used. Comparing with Other journal paper this methodology is best
because HTML and CSS is enough for basic web development.

5.0 Actual Procedure Followed:-

1. Plan your layout

The first step of any website is always to know what you want on it and (vaguely) how you
want it to look. So, the first step is to do a rough sketch - either on paper or on the computer,
depending on which you find easier

2. Get the ‘boilerplate code’ set up

Now, it’s time to get the basic code that you have at the start of any website (this is commonly
called the Boilerplate).

Government Polytechnic Gondia

Information Technology
 Do this by:

1. Creating a new folder on your computer for the website

2. Create new empty index.html and style.css files inside
3. Add the basic ‘boilerplate code’ to your index.html file:

3. Create the elements in your layout

Now it’s time to create the layout/section elements that you planned in step 1!

The best way to do this is by using semantic elements: <header>,<main>,<section>, and <footer>.

4. Fill in the HTML content

Once you have the sections of the page, it’s time to fill them up! If you know what content
you are going to be using, put that in. If not, put in some dummy text and replace it with the
actual content later.

5. Add some basic layout CSS

Once we’re done with our HTML, it’s time to move on to CSS! The first and most important
part to focus on first is to get it looking like our layout - then we can focus on the details.

This means that we need to focus on properties like width, height, margin, padding, position,
and display. Also, we need to make sure the images are the right size so that they don’t
obliterate the page.

6. Add more specific styles

Once the basic framework of the site is done, we can add more specific styles.

Now we can make our website look good!

7. Add colors and backgrounds

Yay, we’re on the home stretch now! It’s time to add the finishing touches to our website -
colors and backgrounds!

This is what will make our site look really awesome.

Government Polytechnic Gondia

Information Technology
ACTUAL RESOURCES USED:-

Sr Name of Specification Quantity

N Resource /
o Material
.
1. Reference https://www.geeksforgeeks.org/
Websites https://www.w3schools.com

-
2. Hardware Intel Core i3
generation with
4GB RAM 01

3. Software One
Chrome device
with OS
Subline Text 4, word On System

4. Operating Windows 10 64-bit On System

System Android 5.0 and newer On
mobile
phones
5. Microsoft Microsoft Word On System
Software
Packages

Government Polytechnic Gondia

Information Technology
 TOUR AROUND THE WORLD

Program Code:-
Page 1
<html> Page 2
<head> <html>
<title>Travel Website</title> <head>
<link rel="stylesheet" href="style.css"> <title>Login form</title>
<link rel="stylesheet" <link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.co href="style.css">
m/font- awesome/4.7.0/css/font- <body>
awesome.min.css"> <section class="headers">
<meta name="viewport" <div class="container">
content="width=device-width, initial <div class="loginbox">
scale=1.0"> <img src="avatar.png" class="avatar">
<link rel="stylesheet" <form>
href="https://stackpath.bootstrapcdn.co <p
m/bootstrap/4.5.2/css/bootstrap.min.css"> style="color:whitesmoke;">Username</p
</head> >
<body> <input type="text" name=""
<section class="header"> placeholder="Enter Username">
<div class="container"> <br>
<button type="button" class="login- <p>Password</p>
btn"><a <input type="password" name=""
href="login.html">Login</a></button> placeholder="Enter Password"><br>
</div> <button type="button" class="login-
<section class="header2"> btn"><a
<div class="container"> href="travels.html">Login</a></button>
</div> <br><br>
<h1>Tour Around The Globe</h1> <a href="#">Lost your
<p>CAPTURE THE WORLD WITH password</a><br>
US!</p> <a href="#">Forgot Email</a>
<div class="input-group"> </form>
<input type="text" class="form-control" </div>
placeholder="Search Country or City"> </div>
<div class ="input-group- append"> </section></body>
<button type="submit" class="input- </head>
group- </html>
textbtn">Search</button></div></div> <html>
</section>
</body>
</html>

Government Polytechnic Gondia Page 11

 TOUR AROUND THE WORLD

Page 3 <span><i class="fa fa-sun-o"></i>4

<head> Days</span>
<title>Travel Website</title> <span><i class="fa fa-moon-o"></i>3
<link rel="stylesheet" href="style.css"> Nights</span>
<link rel="stylesheet" </div>
href="https://stackpath.bootstrapcdn.co </div>
m/font- awesome/4.7.0/css/font- <div class="col-md-4">
awesome.min.css"> <div class="feature-box">
<meta name="viewport" <div class="feature-img">
content="width=device-width, initial <img src="ff.jpg">
scale=1.0"> <div class="price">
<link rel="stylesheet" <p>180$</p></div>
href="https://stackpath.bootstrapcdn.co <div class="rating">
m/bootstrap/4.5.2/css/bootstrap.min.css"> <i class="fa fa-star"></i>
</head> <i class="fa fa-star"></i>
<body> <i class="fa fa-star"></i>
<h1><p </div>
style="color:darkblue;">Featured </div>
Location</p></h1> </div>
<div class="container"> <div class="feature-details">
<div class="row"> <h4>Madrid, Spain</h4>
<div class="col-md-4"> <p>Madrid, Spain's central capital, is a
<div class="feature-box"> city of elegant boulevards and expansive,
<div class="feature-img"> manicured parks such as the Buen Retiro.
<img src="melbourne-australia.jpg" </p>
alt="Australia" <span><i class="fa fa-map-
onclick="window.open('Australian.html', marker"></i>Melbourne</span>
'_blank');" /> <span><i class="fa fa-sun-o"></i>4
<div class="price"> Days</span>
<p>190$</p></div> <span><i class="fa fa-moon-o"></i>3
<div class="rating"> Nights</span>
<i class="fa fa-star"></i> </div>
<i class="fa fa-star"></i> </div>
<i class="fa fa-star"></i> <div class="col-md-4">
<i class="fa fa-star"></i> <div class="feature-box">
</div> <div class="feature-img">
</div> <img src="dd.jpg">
</div> <div class="price">
<div class="feature-details"> <p>200$</p></div>
<h4><white>Melbourne, <div class="rating">
Australia</white></h4> <i class="fa fa-star"></i>
<p>Melbourne is the coastal capital of the <i class="fa fa-star"></i>
southeastern Australian state of <i class="fa fa-star"></i>
Victoria.</p> <i class="fa fa-star"></i>
<span><i class="fa fa-map- <i class="fa fa-star-half-o"></i>
marker"></i>Melbourne</span> </div>

Government Polytechnic Gondia Page 12

 TOUR AROUND THE WORLD

</div> </html>
</div> CSS Part
<div class="feature-details">
<h4>Santorini, Greece</h4>
<p>Greece is a country in southeastern *
Europe with thousands of islands {
throughout the Aegean and Ionian seas. padding: 0;
</p> margin: 0;
<span><i class="fa fa-map- }
marker"></i>Melbourne</span> .header
<span><i class="fa fa-sun-o"></i>5 {
Days</span> height: 100%;
<span><i class="fa fa-moon-o"></i>4 background-image: linear-
Nights</span> gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),u
</div> rl(gg.jpg);
</div> background-size: cover; background-
<div class="col-md-4"> position: center; background-attachment:
<div class="feature-box"> fixed; text-align: center;
<div class="feature-img"> color: white;
<img src="amsterdam.jpg"> }
<div class="price"> .header img
<p>250$</p></div> {
<div class="rating"> width: 80px; height: 40px; float: right;
<i class="fa fa-star"></i> image-orientation: transparent;
<i class="fa fa-star"></i> }
<i class="fa fa-star"></i> .login-btn
<i class="fa fa-star"></i> {
<i class="fa fa-star-half-o"></i> width: 100px; padding: 8px 0;
</div> outline: none !important; border; 2px
</div> solid #fff; border-radius: 50px;
</div> background: transparent;
<div class="feature-details"> color: #fff; float: left;
<h4>Santorini, Greece</h4> }
<p>Greece is a country in southeastern .header h1
Europe with thousands of islands {
throughout the Aegean and Ionian seas. padding-top: 200px; padding-bottom: 0;
</p> font-size: 55px;
<span><i class="fa fa-map- }
marker"></i>Amsterdam</span> .header p
<span><i class="fa fa-sun-o"></i>5 {
Days</span> margin: 30px; color: white; font-size:
<span><i class="fa fa-moon-o"></i>4 20px;
Nights</span> }
</div></div></div> .input-group
</div> {
</body> width: 90%;
max-width: 500px; border-radius: 30px;

Government Polytechnic Gondia Page 13

 TOUR AROUND THE WORLD

background: #fff; position: absolute; bottom: -1px;

margin: auto; }
} .features .fa
.form-control {
{ font-size: 15px; color: coral;
border; 0 !important; }
box-shadow: none !important; .feature-details
} {
.input-group-text padding: 20px;
{ text-align: justify;
width: 100px; }
background-image: linear- .feature-details h4
gradient(#00ff7e,#1f3d90); border: 0 {
!important; font-weight: 600; margin-left: 20px;
color: #fff !important; }
} .feature-details .fa
.features {
{ margin-right : 5px;
padding: 100px 0; }
} .feature-box
h1 {
{ margin-right: 30px;
text-align: center; padding-bottom: 30px; .loginbox
}
.feature-img img {
{ width 320px; height: 420px;
width: 100%; background: linear-
} gradient(#00ff7e,#1f3d90); color:
.price ghostwhite;
{ top: 50%;
width: 50px; height: 50px; left: 50%; position: absolute;
background: #ff5722; color: #fff; transform: translate(-50%, -50%); box-
font-weight: 600; sizing: border-box;
border-radius: 50%; padding: 10px; padding: 70px 30px;
box-shadow: 0 0 10px 1px }
rgba(37,73,214,0.18); position: absolute; body
left: 10px; bottom: -20px; {
} margin: 0;
.feature-img padding: 0;
{ background: url(choube.jpg);
position: relative; background-size: cover; background-
} position: center; font-family: sans-serif;
.rating }
{ .avatar
padding: 3px; float: left; background: {
#fff; right: 0; width: 50px;

Government Polytechnic Gondia Page 14

 TOUR AROUND THE WORLD

padding: 20px; height: 50px; border: gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),u

absolute; top: -120px; rl(gg.jpg); background-size: cover;
left: calc(50% - 50px); align-content: background-position: center;
center; background-attachment: fixed; text-align:
} center;
h1 color: white;
{ }
margin: 0; .header2 img
padding: 0 0 20px; text-align: center; {
font-size: 22px; width: 80px; height: 40px; float: left;
} image-orientation: transparent;
.loginbox input }
{ signup-btn
width: 100; {
margin-bottom: 20px; width: 100px; padding: 8px 0;
} outline: none !important; border; 2px
.loginbox p solid #fff; border-radius: 50px;
{ background: transparent; color: #fff;
float: left;
margin: 0; }
.header h
padding: 0; {
padding-top: 200px; padding-bottom: 0;
font-weight: bold; font-size: 55px;
} }
.loginbox input[type="text"], .header p
input[type="password"] {
{ margin: 30px; color: white; font-size:
border: none; 20px;
border-bottom: 1px solid #fff; }
background: transparent; outline: none; .input-group
height: 40px; {
.login-btn input[type="submit width: 90%;
{ max-width: 500px; border-radius: 30px;
border: none; outline: none; height: 5px; background: #fff; margin: auto;
background: #fb2525; }
color: #fff; .header h
font-size: 18px; border-radius: 20px; {
} padding-top: 200px; padding-bottom: 0;
.header2 font-size: 55px;}
{
height: 100%;
background-image: linear-

Government Polytechnic Gondia Page 15

 TOUR AROUND THE WORLD

Output:-

Government Polytechnic Gondia Page 16

 TOUR AROUND THE WORLD

Conclusion:-

We have created an travelling website which has different

features for our customers. The customers each and every demands are fulfilled by us.
Demands depending on the hotels, restaurants , resorts, Booking .

Skill Developed/ Learning out of this project:

 Understand HTML Basics.
 Learn to create Websites for clients and Customers.
 Work with core HTML Tags to build modern web apps.
 Separate Styling using Styles Sheets and Selectors.
 Apply Styling using CSS.

Government Polytechnic Gondia Page 17