Tour Package Details
0 844
A package tour, package vacation, or package holiday comprises transport and accommodation advertised and sold together by a vendor known as a tour operator. Other services may be provided such a rental car, activities or outings during the holiday. Transport can be via automobile, buses, charter airline, and may also include travel between areas as part of the holiday. Package holidays are a form of product bundling. This page is made using HTML, Bootstrap, Css and JS
Create 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">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Tour</title>
</head>
<body>
<div class="bg-white w-100 container-fluid">
<ul class="nav-bar">
<li class="nav-item active"> <a href="" class="nav-links">Home </a> </li>
<li><a href="" class="nav-links">Nepal</a></li>
<li class="text-secondary">Bandipur | bandipur tour | Historical town of Nepal</li>
<li class="float-right"><a href="" class="nav-links">test0@email.com </a></li>
<li class="float-right"><a href="" class="nav-links">+984794848/+98515484</a><li>
</ul>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-9">
<h2>Bandipur | Bandipur tour | Historical town of Nepal</h2> <span><i class="fas fa-map-marker-alt"></i> Bandipur</span>
<hr class="mb-5"/>
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div>
<div class="d-flex">
<div class="d-flex mb-4 mr-4 ml-4">
<div class=icon-types><i class="far fa-clock"></i></div>
<div class="inline-block">
<h6>Duration</h6>
<span class="text-secondary">2days 1 nights</span>
</div>
</div>
<div class="d-flex mb-4 mr-4 ml-4">
<div class=icon-types><i class="fas fa-shoe-prints"></i></div>
<div class="inline-block">
<h6>Tour Type</h6>
<span class="text-secondary">Daily Tour</span>
</div>
</div>
<div class="d-flex mb-4 mr-4 ml-4">
<div class=icon-types><i class="far fa-users"></i></div>
<div class="inline-block">
<h6>Group Size</h6>
<span class="text-secondary">Unlimited</span>
</div>
</div>
<div class="d-flex mb-4 mr-4 ml-4">
<div class=icon-types><i class="far fa-clock"></i></div>
<div class="inline-block">
<h6>Language</h6>
<span class="text-secondary">---</span>
</div>
</div>
</div>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/500/300" style="height:350px; object-fit:cover" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/510/300" style="height:350px; object-fit:cover" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/520/300" style="height:350px; object-fit:cover" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="mt-5">
<h2>Overview</h2>
<span>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed, necessitatibus sequi repellendus vero
quas vel facere beatae ducimus nobis est totam. Mollitia dolorum eius veniam minima! Eius odit blanditiis
commodi... <a href="">See more</a>
</span>
</div>
<hr>
<div class="mt-5">
<h2>Itinerary </h2>
<div class="card border border-left-warning">
<h6 class="p-3">Day 1 : Kathmandu to Bandipur</h6>
<span class="mt-3 p-3">
Early morning we have breakfast and we travel towards Bandipur. Its about 4-5 hours drive away from Kathmandu. We have the rest of the day free to do some sightseeing by yourself around the town.
</span>
</div>
<div class="card border border-left-warning mt-2">
<h6 class="p-3">Day 1 : Kathmandu to Bandipur</h6>
<span class="mt-3 p-3">
Early morning we have breakfast and we travel towards Bandipur. Its about 4-5 hours drive away from Kathmandu. We have the rest of the day free to do some sightseeing by yourself around the town.
</span>
</div>
</div>
<hr>
<div>
<h3>Invluded/Excluded</h3>
<div class="row">
<div class="col-6 mt-3">
<ul>
<li class="text-secondary ticks"><i class="fal fa-check text-success mr-3"></i>ALL MEALS</li>
<li class="text-secondary ticks"><i class="fal fa-check text-success mr-3"></i>ACCOMMODATION</li>
<li class="text-secondary ticks"><i class="fal fa-check text-success mr-3"></i>SIGHTSEEING</li>
<li class="text-secondary ticks"><i class="fal fa-check text-success mr-3"></i>WATER</li>
<li class="text-secondary ticks"><i class="fal fa-check text-success mr-3"></i>-TEA</li>
<li class="text-secondary ticks"><i class="fal fa-check text-success mr-3"></i>ALL GROUND TRANSPORTATION</li>
</ul>
</div>
<div class="col-6 mt-3">
<ul >
<li class="text-secondary ticks"><i class="fal fa-times text-danger mr-3"></i> PERSONAL EXPENSES</li>
<li class="text-secondary ticks"><i class="fal fa-times text-danger mr-3"></i> ANYTHING NOT MENTIONED IN THE ITINERARY</li>
</ul>
</div>
</div>
</div>
<hr>
<div class="row mb-5">
<div class="col-md-4">
<div class="card">
<img src="https://picsum.photos/200" alt="">
<div class="card-body">
<a href="" class="heading-card">Tilicho Lake Package Tour</a>
<span>NPR : 000.00</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://picsum.photos/210" alt="">
<div class="card-body">
<a href="" class="heading-card">Tilicho Lake Package Tour</a>
<span>NPR : 000.00</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://picsum.photos/220" alt="">
<div class="card-body">
<a href="" class="heading-card">Tilicho Lake Package Tour</a>
<span>NPR : 000.00</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card" style="position: fixed;">
<div class="card-header bg-primary text-white">
<span>From</span><h4>NPR 6,950.00</h4>
</div>
<div class="card-body m-0 p-0">
<div class=" m-0 p-2 mb-2 border-bottom"> <span>Date</span><br> <input type="date" class="border-0"> <i class="fas fa-caret-down float-right"></i></div>
<div class="mt-2 ml-2 p-2"><span class="mt-5">Adults</span>
<span class="float-right">
<button class="btn btn-lg mr-3"><i class="fas fa-minus"></i></button>
<span>0</span>
<button class="btn btn-lg ml-3 mr-3"><i class="fas fa-plus"></i></button>
</span>
</div>
<hr>
<div class="mt-2 ml-2 p-2"><span class="mt-5">Children</span>
<span class="float-right">
<button class="btn btn-lg mr-3"><i class="fas fa-minus"></i></button>
<span>0</span>
<button class="btn btn-lg ml-3 mr-3"><i class="fas fa-plus"></i></button>
</span>
</div><hr>
<div class="mt-2 ml-2 p-2"><span class="mt-">Indant</span>
<span class="float-right">
<button class="btn btn-lg mr-3"><i class="fas fa-minus"></i></button>
<span>0</span>
<button class="btn btn-lg ml-3 mr-3"><i class="fas fa-plus"></i></button>
</span>
</div>
<hr>
<div class="mt-2 ml-2 p-2">
<button class="btn btn-lg btn-primary text-center ml-5"> Book Now </button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</html>
Create style.css
.nav-links{
display: block;
font-weight: 500;
color: #1A2B48;
text-decoration: none;
/* line-height: 21px; */
margin-right : 20px;
margin-left : 20px;
}
.nav-links:hover{
text-decoration : none;
color:black;
}
.nav-bar>li{
list-style-type: none;
display : inline-block;
}
.icon-types{
font-size: 35px;
margin-right: 20px;
}
li{
list-style-type: none;
margin-top : 5px;
}
.ticks{
font-size : 14px;
}
.heading-card{
font:12px;
}
It is made resposive with the help of bootstrap
Share
http://bimash.com.np/SourceCode/Code/tour-package-details