<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css" rel="stylesheet" id="fw-css">
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row overflownone">
<div class="col-md-3 information nopaddingleft nopaddingright hidden-sm hidden-xs">
<h3 style="padding-left:0px;">Taste of India</h3>
<div class="row-fluid">
<div>
<!-- This is a repeat on all locations -->
<span ng-repeat="location in tourWithAllRelated[0].siteLocation">
<span style="color:white;">
<a style="color:white;" href="/city?id={{ location.id }}&countryid={{ location.country_id }}&name={{ location.city }}">Delhi | Agra | Jaipur</a><span ng-hide="$last"> <i class="fas fa-angle-right fa-sm"></i> </span>
</span>
</span>
</div>
<div>
<div style="color:white;display:block;">
Regular | Group | Individual
</div>
<div style="color:white;display:block;">
8 days | 7 nights
</div>
<div style="color:white;display:block;">
$550 onwards
</div>
</div>
</div>
<ul class="information_menu">
<li class="active" data-id="1"><a href="#"><i class="far fa-images"></i> Photos </a></li>
<li data-id="2"><a href="#"><i class="fas fa-video"></i> Videos </a></li>
<li data-id="3"><a href="#"><i class="fas fa-map"></i> Map </a></li>
</ul>
<div class="row" style="padding:5px;">
<span class="btn-group btn-group-justified">
<a ng-click="showEnquiryForm(tourWithAllRelated[0].id, tourWithAllRelated[0].name, tourWithAllRelated[0].price, tourWithAllRelated[0].days);" class="btn btn-default">
Send Enquiry
</a>
<a ng-click="showBookingForm(tourWithAllRelated[0].id, tourWithAllRelated[0].name, tourWithAllRelated[0].price, tourWithAllRelated[0].days);" class="btn btn-default">
Book Now
</a>
</span>
<div class="col3" style="height:100%">
</div>
</div>
</div>
<div class="col-md-9 nopaddingleft nopaddingright">
<div class="slideshow">
<div class="overlay-id1 overlay-item">
<div id="carousel-example-generic1" class="carousel slide carousel-fade" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic1" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic1" data-slide-to="1"></li>
<li data-target="#carousel-example-generic1" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="carousel-caption">
<h3>Test 3.a</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>Test 3.b</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>Test 3.c</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic1" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic1" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="overlay-id2 overlay-item">
<div id="carousel-example-generic2" class="carousel slide carousel-fade" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic2" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic2" data-slide-to="1"></li>
<li data-target="#carousel-example-generic2" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<iframe width="720" height="405" src="https://www.youtube.com/embed/Z8e3BSopTg8" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>Test 1.b</h3>
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/CR62t5lPrJ0?rel=0" width="auto">></iframe>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>Test 1.c</h3>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" width="auto">></iframe>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic2" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic2" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="overlay-id3 overlay-item">
<div id="carousel-example-generic3" class="carousel slide carousel-fade" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic3" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic3" data-slide-to="1"></li>
<li data-target="#carousel-example-generic3" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="carousel-caption">
<h3>Test 2.a</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>Test 2.b</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>Test 2.c</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic3" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic3" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="overlay-id4 overlay-item">
<div id="carousel-example-generic4" class="carousel slide carousel-fade" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic4" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic4" data-slide-to="1"></li>
<li data-target="#carousel-example-generic4" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="carousel-caption">
<h3>Test 3.a</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>Test 3.b</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>Test 3.c</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic4" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic4" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Validation -->
<p>
<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2Fd2DzN" target="_blank"><small>HTML</small><sup>5</sup></a>
</p>
<!--
<div class="row visible-xs visible-sm ">
<div class="col-md-12 mobile-menu-bg">
<ul class="information_menu_mobile">
<li class="active"><a href="#"><i class="fa fa-calendar-plus-o"></i> <span class="hidden-xs">Lorem ipsum</span></a></li>
<li><a href="#"><i class="fa fa-commenting-o"></i> <span class="hidden-xs">Praesent posuere</span></a></li>
<li><a href="#"><i class="fa fa-medkit"></i> <span class="hidden-xs">Phasellus imperdiet</span></a></li>
<li><a href="#"><i class="fa fa-heartbeat"></i> <span class="hidden-xs">In accumsan</span></a></li>
</ul>
<div class="clearfix"></div>
</div>
</div>
-->
</div>
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');
html {
font-size: 62.5%;
}
body {
font-size: 14px;
font-size: 14px;
font-size: 1.4rem;
background: #f5f5f5;
padding-top: 30px;
}
h3 {
font-size: 24px;
font-size: 24px;
font-size: 2.4rem;
}
.nopaddingleft {
padding-left: 0;
}
.nopaddingright {
padding-right: 0;
}
.overflownone {
overflow: hidden!important;
}
.information {
background: #2a3d46;
position: relative;
height: 400px;
}
.information h3 {
font-size: 34px;
font-size: 3.4rem;
font-family: "roboto", sans-serif;
font-weight: 500;
color: #FFF;
padding: 0 15px;
}
.information .information_menu {
padding: 0;
}
.information .information_menu li {
list-style: none;
position: relative;
}
.information .information_menu li.active {
background: #0383c5;
}
.information .information_menu li.active:after {
content: "";
width: 0;
height: 0;
border-top: 27px solid transparent;
border-bottom: 27px solid transparent;
border-left: 22px solid #0383c5;
position: absolute;
right: -22px;
z-index: 1000;
top: 0;
}
.information .information_menu li a {
color: #FFF;
display: block;
padding: 16px 20px;
font-size: 15px;
font-size: 1.5rem;
text-decoration: none;
}
.information .btn-emergency {
background: #f89406;
border: none;
margin: 20px;
display: block;
width: 88%;
color: #fff;
text-shadow: none;
padding: 0;
font-size: 20px;
font-size: 2rem;
}
.information .btn-emergency span {
padding: 15px;
display: block;
background-size: 30px 30px;
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0.25, rgba(255, 255, 255, .15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, .15)), color-stop(0.75, rgba(255, 255, 255, .15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: linear, 135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent;
-webkit-animation: animate-stripes 3s linear infinite;
-moz-animation: animate-stripes 3s linear infinite;
}
.mobile-menu-bg {
background: #2a3d46;
}
.information_menu_mobile {
margin: 0px;
padding: 0;
}
.information_menu_mobile li {
padding: 0;
float: left;
width: 25%;
list-style: none;
text-align: center;
}
.information_menu_mobile li a {
display: block;
padding: 10px;
color: #FFF;
text-decaration: none;
}
.information_menu_mobile li:hover a {
background: #0383c5;
text-decaration: none;
}
.slideshow {
overflow: hidden;
}
.slideshow .overlay-item {
position: absolute;
top: 0;
z-index: 999;
width: 100%;
//background: rgba(248, 148, 6, 0.67);
height: 400px;
padding: 0px;
display: none;
-webkit-animation: opendoor 0.75s ease 0s alternate;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.slideshow .overlay-item.active {
display: block;
-webkit-animation: opendoor 0.75s ease 0s alternate;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.slideshow .overlay-item.inactive {
display: block;
-webkit-animation: closedoor 0.75s ease 0s alternate;
transform-style: preserve-3d;
opacity:0;
}
.slideshow .overlay-item .quickmenu {
padding: 0;
}
.slideshow .overlay-item .quickmenu li {
list-style: none;
}
.slideshow .overlay-item .quickmenu li a {
color: #FFF;
display: block;
padding: 8px 20px;
font-size: 15px;
font-size: 1.5rem;
text-decoration: none;
}
#slider {
padding: 0px;
margin: 0px
}
#slider li {
padding: 0px;
list-style: none;
position: absolute;
}
#carousel-example-generic {
height: 400px
}
.carousel-fade .carousel-inner .item {
-webkit-transition-property: opacity;
transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
opacity: 0;
filter: alpha(opacity=0);
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
filter: alpha(opacity=100);
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
z-index: 2;
}
html,
body,
.carousel,
.carousel-inner,
.carousel-inner .item {
height: 100%;
}
.item:nth-child(1) {
background: #74C390;
}
.item:nth-child(2) {
background: #51BCE8;
}
.item:nth-child(3) {
background: #E46653;
}
@-webkit-keyframes animate-stripes {
0% {
background-position: 0 0;
}
100% {
background-position: 60px 0;
}
}
@-webkit-keyframes in {
from {
-webkit-transform: scale(1.3);
}
to {
-webkit-transform: scale(1);
}
}
@-webkit-keyframes out {
0% {
-webkit-transform: scale(1);
}
100% {
-webkit-transform: scale(1.3);
}
}
@-webkit-keyframes opendoor {
from {
-webkit-transform: perspective(1000px) rotateY(90deg);
-webkit-transform-origin: 0% 50%;
}
to {
-webkit-transform: perspective(1000px) rotateY(0deg);
-webkit-transform-origin: 0% 50%;
}
}
@-webkit-keyframes closedoor {
from {
opacity:1;
-webkit-transform-origin: 0% 50%;
}
to {
opacity:0;
-webkit-transform-origin: 0% 50%;
}
}
(function($){
$(document).ready(function() {
$(".overlay-id1").addClass("active");
$('.information_menu').find('li').click(function(e) {
$('.information_menu').find('li').removeClass('active');
$(this).addClass('active');
$(".overlay-item").removeClass("active");
$(".overlay-item").removeClass("inactive");
$(".overlay-id"+$(this).data("id")).addClass("active").removeClass("inactive");
$(".overlay-id"+$(this).data("id")).prev().addClass("inactive")
});
/*
$('.slideshow').children().on('mouseleave',function(e) {
$(this).removeClass("active");
});
*/
$('.carousel').carousel();
});
})(jQuery);
