Skip to content

Instantly share code, notes, and snippets.

@Ayushverma8

Ayushverma8/index.html - kandivali

Created June 7, 2019 06:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Ayushverma8/ed2ed3ddc21d886437294c923e67e414 to your computer and use it in GitHub Desktop.
Save Ayushverma8/ed2ed3ddc21d886437294c923e67e414 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html - kandivali
<!doctype html>
<html lang="en">
<head>
<!-- Title -->
<title>Yoga studio | Divayoga</title>
<!-- Meta Tags-->
<meta name="description"
content="We have different packages ranging from 6,000 to 47,500 to transform you into a Diva.">
<!-- Favicon -->
<link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon" />
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<!-- ionicframework -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css" />
<!-- Font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!-- Animate On Scroll Library -->
<link rel="stylesheet" href="assets/css/aos.css" />
<!-- custom styling -->
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="assets/css/responsive.css" />
<!-- Swiper Plugin -->
<link rel="stylesheet" href="assets/css/swiper.min.css">
<!-- pannellum Plugin -->
<link rel="stylesheet" href="assets/css/pannellum.css">
<style>
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
.error {
color: red;
font-weight: 500;
}
.banner-image {
width: 100%;
height: 100vh;
object-fit: fill;
}
.banner-image-mobile {
width: 100%;
object-fit: contain;
}
.custom-size-14 {
font-size: 14px;
}
.custom-size-15 {
font-size: 15px;
}
.custom-size-16 {
font-size: 16px;
}
.p-10 {
padding-top: 10px;
}
.custom-card {
background: #ccc;
border-radius: 0px;
padding: 20px;
}
.custom-buttom {
cursor: pointer;
padding: 10px 30px;
background: #ee3955;
color: #fff;
border: none;
}
.custom-footer {
background: #2a2a2b;
color: #fff;
}
</style>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-121179290-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-121179290-1');
</script>
<!-- Google Tag Manager -->
<script>
(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start': new Date().getTime(),
event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-MZ5VZ7N');
</script>
<!-- End Google Tag Manager -->
<style>
.packages .card img {
max-width: 100%;
margin-bottom: 0px !important;
margin-top: 0px !important;
}
#panorama {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MZ5VZ7N" height="0" width="0"
style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->
<?php include 'header.php' ?>
<div class="wrapper">
<section class="py-4">
<div class="container">
<div class="section-title text-center">
<h2>
<strong>Diva Yoga, in your neighbourhood.</strong>
</h2>
</div>
<div class="row align-items-center custom-banner-wrapper">
<div class="col-xs-12 col-md-7 col-lg-8 mt-3">
<!-- <div id="panorama"></div> -->
<img src="assets/images/landingPage/Kandivali (4).jpeg" alt="Diva Yoga" class="img-fluid">
</div>
<div class="col-xs-12 col-md-5 col-lg-4 mt-3">
<div class="thumbnail">
<h2>
<strong>GET FOUNDING MEMBERSHIP NOW!</strong>
</h2>
<form id="booking_form">
<div class="form-group">
<label for="name"><b>Name*</b></label>
<input class="form-control" id="name" placeholder="Enter your name" required />
</div>
<div class="form-group">
<label for="email"><b>Email*</b></label>
<input required type="email" class="form-control" id="email"
placeholder="name@example.com" />
<p class="error email-error-custom" style="display:none">Invalid email</p>
</div>
<div class="form-group">
<label for="phone_number"><b>Phone Number*</b></label>
<input required type="number" class="form-control" id="phone_number"
name="phone_number" minlength="8" maxlength="10"
placeholder="Enter your phone number" />
</div>
<div class="text-center p-10">
<button type="button" class="capitalize custom-buttom" type="button"
id="final_submit_founding_membership">
Get Membership
</button>
<button type="button" class="capitalize custom-buttom" type="button"
id="final_submit">
Call me Now
</button>
</div>
</form>
<div class="p-10 ">
<div id="custom-alert-success"
class="alert alert-success alert-dismissible fade show show-success d-none"
role="alert">
<strong> Thank you!</strong> Booking successfull.
<!-- <button class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button> -->
</div>
<div id="custom-alert-failure"
class="alert alert-danger alert-dismissible fade show show-failure d-none"
role="alert">
<strong>Oops!</strong> Please try again later.
<!-- <button class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button> -->
</div>
</div>
<div class="caption mt-2 ml-3">
<p class="studio-address">Address:<br>Xth Central Mall,90 Feet Rd, Next to D'Mart,
Mahavir Nagar, Satya Nagar, Kandivali, Mumbai, Maharashtra 400067 <br />098322 26695
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-4">
<div class="container-fluid">
<div class="section-title text-center">
<h2>
<strong>THE DIVA EXPERIENCE</strong>
</h2>
<div class="text-center w-75 mx-auto">
The Diva surroundings are moulded in such a way that they are created to help channelize the
Diva within. The Diva Yoga Studio helps you transform and grow into the beautiful goddess that
you are. </div>
</div>
<div class="mt-3 bg-diva-experience" id="aspects">
<div>
<div class="swiper-container gallery-thumbs pt-3">
<div class="swiper-wrapper">
<!-- <img src="assets/images/awreness.png" alt=""> -->
<div class="swiper-slide bg-img " data-hash="Awareness">
<img src="assets/images/awareness.png" alt="experience-posture" title="Awareness"
srcset="" />
</div>
<div class="swiper-slide bg-img" data-hash="Flexibility">
<img src="assets/images/flexibility.png" alt="experience-posture"
title="Flexibility" srcset="" />
</div>
<div class="swiper-slide bg-img" data-hash="Core">
<img src="assets/images/core.png" alt="experience-posture" title="Core" srcset="" />
</div>
<div class="swiper-slide bg-img" data-hash="Balance">
<img src="assets/images/balance.png" alt="experience-posture" title="Balance"
srcset="" />
</div>
<div class="swiper-slide bg-img" data-hash="Posture">
<img src="assets/images/posture.png" alt="experience-posture" title="Posture"
srcset="" />
</div>
<div class="swiper-slide bg-img" data-hash="Stamina">
<img src="assets/images/stamina.png" alt="experience-posture" title="Stamina"
srcset="" />
</div>
<div class="swiper-slide bg-img" data-hash="Strength">
<img src="assets/images/strength.png" alt="experience-posture" title="Strength"
srcset="" />
</div>
<div class="swiper-slide bg-img" data-hash="Healing">
<img src="assets/images/heading.png" alt="experience-posture" title="Healing"
srcset="" />
</div>
<div class="swiper-slide bg-img" data-hash="Delight">
<img src="assets/images/delight.png" alt="experience-posture" title="Delight"
srcset="" />
</div>
<div class="swiper-slide bg-img" data-hash="Weight">
<img src="assets/images/weight.png" alt="experience-posture" title="Weight"
srcset="" />
</div>
<div class="swiper-slide bg-img" data-hash="Toning">
<img src="assets/images/body-toning.png" alt="experience-posture" title="Toning"
srcset="" />
</div>
<div class="swiper-slide bg-img" data-hash="Mindfulness">
<img src="assets/images/mindfulness.png" alt="experience-posture"
title="Mindfulness" srcset="" />
</div>
</div>
<div class="swiper-button-next ion-android-arrow-forward"></div>
<div class="swiper-button-prev ion-android-arrow-back"></div>
</div>
<div class="swiper-container gallery-top pt-3">
<div class="swiper-wrapper ">
<div class="swiper-slide p-3" data-hash="Awareness">
<span class="text-bolder">Awareness - </span>
Here, your journey to finding your inner Diva begins.You become fully aware of the
self, the surroundings and of the process.We
achieve this through our unique insight session which helps to make one aware of
their own body and mind like never before.
</div>
<div class="swiper-slide p-3" data-hash="Flexibility">
<span class="text-bolder">Flexibility - </span>
Once the awareness sets in, it's now time to transform rigid and tired muscles into
happy flexible ones through stretches
and flexibility training. We believe that a flexible body and mind compliment each
other.
</div>
<div class="swiper-slide p-3" data-hash="Core">
<span class="text-bolder">Core - </span>
The core of any person just like that of the planet is what holds the magnetism and
strength of a being. With our core sessions,
we uncover your core potential and bring it to the surface.
</div>
<div class="swiper-slide p-3" data-hash="Balance">
<span class="text-bolder">Balance - </span>
Now that our core is activated, let the gift of balance be brought forth. A balanced
body and mind bring about harmony and
stability in all aspects of your life.
</div>
<div class="swiper-slide p-3" data-hash="Posture">
<span class="text-bolder">Posture Alignment - </span>
Gold looks like itself when it glitters and a perfect posture shows how evolved a
person is. Let balance that you have found
guide you through to perfect posture.
</div>
<div class="swiper-slide p-3" data-hash="Stamina">
<span class="text-bolder">Stamina - </span>
Now that we are flexible, centered, balanced and have great posture, let's see how
far it takes us. Being a woman is a demanding
job. Let our stamina training ensure you remain every bit the DIVA that you are
through
everything.
</div>
<div class="swiper-slide p-3" data-hash="Strength">
<span class="text-bolder">Strength - </span>
True strength comes from one's mind. When you have your mind set on transforming
into a diva, and have the stamina for it,
we begin our strength training. Strengthening of the bones, the muscles, the
ligaments,
the tendons and also of the mind, body and spirit.
</div>
<div class="swiper-slide p-3" data-hash="Healing">
<span class="text-bolder">Healing - </span>
Sessions to heal any remaining battle scars, to heal every layer of your fine being.
These sessions are aimed to heal the
physical body and to restore your energy.
</div>
<div class="swiper-slide p-3" data-hash="Delight">
<span class="text-bolder">Delight - </span>
It's time to celebrate - your journey, your effort, your awareness, your life and
most importantly yourself. Time to unwind
and feel the liveliness of life.
</div>
<div class="swiper-slide p-3" data-hash="Weight">
<span class="text-bolder">Weight Management - </span>
Use everything you have learned and experienced so far to give yourself the weight
you have always desired. Yes it's possible.
And you know it!
</div>
<div class="swiper-slide p-3" data-hash="Toning">
<span class="text-bolder">Body Toning - </span>
The stage to polish and fine tune the GORGEOUS body and personality that you have.
Even a diamond needs cutting and polishing
to bring out Its best. Shine on, like the diamond you are
</div>
<div class="swiper-slide p-3" data-hash="Mindfulness">
<span class="text-bolder">Mindfulness - </span>
The training which enables you to use your substance for the highest good of
yourself and others. Learning to channel all
your goodness, all your personal powers into a super version of yourself. Alchemy
in it's purest form!
</div>
</div>
</div>
</div>
</div>
<div class="row no-gutters mt-4">
<!-- <div class="col-xs-12 col-md-6">
<img src="assets/images/landingPage/Kandivali (4).jpeg" alt="Diva Yoga" class="img-fluid h-100 w-100 cover">
</div> -->
<div class="col-xs-12 col-md-6 m-auto">
<div class="row no-gutters">
<div class="col-xs-12 col-md-6">
<img src="assets/images/landingPage/Kandivali (1).jpeg" alt="Diva Yoga"
class="img-fluid h-100 w-100 cover">
</div>
<div class="col-xs-12 col-md-6">
<img src="assets/images/landingPage/Kandivali (2).jpeg" alt="Diva Yoga"
class="img-fluid h-100 w-100 cover">
</div>
<div class="col-xs-12 col-md-6">
<img src="assets/images/landingPage/Kandivali (3).jpeg" alt="Diva Yoga"
class="img-fluid h-100 w-100 cover">
</div>
<div class="col-xs-12 col-md-6">
<img src="assets/images/landingPage/Kandivali (4).jpeg" alt="Diva Yoga"
class="img-fluid h-100 w-100 cover">
</div>
</div>
</div>
</div>
<p class="text-center section-desc py-4">The perfect surrounds to perfect your yoga</p>
</div>
</section>
<section class="pb-4">
<div class="container-fluid m-auto">
<div class="section-title text-center">
<h2>
<strong>THE DIVA WAY</strong>
</h2>
</div>
<div class="swiper-container diva-way h-100">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="position-relative">
<img src="https://s3.ap-south-1.amazonaws.com/divayoga-assets/danda.png" alt="Diva Yoga" class="img-fluid" />
<div onclick="toggleLandingVideo('open','https://s3.ap-south-1.amazonaws.com/divayoga-assets/Danda+Yoga+Diva.mp4')"
class="diva-way-overlay">
<div>
<div class="play-icon text-center"><i class="far fa-play-circle"></i>
</div>
<!-- <div class="h5">Desk Yoga</div> -->
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="position-relative">
<img src="https://s3.ap-south-1.amazonaws.com/divayoga-assets/Diva+Squad.png" alt="Diva Yoga" class="img-fluid" />
<div onclick="toggleLandingVideo('open','https://s3.ap-south-1.amazonaws.com/divayoga-assets/Diva+Squad.mp4')"
class="diva-way-overlay">
<div>
<div class="play-icon text-center"><i class="far fa-play-circle"></i>
</div>
<!-- <div class="h5">Desk Yoga</div> -->
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="position-relative">
<img src="https://s3.ap-south-1.amazonaws.com/divayoga-assets/wheel.png" alt="Diva Yoga" class="img-fluid" />
<div onclick="toggleLandingVideo('open','https://s3.ap-south-1.amazonaws.com/divayoga-assets/Wheel+Yoga+Diva.mp4')"
class="diva-way-overlay">
<div>
<div class="play-icon text-center"><i class="far fa-play-circle"></i>
</div>
<!-- <div class="h5">Desk Yoga</div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p class="text-center section-desc py-4">Exclusive yoga. Exclusive for women.</p>
</section>
<section id="landingVideo" class="landing-video-wrapper d-none">
<div class="container h-100vh">
<div class="video-wrapper d-flex justify-content-center align-items-center w-100 h-100">
<video id="video" controls preload="auto" style="max-width: 100%">
Your browser does not support the video tag.
</video>
</div>
<div onclick="toggleLandingVideo('close')" class="close-video"><i class="fas fa-times-circle"></i></div>
</div>
</section>
<section class="py-4">
<div class="container-fluid">
<div class="section-title text-center">
<h2>
<strong>WHAT OUR DIVAS HAVE TO SAY</strong>
</h2>
</div>
<div class="position-relative">
<div class="swiper-container diva-say custom-swiper-pagination">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div
class="d-flex justify-content-center align-items-center w-75 mx-auto card-height text-center">
<div>
Diva Bandra almost feels like a spa ! I come here to workout and destress
simultaneously
</div>
</div>
<div class="custom-img-overlay">
<div class="person">Shruti P</div>
</div>
</div>
<div class="swiper-slide">
<div
class="d-flex justify-content-center align-items-center w-75 mx-auto card-height text-center">
<div>
The trainers here are amazing ! I have attended at least one class with most of
them and I think that the functional training class is fantastic
</div>
</div>
<div class="custom-img-overlay">
<div class="person">Tanya</div>
</div>
</div>
<div class="swiper-slide">
<div
class="d-flex justify-content-center align-items-center w-75 mx-auto card-height text-center">
<div>
They say its not easy to lose weight with yoga, but I think that’s not true ! I
have joined in March 2019 and I have already lost 3 kgs !
</div>
</div>
<div class="custom-img-overlay">
<div class="person">Sushma.G</div>
</div>
</div>
<div class="swiper-slide">
<div
class="d-flex justify-content-center align-items-center w-75 mx-auto card-height text-center">
<div>
The workouts are faaar from boring ! Even the yoga is si different and there’s
variety every day, we are always surprised at the amazing versatality of the
workouts
</div>
</div>
<div class="custom-img-overlay">
<div class="person">Danisha</div>
</div>
</div>
<div class="swiper-slide">
<div
class="d-flex justify-content-center align-items-center w-75 mx-auto card-height text-center">
<div>
I think everyone knows that the workouts here are amazing, but I want to talk
about the really friendly vibe at Diva Yoga ! Its as if I am here with friends,
starting from the front desk to the trainer, everything is absolutely dripping
with positivity !
</div>
</div>
<div class="custom-img-overlay">
<div class="person">Devika</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</section>
<section class="py-4 mt-5">
<div class="container-fluid">
<!-- <div class="section-title text-center">
<h2>
<strong>SCHEDULE</strong>
</h2>
</div> -->
<div class="row">
<div class="col-xs-12 col-md-6 m-auto">
<img src="assets/images/landingPage/Schedule-May-2019.jpg" class="img-fluid" alt="schedule">
</div>
</div>
</div>
</section>
<section class="py-4">
<div class="container">
<div class="section-title text-center">
<h2>
<strong>SESSION PACKAGE</strong>
</h2>
</div>
<div class="row justify-content-center">
<div class="col-xs-12 col-md-4 mt-4 pt-1 h-100 text-center">
<div class="session_package_card position-relative">
<div class="p-3 mb-5">
<h2 class="font-weight-bold text-uppercase">FOUNDING MEMBERSHIPS</h2>
<small class="p-2"> Founding members of Diva get loads of benefits that cant match up to
any of the other offers. Simply put, these are offers you cannot refuse. Founding
members get, a meet and greet with Malaika, A luxury gift hamper, Free access to
celebrity workshops, Free access to celebrity trainers, Free passes to a wellness
retreat and a chance to be a part of the high end wellness community.</small>
</div>
<a href="https://www.divayoga.com/contactus/" target="blank">
<div class="session_package_card_footer">ENROLL NOW</div>
</a>
</div>
</div>
<div class="col-xs-12 col-md-4 mt-4 pt-1 h-100 text-center">
<div class="session_package_card position-relative">
<div class="p-3 mb-5">
<h2 class="font-weight-bold text-uppercase">TONE 30 </h2>
<small class="p-2">Here’s your chance to have those arms you’ve always dreamt of ! That
flat belly and the toned abs you desire. Its time to TONE it up ! 30 sessions and
you’ll be looking younger, feeling more confident and definitely a lot lighter
!</small>
</div>
<a href="https://www.divayoga.com/contactus/" target="blank">
<div class="session_package_card_footer">ENROLL NOW</div>
</a>
</div>
</div>
<div class="col-xs-12 col-md-4 mt-4 pt-1 h-100 text-center">
<div class="session_package_card position-relative">
<div class="p-3 mb-5">
<h2 class="font-weight-bold text-uppercase">SUPER 60 </h2>
<small class="p-2">The Super 60 package helps you discover your own super power, so
whether its super strength, super flexibility or super mindfulness ! You’ll see the
change before you know it ! Go the extra mile, and enroll for the 60 session
membership !</small>
</div>
<a href="https://www.divayoga.com/contactus/" target="blank">
<div class="session_package_card_footer">ENROLL NOW</div>
</a>
</div>
</div>
<div class="col-xs-12 col-md-4 mt-4 pt-1 h-100 text-center">
<div class="session_package_card position-relative">
<div class="p-3 mb-5">
<h2 class="font-weight-bold text-uppercase">DIVA 90</h2>
<small class="p-2">It takes commitment to get fit and we’re here to help you ! Let the
Diva in you breathe, and reveal her true self to you ! Enroll for 90 sessions
!</small>
</div>
<a href="https://www.divayoga.com/contactus/" target="blank">
<div class="session_package_card_footer">ENROLL NOW</div>
</a>
</div>
</div>
<div class="col-xs-12 col-md-4 mt-4 h-100 text-center">
<div class="session_package_card position-relative">
<div class="p-3 mb-5">
<h2 class="font-weight-bold text-uppercase">GODDESS 120</h2>
<small class="p-2"> If you’ve always wanted that post workout pumped up glow, here’s
your chance to get that and more. With 120 sessions of Yoga, by the 120th session,
your life will have transformed entirely. These yoga sessions, will give you super
strength, perfect posture and peaceful sleep ! </small>
</div>
<a href="https://www.divayoga.com/contactus/" target="blank">
<div class="session_package_card_footer">ENROLL NOW</div>
</a>
</div>
</div>
<div class="col-xs-12 col-md-4 mt-4 pt-1 h-100 text-center">
<div class="session_package_card position-relative">
<div class="p-3 mb-5">
<h2 class="font-weight-bold text-uppercase">UNLIMITED DIVA</h2>
<small class="p-2">This is for those of you who cant get enough of Diva Yoga ! The
unlimited Diva is a package that has a year long validity which helps you go all out
! Get passes to Diva Yoga workshops, no limit on classes in a year, celebrity
trainer workshops and so much more ! Unleash the Diva to her full potential
!</small>
</div>
<a href="https://www.divayoga.com/contactus/" target="blank">
<div class="session_package_card_footer">ENROLL NOW</div>
</a>
</div>
</div>
</div>
</div>
</section>
<?php include 'footer.php'?>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
</script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<!-- Animate On Scroll Library -->
<script type="text/javascript" src="assets/js/aos.js"></script>
<!-- Swiper Plugin-->
<script type="text/javascript" src="assets/js/swiper.min.js"></script>
<!-- Custom Js -->
<script type="text/javascript" src="assets/js/common.js"></script>
<!-- pannellum Js -->
<script type="text/javascript" src="assets/js/pannellum.js"></script>
<!-- index js -->
<script type="text/javascript" src="assets/js/index.js"></script>
<script type="text/javascript">
$(document).ready(() => {
new Swiper('.swiper-container.diva-way', {
speed: 400,
slidesPerView: 3,
spaceBetween: 50,
// autoplay: {
// delay: 2500,
// },
breakpoints: {
767: {
slidesPerView: 1,
spaceBetween: 10
},
991: {
slidesPerView: 2,
spaceBetween: 30
}
}
});
new Swiper('.swiper-container.diva-say', {
speed: 400,
slidesPerView: 4,
spaceBetween: 50,
autoplay: {
delay: 2500,
},
breakpoints: {
767: {
slidesPerView: 1,
spaceBetween: 10
},
991: {
slidesPerView: 2,
spaceBetween: 30
}
},
pagination: {
el: '.diva-say .swiper-pagination',
},
});
pannellum.viewer('panorama', {
"autoLoad": true,
// "type": "equirectangular",
"panorama": "https://pannellum.org/images/alma.jpg"
});
})
function toggleLandingVideo(type, src) {
var classlist = document.getElementById('landingVideo').classList;
var videoElem = document.querySelector('#video');
var body = document.getElementsByTagName('body')[0];
if (type == 'open') {
var source = document.createElement('source');
body.style.overflow = 'hidden'
source.src = src;
source.type = 'video/mp4';
videoElem.load();
videoElem.appendChild(source);
videoElem.play()
classlist.remove('d-none')
}
if (type == 'close') {
body.style.overflow = 'initial'
videoElem.removeChild(videoElem.childNodes[1])
classlist.add('d-none')
videoElem.pause()
}
}
</script>
<style type="text/css">
span.h2 {
font-size: 1.75rem !important;
}
@media (max-width:767.98px) {
.close-video {
top: 25% !important;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
span.h2 {
font-size: 1rem !important;
}
}
.cover {
object-fit: cover;
}
.play-icon {
font-size: 4rem;
font-weight: 100;
}
.diva-way-overlay {
position: absolute;
color: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
cursor: pointer;
}
.diva-way-overlay .h5 {
font-weight: 500;
}
.video-wrapper {
position: relative;
}
.diva-way img {
border-radius: 1.5rem;
/* height:200px; */
object-fit: cover;
}
.diva-say .swiper-slide {
border: 2px solid #ee3955;
border-radius: 1.5rem;
position: relative;
overflow: hidden;
}
.diva-say .pannellum-img-overlay {
text-align: center;
position: absolute;
z-index: 99;
top: 0;
width: 100%;
height: 100%;
}
.diva-say .custom-img-overlay .person {
position: absolute;
bottom: 0;
width: 100%;
padding: 10px;
color: #fff;
font-size: 1.4rem;
background: #ee3955;
text-align: center;
}
.diva-say .custom-img-overlay .play-icon {
height: 100%;
width: 100%;
display: flex;
font-size: 4rem;
justify-content: center;
align-items: center;
color: #ee3955;
}
.section-title {
margin-bottom: 50px
}
.custom-banner-wrapper {
align-items: baseline;
}
.session_package_card {
display: flex;
height: inherit;
cursor: pointer;
min-height: 350px;
align-items: center;
justify-content: center;
box-shadow: 0px 0px 10px 0px #ee395566;
}
.session_package_card:hover {
box-shadow: 0px 0px 25px 0px #ee395566;
}
.session_package_card .session_package_card_footer {
left: 0;
bottom: 0;
color: #fff;
width: 100%;
padding: 10px 0;
position: absolute;
background: #ee3955;
}
.session_package_card h5 {
font-size: 1.5rem
}
.thumbnail-map {
position: relative;
}
.thumbnail-map img {
border-radius: 10px;
}
.thumbnail-map-caption {
position: absolute;
bottom: 0px;
left: 0;
right: 0;
color: #fff;
background-color: #ee3955;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding: 10px;
}
.section-desc {
font-size: 32px;
font-weight: 300;
}
.f-16 {
font-size: 16px;
}
.custom-swiper-pagination .swiper-pagination-bullet {
background: transparent;
border: 2px solid #ee3955;
opacity: 1;
}
.custom-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
background: #ee3955;
}
.custom-swiper-pagination.swiper-container {
position: static !important;
}
.swiper-container-horizontal>.swiper-pagination-bullets {
bottom: -35px !important;
}
.landing-video-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000c9;
z-index: 906;
}
.h-100vh {
height: 100vh;
}
.close-video {
color: #fff;
position: absolute;
top: 2rem;
right: 2rem;
font-size: 2rem;
cursor: pointer;
transition: all 0.3s;
}
.close-video:hover {
transform: scale(1.2);
}
.card-height {
height: calc(100% - 50px);
}
.studio-address {
color: #000;
text-decoration: none;
}
</style>
</body>
<script>
$(document).ready(function () {
$('#final_submit').click(function (e) {
var email = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
console.log("$('#email').val()", $('#email').val())
if (!email.test($('#email').val())) {
$('.email-error-custom').css('display', 'block')
} else {
$('.email-error-custom').css('display', 'none')
$("#booking_form").validate({
rules: {
name: "required",
email: {
required: true,
email: true
},
phone_number: {
required: true,
minlength: 8,
maxlength: 10
}
}
})
if ($('#booking_form').valid()) {
$('#final_submit').hide()
var name = $('#name').val()
var email = $('#email').val()
var phone_number = $('#phone_number').val()
$.ajax({
method: "post",
url: "celebrate-bandra/model/form_submit.php",
data: {
name: name,
email: email,
phone_number: phone_number
}
})
.done(function (msg) {
if (msg == 1) {
$('.show-success').removeClass('d-none')
window.location.href = "https://divayoga.com/thankyou";
} else {
$('.show-failure').removeClass('d-none')
}
});
}
}
});
$('#custom-alert-success button').on('click', function () {
$('#final_submit').show()
})
$('#custom-alert-failure button').on('click', function () {
$('#final_submit').show()
})
})
// Founding Membership
$(document).ready(function () {
$('#final_submit_founding_membership').click(function (e) {
var email = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
console.log("$('#email').val()", $('#email').val())
if (!email.test($('#email').val())) {
$('.email-error-custom').css('display', 'block')
} else {
$('.email-error-custom').css('display', 'none')
$("#booking_form").validate({
rules: {
name: "required",
email: {
required: true,
email: true
},
phone_number: {
required: true,
minlength: 8,
maxlength: 10
}
}
})
if ($('#booking_form').valid()) {
$('#final_submit_founding_membership').hide()
var name = $('#name').val()
var email = $('#email').val()
var phone_number = $('#phone_number').val()
$.ajax({
method: "post",
url: "celebrate-bandra/model/form_submit.php",
data: {
name: name,
email: email,
phone_number: phone_number
}
})
.done(function (msg) {
if (msg == 1) {
$('.show-success').removeClass('d-none')
window.location.href = "https://www.divayoga.com/contactus/";
} else {
$('.show-failure').removeClass('d-none')
}
});
}
}
});
$('#custom-alert-success button').on('click', function () {
$('#final_submit_founding_membership').show()
})
$('#custom-alert-failure button').on('click', function () {
$('#final_submit_founding_membership').show()
})
})
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment