Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

added favourite section #114

Merged
merged 2 commits into from Oct 7, 2022
Merged

added favourite section #114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
584734a
added favourite section
AnkitaMalik22 Oct 6, 2022
114849a
Merge branch 'main' into favourite-section
AnkitaMalik22 Oct 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
344 changes: 344 additions & 0 deletions favourites.html
View file
Open in desktop
@@ -0,0 +1,344 @@
<!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">
<title>Paryatana</title>

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,700' rel='stylesheet' type='text/css'>
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<link href="css/flexslider.css" rel="stylesheet">
<link href="css/templatemo-style.css" rel="stylesheet">
<link href="css/scrollToTop.css" rel="stylesheet">
<link href="css/Homenavbar.css" rel="stylesheet">


</head>

<body class="tm-gray-bg">

<!-- Scroll to Top Button -->
<div class="scroll-up-btn">
<i class="fa fa-angle-up"></i>
</div>

<!-- Header -->
<div class="tm-header">
<div class="container">
<div class="row">
<div class="col-lg-5 col-md-4 col-sm-3 tm-site-name-container">
<a href="index.html" class="tm-site-name">Paryatana</a>
</div>
<div class="col-lg-7 col-md-8 col-sm-9">
<div class="mobile-menu-icon">
<i class="fa fa-bars"></i>
</div>
<nav class="tm-nav">
<ul>
<li><a href="index.html" >Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="tours.html">Our Tours</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="favourites.html" class="active"><i class="fa fa-heart "></i></a></li>

</ul>
</nav>
</div>
</div>
</div>
</div>

<!-- Banner -->
<section class="tm-banner">
<!-- Flexslider -->
<div class="flexslider flexslider-banner">
<ul class="slides">
<li>
<div class="tm-banner-inner">
<h1 class="tm-banner-title">Find <span class="tm-yellow-text">The Best</span> Place</h1>
<p class="tm-banner-subtitle">For Your Holidays</p>
<a href="#visit" class="tm-banner-link">Learn More</a>

</div>
<img src="img/banner-1.jpg" alt="Image" />
</li>
<li>
<div class="tm-banner-inner">
<h1 class="tm-banner-title">Walk <span class="tm-yellow-text"> through </span> dream</h1>
<p class="tm-banner-subtitle">Wonderful Destinations</p>

<a href="#popular" class="tm-banner-link">Learn More</a>

</div>
<img src="img/banner-2.jpg" alt="Image" />
</li>
<li>
<div class="tm-banner-inner">
<h1 class="tm-banner-title">Ride <span class="tm-yellow-text"> your </span> journey</h1>
<p class="tm-banner-subtitle"> Enjoy the nature</p>

<a href="#visit" class="tm-banner-link">Learn More</a>
</div>
<img src="img/banner-3.jpg" alt="Image" />
</li>
</ul>
</div>
</section>

<!-- gray bg -->
<section class="container tm-home-section-1" id="more">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6">
<!-- Nav tabs -->
<div class="tm-home-box-1">
<ul class="nav nav-tabs tm-white-bg" role="tablist" id="hotelCarTabs">
<li role="presentation" class="active">
<a href="#hotel" aria-controls="hotel" role="tab" data-toggle="tab">Hotel</a>
</li>
<li role="presentation">
<a href="#car" aria-controls="car" role="tab" data-toggle="tab">Car Rental</a>
</li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active tm-white-bg" id="hotel">
<div class="tm-search-box effect2">
<form action="#" method="post" class="hotel-search-form">
<div class="tm-form-inner">
<div class="form-group">
<select class="form-control">
<option value="">-- Select Hotel -- </option>
<option value="shangrila">The blue</option>
<option value="chatrium">Kailash</option>
<option value="fourseasons">Four Seasons</option>
<option value="hilton">Our house</option>
</select>
</div>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" placeholder="Check-in Date" />
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" placeholder="Check-out Date" />
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
<div class="form-group margin-bottom-0">
<select class="form-control">
<option value="">-- Guests -- </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5p">5+</option>
</select>
</div>
</div>
<div class="form-group tm-yellow-gradient-bg text-center">
<button type="submit" name="submit" class="tm-yellow-btn">Check Now</button>
</div>
</form>
</div>
</div>
<div role="tabpanel" class="tab-pane fade tm-white-bg" id="car">
<div class="tm-search-box effect2">
<form action="#" method="post" class="hotel-search-form">
<div class="tm-form-inner">
<div class="form-group">
<select class="form-control">
<option value="">-- Select Model -- </option>
<option value="shangrila">BMW</option>
<option value="chatrium">Mercedes-Benz</option>
<option value="fourseasons">Toyota</option>
<option value="hilton">Honda</option>
</select>
</div>
<div class="form-group">
<div class='input-group date-time' id='datetimepicker3'>
<input type='text' class="form-control" placeholder="Pickup Date" />
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<div class='input-group date-time' id='datetimepicker4'>
<input type='text' class="form-control" placeholder="Return Date" />
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<select class="form-control">
<option value="">-- Options -- </option>
<option value="">Child Seat</option>
<option value="">GPS Navigator</option>
<option value="">Insurance</option>
</select>
</div>
</div>
<div class="form-group tm-yellow-gradient-bg text-center">
<button type="submit" name="submit" class="tm-yellow-btn">Check Now</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>

<div class="col-lg-4 col-md-4 col-sm-6">
<div class="tm-home-box-1 tm-home-box-1-2 tm-home-box-1-center">
<img src="img/index-01.jpg" alt="image" class="img-responsive">
<a href="#">
<div class="tm-green-gradient-bg tm-city-price-container">
<span>Shimla</span>
<span>$500</span>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="tm-home-box-1 tm-home-box-1-2 tm-home-box-1-right">
<img src="img/index-02.jpg" alt="image" class="img-responsive">
<a href="#">
<div class="tm-red-gradient-bg tm-city-price-container">
<span>Kashmir</span>
<span>$200</span>
</div>
</a>
</div>
</div>
</div>

<div class="section-margin-top" id="visit">
<div class="row">
<div class="tm-section-header">
<div class="col-lg-3 col-md-3 col-sm-3"><hr></div>
<div class="col-lg-6 col-md-6 col-sm-6"><h2 class="tm-section-title">Your favourite places </h2></div>
<div class="col-lg-3 col-md-3 col-sm-3"><hr></div>
</div>
</div>
<div class="row" id="fav-box">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 col-xxs-12">
<div class="tm-home-box-2 ">
<img src="img/index-03.jpg" alt="image" class="img-responsive">
<h3>Goa beach</h3>
<p class="tm-date">28 March 2022</p>
<div class="tm-home-box-2-container">
<a href="#" class="tm-home-box-2-link"><i class="fa fa-heart tm-home-box-2-icon border-right"></i></a>
<a href="#" class="tm-home-box-2-link"><span class="tm-home-box-2-description">Travel</span></a>
<a href="#" class="tm-home-box-2-link"><i class="fa fa-edit tm-home-box-2-icon border-left"></i></a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<p class="home-description">Paryatana is the travelling website which will guide you through out your travelling journey </p>
</div>
</div>
</div>
</section>
<footer class="tm-black-bg">
<div class="container">
<div class="row">
<p class="tm-copyright-text">Copyright &copy; 2022 Paryatana

| Designed by Arun G Nayak</p>
</div>
</div>
</footer>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script> <!-- jQuery -->
<script type="text/javascript" src="js/scrollToTop.js"></script> <!-- Scroll To Top -->
<script type="text/javascript" src="js/moment.js"></script> <!-- moment.js -->
<script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- bootstrap js -->
<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script> <!-- bootstrap date time picker js, http://eonasdan.github.io/bootstrap-datetimepicker/ -->
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>

<script type="text/javascript" src="js/templatemo-script.js"></script> <!-- Templatemo Script -->
<script>
// HTML document is loaded. DOM is ready.
$(function() {

$('#hotelCarTabs a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})

$('.date').datetimepicker({
format: 'MM/DD/YYYY'
});
$('.date-time').datetimepicker();

// https://css-tricks.com/snippets/jquery/smooth-scrolling/
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});

// Load Flexslider when everything is loaded.
$(window).load(function() {

// For images only
$('.flexslider').flexslider({
controlNav: false
});


});


//favourites
let places = [];
if(localStorage.getItem('places')){
places = JSON.parse(localStorage.getItem('places'));


let favBox=document.getElementById("fav-box");
let box="";

places.forEach(place=> {

box +=
`<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 col-xxs-12 mb3">
<div class="tm-home-box-2 ">
<img src="${place.placeSrc}" alt="image" class="img-responsive">
<h3>${place.placeName}</h3>
<p class="tm-date">28 March 2022</p>
<div class="tm-home-box-2-container">
<a href="#" class="tm-home-box-2-link"><i class="fa fa-heart tm-home-box-2-icon border-right"></i></a>
<a href="#" class="tm-home-box-2-link"><span class="tm-home-box-2-description">Travel</span></a>
<a href="#" class="tm-home-box-2-link"><i class="fa fa-edit tm-home-box-2-icon border-left"></i></a>
</div>
</div>
</div>`
});
favBox.innerHTML=box;

}
</script>
</body>
</html>