Skip to content

Commit

Permalink
Merge pull request #114 from AnkitaMalik22/favourite-section
Browse files Browse the repository at this point in the history 
added favourite section
  • Loading branch information
@Arun9739
Arun9739 committed Oct 7, 2022
2 parents 48bbfe5 + 114849a commit 39fb37b
Show file tree
Hide file tree
Showing 2 changed files with 409 additions and 44 deletions.
344 changes: 344 additions & 0 deletions favourites.html
View file
@@ -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>

0 comments on commit 39fb37b

Please sign in to comment.