TOUR AROUND THE WORLD
INDEX
Sr No. Title Pg.no.
01) Introduction 02
02) Code 03
03) Output 25
04) Conclusion 27
05) Reference 28
SVPM’S Institute of Technology and Engineering Malegaon(BK) (2020-2021) Page 1
TOUR AROUND THE WORLD
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.
SVPM’S Institute of Technology and Engineering Malegaon(BK) (2020-2021) Page 2
TOUR AROUND THE WORLD
CODE
<html>
<head>
<title>Travel Website</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<section class="header">
<div class="container">
<button type="button" class="login-btn"><a
href="login.html">Login</a></button>
</div>
<section class="header2">
<div class="container">
SVPM’S Institute of Technology and Engineering Malegaon(BK) (2020-2021) Page 3
TOUR AROUND THE WORLD
</div>
<h1>Tour Around The Globe</h1>
<p>CAPTURE THE WORLD WITH US!</p>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search Country or City">
<div class ="input-group- append">
<button type="submit" class="input-group-textbtn">Search</button></div></div>
</section>
</body>
</html>
padding: 0;
margin: 0;
.header
height: 100%;
background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url(gg.jpg);
SVPM’S Institute of Technology and Engineering Malegaon(BK) (2020-2021) Page 4
TOUR AROUND THE WORLD
background-size: cover;
background-position: center;
background-attachment: fixed;
text-align: center;
color: white;
.header img
width: 80px;
height: 40px;
float: right;
image-orientation: transparent;
.login-btn
width: 100px;
padding: 8px 0;
outline: none !important;
border; 2px solid #fff;
border-radius: 50px;
background: transparent;
SVPM’S Institute of Technology and Engineering Malegaon(BK) (2020-2021) Page 5
TOUR AROUND THE WORLD
color: #fff;
float: left;
.header h1
padding-top: 200px;
padding-bottom: 0;
font-size: 55px;
.header p
margin: 30px;
color: white;
font-size: 20px;
.input-group
width: 90%;
max-width: 500px;
border-radius: 30px;
background: #fff;
SVPM’S Institute of Technology and Engineering Malegaon(BK) (2020-2021) Page 6
TOUR AROUND THE WORLD
margin: auto;
.form-control
border; 0 !important;
box-shadow: none !important;
.input-group-text
width: 100px;
background-image: linear-gradient(#00ff7e,#1f3d90);
border: 0 !important;
color: #fff !important;
.features
padding: 100px 0;
h1
SVPM’S Institute of Technology and Engineering Malegaon(BK) (2020-2021) Page 7
TOUR AROUND THE WORLD
text-align: center;
padding-bottom: 30px;
.feature-img img
width: 100%;
.price
width: 50px;
height: 50px;
background: #ff5722;
color: #fff;
font-weight: 600;
border-radius: 50%;
padding: 10px;
box-shadow: 0 0 10px 1px rgba(37,73,214,0.18);
position: absolute;
left: 10px;
bottom: -20px;
SVPM’S Institute of Technology and Engineering Malegaon(BK) (2020-2021) Page 8
TOUR AROUND THE WORLD
.feature-img
position: relative;
.rating
padding: 3px;
float: left;
background: #fff;
right: 0;
position: absolute;
bottom: -1px;
.features .fa
font-size: 15px;
color: coral;
.feature-details
padding: 20px;
SVPM’S Institute of Technology and Engineering Malegaon(BK) (2020-2021) Page 9
TOUR AROUND THE WORLD
text-align: justify;
.feature-details h4
font-weight: 600;
margin-left: 20px;
.feature-details .fa
margin-right : 5px;
.feature-box
margin-right: 30px;
.loginbox
width 320px;
height: 420px;
SVPM’S Institute of Technology and Engineering Malegaon(BK) (2020-2021) Page 10
TOUR AROUND THE WORLD
background: linear-gradient(#00ff7e,#1f3d90);
color: ghostwhite;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 70px 30px;
body
margin: 0;
padding: 0;
background: url(gifimage.gif);
background-size: cover;
background-position: center;
font-family: sans-serif;
.avatar
width: 50px;
SVPM’S Institute of Technology and Engineering Malegaon(BK) (2020-2021) Page 11
TOUR AROUND THE WORLD
padding: 20px;
height: 50px;
border: absolute;
top: -120px;
left: calc(50% - 50px);
align-content: center;
h1
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
.loginbox input
width: 100;
margin-bottom: 20px;
.loginbox p
SVPM’S Institute of Technology and Engineering Malegaon(BK) (2020-2021) Page 12
TOUR AROUND THE WORLD
margin: 0;
padding: 0;
font-weight: bold;
.loginbox input[type="text"], input[type="password"]
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
.login-btn input[type="submit"]
border: none;
outline: none;
height: 5px;
background: #fb2525;
SVPM’S Institute of Technology and Engineering Malegaon(BK) (2020-2021) Page 13
TOUR AROUND THE WORLD
color: #fff;
font-size: 18px;
border-radius: 20px;
.header2
height: 100%;
background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url(gg.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
text-align: center;
color: white;
.header2 img
width: 80px;
height: 40px;
float: left;
SVPM’S Institute of Technology and Engineering Malegaon(BK) (2020-2021) Page 14
TOUR AROUND THE WORLD
image-orientation: transparent;
signup-btn
width: 100px;
padding: 8px 0;
outline: none !important;
border; 2px solid #fff;
border-radius: 50px;
background: transparent;
color: #fff;
float: left;
.header h
padding-top: 200px;
padding-bottom: 0;
font-size: 55px;
SVPM’S Institute of Technology and Engineering Malegaon(BK) (2020-2021) Page 15
TOUR AROUND THE WORLD
.header p
margin: 30px;
color: white;
font-size: 20px;
.input-group
width: 90%;
max-width: 500px;
border-radius: 30px;
background: #fff;
margin: auto;
.header h
padding-top: 200px;
padding-bottom: 0;
font-size: 55px;
SVPM’S Institute of Technology and Engineering Malegaon(BK) (2020-2021) Page 16
TOUR AROUND THE WORLD
<html>
<head>
<title>Login form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<section class="headers">
<div class="container">
<div class="loginbox">
<img src="avatar" class="avatar">
<form>
<p>Username</p>
<input type="text" name="" placeholder="Enter Username">
<br>
SVPM’S Institute of Technology and Engineering Malegaon(BK) (2020-2021) Page 17
TOUR AROUND THE WORLD
<p>Password</p>
<input type="password" name="" placeholder="Enter Password"><br>
<button type="button" class="login-btn"><a
href="travels.html">Login</a></button><br><br>
<a href="#">Lost your password</a><br>
<a href="#">Forgot Email</a>
</form>
</div>
</div>
</section></body>
</head>
</html>
<html>
SVPM’S Institute of Technology and Engineering Malegaon(BK) (2020-2021) Page 18
TOUR AROUND THE WORLD
<head>
<title>Travel Website</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<h1>Featured Location</h1>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="feature-box">
<div class="feature-img">
<img src="melbourne-australia">
<div class="price">
<p>190$</p></div>
<div class="rating">
SVPM’S Institute of Technology and Engineering Malegaon(BK) (2020-2021) Page 19
TOUR AROUND THE WORLD
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
</div>
<div class="feature-details">
<h4>Melbourne, Australia</h4>
<p>Melbourne is the coastal capital of the southeastern Australian state of
Victoria.</p>
<span><i class="fa fa-map-marker"></i>Melbourne</span>
<span><i class="fa fa-sun-o"></i>4 Days</span>
<span><i class="fa fa-moon-o"></i>3 Nights</span>
</div>
</div>
<div class="col-md-4">
SVPM’S Institute of Technology and Engineering Malegaon(BK) (2020-2021) Page 20
TOUR AROUND THE WORLD
<div class="feature-box">
<div class="feature-img">
<img src="madrid,%20spain.jpg">
<div class="price">
<p>180$</p></div>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
</div>
<div class="feature-details">
<h4>Madrid, Spain</h4>
<p>Madrid, Spain's central capital, is a city of elegant boulevards and
expansive, manicured parks such as the Buen Retiro. </p>
<span><i class="fa fa-map-marker"></i>Melbourne</span>
<span><i class="fa fa-sun-o"></i>4 Days</span>
SVPM’S Institute of Technology and Engineering Malegaon(BK) (2020-2021) Page 21
TOUR AROUND THE WORLD
<span><i class="fa fa-moon-o"></i>3 Nights</span>
</div>
</div>
<div class="col-md-4">
<div class="feature-box">
<div class="feature-img">
<img src="santorini.jpg">
<div class="price">
<p>200$</p></div>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
</div>
</div>
<div class="feature-details">
SVPM’S Institute of Technology and Engineering Malegaon(BK) (2020-2021) Page 22
TOUR AROUND THE WORLD
<h4>Santorini, Greece</h4>
<p>Greece is a country in southeastern Europe with thousands of islands
throughout the Aegean and Ionian seas. </p>
<span><i class="fa fa-map-marker"></i>Melbourne</span>
<span><i class="fa fa-sun-o"></i>5 Days</span>
<span><i class="fa fa-moon-o"></i>4 Nights</span>
</div>
</div>
<div class="col-md-4">
<div class="feature-box">
<div class="feature-img">
<img src="amsterdam.jpg">
<div class="price">
<p>250$</p></div>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
SVPM’S Institute of Technology and Engineering Malegaon(BK) (2020-2021) Page 23
TOUR AROUND THE WORLD
</div>
</div>
</div>
<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. </p>
<span><i class="fa fa-map-marker"></i>Amsterdam</span>
<span><i class="fa fa-sun-o"></i>5 Days</span>
<span><i class="fa fa-moon-o"></i>4 Nights</span>
</div></div></div>
</div>
</body>
</html>
SVPM’S Institute of Technology and Engineering Malegaon(BK) (2020-2021) Page 24
TOUR AROUND THE WORLD
OUTPUT
SVPM’S Institute of Technology and Engineering Malegaon(BK) (2020-2021) Page 25
TOUR AROUND THE WORLD
SVPM’S Institute of Technology and Engineering Malegaon(BK) (2020-2021) Page 26
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 .
SVPM’S Institute of Technology and Engineering Malegaon(BK) (2020-2021) Page 27
TOUR AROUND THE WORLD
REFERENCE
1) www.greeks.com
2) www.w3schools.com
3) www.google.com
4) www.javatpoint.com
SVPM’S Institute of Technology and Engineering Malegaon(BK) (2020-2021) Page 28
