Demo Page

Demo page
Index.html
<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.3.1/css/bootstrap.min
.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="centerdiv">
<a href="">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-pinterest"></i>
</a>
</div>
<section class="header">
<div class="container">
<img sr+
c="triptok.png" class="img" width="160px" >
<button type="button" class="login-btn">Login</button>

</div>
<h1>Travel Across The Globe</h1>
<p>hey lets enjoy tour</p>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search Country or City">
<div class="btn">
<a href="#"><i class="fa fa-search"></i></a>
</div>
</div>
</section>
<section class="features">
<h2>Features Destinations</h2>
<div class="row">
<div class="col-md-4">
<div class="features-box">
<div class="features-img">
<img src="1.jpg">
<div class="price">
<p>78$</p>
</div>
<div class="rating">
<i class="fa fa-star" ></i>
<i class="fa fa-star-half-o" ></i>
<i class="fa fa-star-o"></i>
</div>
</div>
<div class="features-details">
<h4>Los Angeles </h4>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Laudantium laboriosam ducimus corrupti iure magnam adipisc
amet soluta numquam voluptatem maiores quaerat fugiat, eius
assumenda tenetur facilis, a libero dignissimos?</p>
<div>
<span><i class="fa fa-map-marker" ></i>Los Angeles</span>
<span><i class="fa fa-sun-o" ></i>4 Days</span>
<span><i class="fa fa-moon-o" ></i>5 Nights</span>
</div>
</div>
</div>
</div>
<img src="2.jpg">
<div class="price">
<p>82$</p>
</div>
</div>
</div>
<div>
</div>
</div>
</div>
</div>
<img src="3.jpg">
<div class="price">
<p>82$</p>
</div>
</div>
</div>
<div>
</div>
</div>
</div>
</div>
<img src="4.jpg">
<div class="price">
<p>88$</p>
</div>
</div>
</div>

<div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="gallery">
<h1>Travelling Gallery</h1>
<div class="row-1">
<div class="column">
<div class="gallery-box">
<img src="travel-1.jpg" width="100%" >
<h4>Los Angeles</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="banner">
<div class="banner-highlights">
<div class="row">
<h3>Get 30% on top destination</h3>
<p>book your tickets before 31july and avil 30% discount </p>
</div>
<div class="col-md-4"></div>
<button type="button" class="booking-btn">Book Now</button>
</div>
</div>
</div>
</section>
<section class="users-feedback">
<h1>Users Review</h1>
<div class="container-1">
<div class="row">
<div class="col">
<div class="user-review">
quaerat fugiat, assumenda tenetur facilis, a libero dignissimos?</p>
<h5>Pranav Sharma</h5>
<small>Los Angeles</small>
</div>
<img src="user1.jpg" >
</div>
<div class="col"></div>
<h5>Lora Sharma</h5>
</div>
</div>
<div class="col">
<h5>Jack Sharma</h5>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Style.css
*{
margin: 0;
padding:0;
html,body
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
.img
float: left;
padding-left: 300px;
.header
height: 100%;
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url(banner1.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
padding-top: 20px;
text-align: center;
color: white;
.header
width: 1520px;
float: right;
.login-btn
width: 100px;
padding: 8px 0 ;
outline: none !important;
border: 2px solid #fff;
border-radius: 8px;
background: transparent;
color: #fff;
float: right;
font-size: 17px;
.header h1
padding-top: 200px;
padding-bottom: 0px;
font-size: 50px;
.header p
{
margin: 18px 0;
.input-group
width: 90%;
max-width: 350px;
border-radius: 30px;
background: #fff;
margin: auto;
padding: 2px;
.form-control
border-radius: 0.1px ;
height: 4%;
width: 60%;
padding: 8px;
.btn
float: right;
width: 40px;
height: 30px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
.centerdiv
{
background-color: rgb(10, 9, 10);
text-align: right;
height: 4%;
width: 100%;
font-size: 22px;
.features
padding: 100px 0;
margin-left: 5vw;
h2
text-align:center;
background-color: #efefef;
font-size: 40px;
margin-top: 550px;
padding-top: 20px;
.features-img img
width: 50%;
.price
background-color: #ff5722;
height: 40px;
width: 40px;
color: #fff;
font-size: 19px;
border-radius: 50%;
padding: 8px;
box-shadow: 0 0 10px 1px rgba(8, 50, 219, 0.18);
position: absolute;
left: 30px;
bottom: -20px;
.col-md-4
float: left;
width: 49%;
padding: 5px;
.row::after
content: "";
display: flex;
clear: both;
.features-img
position: relative;
.rating
padding: 2px;
float: right;
background: #fff;
bottom: -1px;
right: 355px;
position: absolute;
.features .fa
font-size: 15px;
color:#ff5722;
.features-details
padding: 20px;
text-align: justify;
.features-details h4
font-weight: 700px;
margin-top: 2px;
font-size: 20px;
.features-details .fa
margin-right: 5px;
.features-box
box-shadow: 0 0 10px 1px rgba(101, 101, 148, 0.959);
margin-bottom: 3px;
.gallery
{
text-align:center;
font-size: 30px;
margin-top: -80px;
margin-bottom: 400px;
padding-top: 1px;
height: 100px;
.gallery h1
padding-top: 2px;
margin-bottom: 30px;
.gallery-box img
background: #efefef;
width: 50%;
padding-right: 1000px;
cursor: pointer;
transition: 1s;
.gallery-box img:hover
transform: scale(1.1);
.gallery-box h4
display: block;
top: 50%;
color: #efefef;
text-shadow: -2px 2px 2px #000;

right: 75%;
font-size: 20px;
position: absolute;
transform: translate(-50%, -50%);
.gallery-box
position:relative;
margin-bottom: 3px;
.column
float: left;
width: 49%;
padding: 5px;
.row-1::after
content: "";
display: flex;
clear: both;
.banner
height: 100%;
padding-top: 300px;
background-image: url(banner2.jpg);
background-position: center;
background-size: cover;
background-attachment: fixed;
}
.banner h3
{ margin-top: 15px;
font-size: 35px;
.banner-highlights
padding: 2vw 2vh 2vw 2vh ;
background: rgba(0,0,0,0.7);
text-align: center;
color: #fff;
.booking-btn
width: 120px;
height: 50px;
padding: 10px 0 ;
border-radius: 70px;
background: transparent;
color: #fff;
font-size: 17px;
margin-top: -65px;
.users-feedback
padding: 10px 0;
text-align: center;
.user-review
{
text-align:center;
margin-left: 500px;
box-shadow: 0 0 10px 0 rgba(0,0,0,100.2);
width:35% ;
height: 18%;
font-family: Georgia, 'Times New Roman', Times, serif;
padding: 40px 10px 10px 10px;
.user-review p
font-size: 13.5px;
margin-top: -55px;
.user-review h5
font-size: 16px;
.users-feedback img
width: 70px;
height: 70px;
border-radius: 50%;
position: relative;
margin: -35px 0 20px 40%;
right: 280px;
padding-right: 50px;
padding-left: 50px;
.user-review p::before
{
content: '\201d';
display: block;
position: relative;
font-size: 45px;
right: 1px;
bottom: -20px;
width: 100%;
font-family: sans-serif;
color: #6495ed;
.user-review col
float: left;
width: 49%;
padding: 5px;

Demo Page

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

Demo Page

Uploaded by

Copyright:

Available Formats

Demo page

<link rel="stylesheet" href="style.css">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

<i class="fa fa-facebook"></i>

<i class="fa fa-twitter"></i>

<i class="fa fa-instagram"></i>

<i class="fa fa-youtube"></i>

<i class="fa fa-pinterest"></i>

c="triptok.png" class="img" width="160px" >

<button type="button" class="login-btn">Login</button>

<h1>Travel Across The Globe</h1>

<p>hey lets enjoy tour</p>

<input type="text" class="form-control" placeholder="Search Country or City">

<a href="#"><i class="fa fa-search"></i></a>

<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>

<i class="fa fa-star-o"></i>

<h4>Los Angeles </h4>

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.

Laudantium laboriosam ducimus corrupti iure magnam adipisc

amet soluta numquam voluptatem maiores quaerat fugiat, eius

assumenda tenetur facilis, a libero dignissimos?</p>

<span><i class="fa fa-map-marker" ></i>Los Angeles</span>

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

<span><i class="fa fa-moon-o" ></i>5 Nights</span>

<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>

<i class="fa fa-star-o"></i>

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.

Laudantium laboriosam ducimus corrupti iure magnam adipisc

amet soluta numquam voluptatem maiores quaerat fugiat, eius

assumenda tenetur facilis, a libero dignissimos?</p>

<span><i class="fa fa-map-marker" ></i>Los Angeles</span>

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

<span><i class="fa fa-moon-o" ></i>5 Nights</span>

<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>

<i class="fa fa-star-o"></i>

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.

Laudantium laboriosam ducimus corrupti iure magnam adipisc

amet soluta numquam voluptatem maiores quaerat fugiat, eius

assumenda tenetur facilis, a libero dignissimos?</p>

<span><i class="fa fa-map-marker" ></i>Los Angeles</span>

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

<span><i class="fa fa-moon-o" ></i>5 Nights</span>

<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>

<i class="fa fa-star-o"></i>

<h4>Los Angeles </h4>

Laudantium laboriosam ducimus corrupti iure magnam adipisc

amet soluta numquam voluptatem maiores quaerat fugiat, eius

assumenda tenetur facilis, a libero dignissimos?</p>