920 lines
60 KiB
HTML
920 lines
60 KiB
HTML
<!doctype html>
|
|
<html class="no-js" lang="en">
|
|
<head>
|
|
<title>Crafto - The Multipurpose HTML5 Template</title>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="author" content="ThemeZaa">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
|
<meta name="description" content="Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 52+ ready demos.">
|
|
|
|
<link rel="shortcut icon" href="images/favicon.png">
|
|
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
|
|
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
|
|
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
|
|
<link rel="stylesheet" type="text/css" href="revolution/css/settings.css">
|
|
<link rel="stylesheet" type="text/css" href="revolution/css/layers.css">
|
|
<link rel="stylesheet" type="text/css" href="revolution/css/navigation.css">
|
|
|
|
<link rel="stylesheet" href="revolution/revolution-addons/particles/css/revolution.addon.particles-ver=1.0.3.css" type="text/css" media="all" />
|
|
|
|
<link rel="stylesheet" href="css/vendors.min.css" />
|
|
<link rel="stylesheet" href="css/icon.min.css" />
|
|
<link rel="stylesheet" href="css/style.min.css" />
|
|
<link rel="stylesheet" href="css/responsive.min.css" />
|
|
<link rel="stylesheet" href="demos/yoga-and-meditation/yoga-and-meditation.css" />
|
|
</head>
|
|
<body data-mobile-nav-trigger-alignment="right" data-mobile-nav-style="modern" data-mobile-nav-bg-color="#393334" class="custom-cursor">
|
|
|
|
<div class="cursor-page-inner">
|
|
<div class="circle-cursor circle-cursor-inner"></div>
|
|
<div class="circle-cursor circle-cursor-outer"></div>
|
|
</div>
|
|
|
|
|
|
<header>
|
|
|
|
<nav class="navbar navbar-expand-lg header-transparent bg-transparent header-reverse" data-header-hover="light">
|
|
<div class="container-fluid">
|
|
<div class="col-auto col-lg-2 me-lg-0 me-auto">
|
|
<a class="navbar-brand" href="demo-yoga-and-meditation.html">
|
|
<img src="images/demo-yoga-and-meditation-logo-white.png" data-at2x="images/demo-yoga-and-meditation-logo-white@2x.png" alt class="default-logo">
|
|
<img src="images/demo-yoga-and-meditation-logo-black.png" data-at2x="images/demo-yoga-and-meditation-logo-black@2x.png" alt class="alt-logo">
|
|
<img src="images/demo-yoga-and-meditation-logo-black.png" data-at2x="images/demo-yoga-and-meditation-logo-black@2x.png" alt class="mobile-logo">
|
|
</a>
|
|
</div>
|
|
<div class="col-auto menu-order position-static">
|
|
<button class="navbar-toggler float-start" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-line"></span>
|
|
<span class="navbar-toggler-line"></span>
|
|
<span class="navbar-toggler-line"></span>
|
|
<span class="navbar-toggler-line"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav alt-font">
|
|
<li class="nav-item"><a href="demo-yoga-and-meditation.html" class="nav-link">Home</a></li>
|
|
<li class="nav-item"><a href="demo-yoga-and-meditation-about.html" class="nav-link">About</a></li>
|
|
<li class="nav-item"><a href="demo-yoga-and-meditation-classes.html" class="nav-link">Classes</a></li>
|
|
<li class="nav-item"><a href="demo-yoga-and-meditation-schedule.html" class="nav-link">Schedule</a></li>
|
|
<li class="nav-item"><a href="demo-yoga-and-meditation-gallery.html" class="nav-link">Gallery</a></li>
|
|
<li class="nav-item"><a href="demo-yoga-and-meditation-trainer.html" class="nav-link">Trainer</a></li>
|
|
<li class="nav-item"><a href="demo-yoga-and-meditation-contact.html" class="nav-link">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto col-lg-2 text-end">
|
|
<div class="header-icon">
|
|
<div class="header-social-icon icon">
|
|
<a href="https://www.facebook.com" target="_blank"><i class="fa-brands fa-facebook-f"></i></a>
|
|
<a href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i></a>
|
|
<a href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
|
|
<section class="p-0" style="background: radial-gradient(circle, rgb(255 124 85) 0%, rgb(255 68 109) 60%, rgb(223, 26, 91) 100%);">
|
|
<article class="content">
|
|
<div id="yoga-and-meditation-slider_wrapper" class="rev_slider_wrapper fullscreen-container">
|
|
|
|
<div id="yoga-and-meditation-slider" class="rev_slider fullscreenbanner" data-version="5.4.5">
|
|
|
|
<ul>
|
|
|
|
<li id="rs-architecture-01" style="background-image: url('images/demo-yoga-and-meditation-slider-06.png')" data-index="rs-architecture-01" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="default" data-rotate="0" data-fstransition="fade" data-fsmasterspeed="100" data-fsslotamount="2" data-saveperformance="off" data-title="Slide" data-param1 data-param2 data-param3 data-param4 data-param5 data-param6 data-param7 data-param8 data-param9 data-param10="{"revslider-weather-addon":{"type":"name","name":"Cologne","woeid":"667931","unit":"c"}}" data-description>
|
|
|
|
<img src="images/rev-trans-tile.png" data-bgcolor alt data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="off" class="rev-slidebg" data-no-retina>
|
|
|
|
<div class="tp-caption tp-shape tp-shapewrapper tp-resizeme" id="slide-01-layer-01" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['-40','-40','-40','0']" data-width="['990','850','750','400']" data-height="['990','850','750','400']" data-whitespace="nowrap" data-type="shape" data-responsive_offset="off" data-responsive="on" data-frames="[{"delay":2600,"speed":1000,"frame":"0","from":"x:0px;y:50px;rX:0deg;rY:0deg;rZ:0deg;sX:0.5;sY:0.5;opacity:0;","to":"o:1;","ease":"Back.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]" data-textAlign="['inherit','inherit','inherit','inherit']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]">
|
|
<span class="wave-sonar"></span>
|
|
</div>
|
|
|
|
|
|
<div class="tp-caption tp-shape tp-shapewrapper tp-resizeme" id="slide-01-layer-02" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['-70','-40','-40','-20']" data-width="['820','850','620','400']" data-height="['820','850','620','400']" data-whitespace="nowrap" data-type="shape" data-responsive_offset="off" data-responsive="on" data-frames="[{"delay":2600,"speed":1000,"frame":"0","from":"x:0px;y:50px;rX:0deg;rY:0deg;rZ:0deg;sX:0.5;sY:0.5;opacity:0;","to":"o:1;","ease":"Back.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]" data-textAlign="['inherit','inherit','inherit','inherit']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" style="background:rgba(255,255,255,0.05); border-radius: 50%;"> </div>
|
|
|
|
|
|
<div class="tp-caption tp-shape tp-shapewrapper tp-resizeme" id="slide-01-layer-03" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['-70','-40','-40','-20']" data-width="['620','650','500','300']" data-height="['620','650','500','300']" data-whitespace="nowrap" data-type="shape" data-responsive_offset="off" data-responsive="on" data-frames="[{"delay":2200,"speed":1000,"frame":"0","from":"x:0px;y:50px;rX:0deg;rY:0deg;rZ:0deg;sX:0.5;sY:0.5;opacity:0;","to":"o:1;","ease":"Back.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]" data-textAlign="['inherit','inherit','inherit','inherit']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" style="background:rgba(0,0,0,0.1); border-radius: 50%;"> </div>
|
|
|
|
|
|
<div class="tp-caption tp-shape tp-shapewrapper tp-resizeme" id="slide-01-layer-04" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['-70','-70','-70','0']" data-width="['660','600','560','200']" data-height="['660','600','560','200']" data-whitespace="nowrap" data-type="shape" data-responsive_offset="on" data-responsive="on" data-frames="[{"delay":2200,"speed":1000,"frame":"0","from":"x:0px;y:30px;rX:0deg;rY:0deg;rZ:0deg;sX:0.5;sY:0.5;fb:100px;opacity:0;","to":"o:1;","ease":"Back.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]" data-textAlign="['inherit','inherit','inherit','inherit']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" style="background:radial-gradient(circle, rgba(136,29,40,1) 0%, rgba(136,29,40,0.95) 30%, rgba(136,29,40,0) 70%);border-radius:50%;"> </div>
|
|
|
|
|
|
<div class="tp-caption tp-resizeme yoga-and-meditation-slider-images" id="slide-01-layer-05" data-x="['center','center','center','center']" data-hoffset="['2','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['30','0','0','0']" data-width="['1000','auto','auto','auto']" data-height="auto" data-whitespace="nowrap" data-type="image" data-responsive_offset="on" data-responsive="on" data-frames="[{"delay":800,"speed":1000,"frame":"0","from":"opacity:0;fb:20px","to":"o:1;fb:0px","ease":"power3.inOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"power3.inOut"}]" data-textAlign="['inherit','inherit','inherit','inherit']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,100,80,50]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,100,80,50]" data-basealign="slide">
|
|
<img src="images/demo-yoga-and-meditation-slider-02.png" data-ww="100%" data-hh="auto" alt data-no-retina>
|
|
</div>
|
|
|
|
|
|
<div class="tp-caption tp-resizeme yoga-and-meditation-slider-text rs-parallaxlevel-5" id="slide-01-layer-06" data-x="['center','center','center','center']" data-hoffset="['20','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['-60','-50','-50','0']" data-width="['1200','auto','auto','auto']" data-height="auto" data-whitespace="nowrap" data-responsive_offset="on" data-responsive="on" data-type="image" data-frames="[{"delay":2000,"speed":500,"frame":"0","from":"x:0px;y:50px;rX:0deg;rY:0deg;rZ:0deg;sX:0.5;sY:0.5;opacity:0;","to":"o:1;","ease":"Back.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]" data-textAlign="['inherit','inherit','inherit','inherit']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,20,10]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,40,20]" data-basealign="slide">
|
|
<img src="images/demo-yoga-and-meditation-slider-05.png" data-ww="100%" data-hh="auto" alt data-no-retina>
|
|
</div>
|
|
|
|
|
|
<div class="tp-caption tp-resizeme yoga-and-meditation-slider-text rs-parallaxlevel-5" id="slide-01-layer-07" data-x="['center','center','center','center']" data-hoffset="['20','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['-60','-50','-50','0']" data-width="['1200','auto','auto','auto']" data-height="auto" data-whitespace="nowrap" data-type="image" data-responsive_offset="on" data-responsive="on" data-frames="[{"delay":3000,"speed":1000,"frame":"0","from":"x:0px;y:50px;rX:0deg;rY:0deg;rZ:0deg;sX:0.5;sY:0.5;opacity:0;fb:20px","to":"o:1;fb:0px","ease":"Back.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]" data-textAlign="['inherit','inherit','inherit','inherit']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,20,20,10]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,40,40,20]" data-basealign="slide">
|
|
<img src="images/demo-yoga-and-meditation-slider-03.png" data-ww="100%" data-hh="auto" alt data-no-retina>
|
|
</div>
|
|
|
|
|
|
<div class="tp-caption tp-resizeme yoga-and-meditation-slider-text rs-parallaxlevel-6" id="slide-01-layer-08" data-x="['center','center','center','center']" data-hoffset="['15','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['-60','-50','-50','0']" data-width="['1200','auto','auto','auto']" data-height="auto" data-whitespace="nowrap" data-type="image" data-responsive_offset="on" data-responsive="on" data-frames="[{"delay":3300,"speed":1000,"frame":"0","from":"x:0px;y:50px;rX:0deg;rY:0deg;rZ:0deg;sX:0.5;sY:0.5;opacity:0;fb:20px","to":"o:1;fb:0px","ease":"Back.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]" data-textAlign="['inherit','inherit','inherit','inherit']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,20,20,10]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,40,40,20]" data-basealign="slide">
|
|
<img src="images/demo-yoga-and-meditation-slider-04.png" data-ww="100%" data-hh="auto" alt data-no-retina>
|
|
</div>
|
|
|
|
|
|
<div class="tp-caption tp-resizeme yoga-and-meditation-slider-images" id="slide-01-layer-09" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['30','0','0','0']" data-width="['1000','auto','auto','auto']" data-height="auto" data-whitespace="nowrap" data-type="image" data-responsive_offset="on" data-responsive="on" data-frames="[{"delay":800,"speed":1000,"frame":"0","from":"opacity:0;fb:20px","to":"o:1;fb:0px","ease":"power3.inOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"power3.inOut"}]" data-textAlign="['inherit','inherit','inherit','inherit']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,100,80,50]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,100,80,50]" data-basealign="slide">
|
|
<img src="images/demo-yoga-and-meditation-slider-01.png" data-ww="100%" data-hh="auto" alt data-no-retina>
|
|
</div>
|
|
|
|
|
|
<div class="tp-caption tp-resizeme alt-font rs-parallaxlevel-0" id="slide-01-layer-10" data-frames="[{"delay":3600,"speed":600,"frame":"0","from":"opacity:0;fb:20px","to":"o:1;fb:0px","ease":"power3.inOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"power3.inOut"}]" data-visibility="['on','on','on','on']" data-fontsize="['25','25','22','20']" data-lineheight="['33','30','30','20']" data-fontweight="['300','300','300','300']" data-color="['#ffffff','#ffffff','#ffffff','#ffffff']" data-textAlign="['center','center','center','center']" data-letterspacing="['0','0','0','0']" data-x="['center','center','center','center']" data-y="['bottom','bottom','bottom','bottom']" data-hoffset="['0','0','0','0']" data-voffset="['80','100','80','90']" data-width="['100%','auto','100%','100%']" data-height="['auto','auto','auto','auto']" data-whitespace="['nowpar','nowpar','nowpar','nowpar']" data-margintop="[0, 0, 0, 0]" data-marginright="[0, 0, 0, 0]" data-marginbottom="[10, 0, 10, 10]" data-marginleft="[0, 0, 0, 0]" data-responsive_offset="off" data-responsive="on" data-type="text">
|
|
<span class="w-20px h-1px bg-white d-inline-block align-middle me-10px"></span>
|
|
Better control your senses
|
|
<span class="w-20px h-1px bg-white d-inline-block align-middle ms-10px"></span>
|
|
</div>
|
|
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
|
|
|
|
<section id="down-section" class="position-relative pb-0 sm-pb-50px">
|
|
<div class="container">
|
|
<div class="text-center overlap-section d-none d-md-block">
|
|
<a href="demo-yoga-and-meditation.html#down-section" class="mb-6 d-block inner-link">
|
|
<div class="d-flex justify-content-center align-items-center mx-auto box-shadow-large rounded-circle h-75px w-75px text-dark-gray bg-white">
|
|
<i class="bi bi-mouse icon-very-medium lh-0px"></i>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="row justify-content-center mb-2">
|
|
<div class="col-lg-7 text-center" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<span class="fs-15 alt-font fw-600 text-base-color text-uppercase ls-3px">Studio philosophy</span>
|
|
<h3 class="alt-font text-dark-gray ls-minus-1px">Relax your mind and spirit</h3>
|
|
</div>
|
|
</div>
|
|
<div class="row row-cols-1 row-cols-lg-4 row-cols-sm-2 justify-content-center mb-5 md-mb-9" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
|
|
<div class="col icon-with-text-style-10 md-mb-50px sm-mb-30px border-end border-color-extra-medium-gray">
|
|
<div class="feature-box">
|
|
<div class="feature-box-icon feature-box-icon-rounded w-120px h-120px rounded-circle mb-25px">
|
|
<img src="images/demo-yoga-and-meditation-icon-01.png" class="h-65px" alt>
|
|
</div>
|
|
<div class="feature-box-content last-paragraph-no-margin">
|
|
<span class="d-inline-block primary-font fw-500 text-dark-gray mb-5px fs-19">Great environment</span>
|
|
<p class="w-65 xl-w-80 mx-auto">Best environment in our yoga studio.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col icon-with-text-style-10 md-mb-50px sm-mb-30px border-end md-border-end-0 border-color-extra-medium-gray">
|
|
<div class="feature-box">
|
|
<div class="feature-box-icon feature-box-icon-rounded w-120px h-120px rounded-circle mb-25px">
|
|
<img src="images/demo-yoga-and-meditation-icon-02.png" class="h-65px" alt>
|
|
</div>
|
|
<div class="feature-box-content last-paragraph-no-margin">
|
|
<span class="d-inline-block primary-font fw-500 text-dark-gray mb-5px fs-19">Demand classes</span>
|
|
<p class="w-65 xl-w-80 mx-auto">Allow you to learn at your own demand.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col icon-with-text-style-10 sm-mb-30px border-end border-color-extra-medium-gray">
|
|
<div class="feature-box">
|
|
<div class="feature-box-icon feature-box-icon-rounded w-120px h-120px rounded-circle mb-25px">
|
|
<img src="images/demo-yoga-and-meditation-icon-03.png" class="h-65px" alt>
|
|
</div>
|
|
<div class="feature-box-content last-paragraph-no-margin">
|
|
<span class="d-inline-block primary-font fw-500 text-dark-gray mb-5px fs-19">Religion program</span>
|
|
<p class="w-65 xl-w-80 mx-auto">Key element in most human cultures.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col icon-with-text-style-10">
|
|
<div class="feature-box">
|
|
<div class="feature-box-icon feature-box-icon-rounded w-120px h-120px rounded-circle mb-25px">
|
|
<img src="images/demo-yoga-and-meditation-icon-04.png" class="h-65px" alt>
|
|
</div>
|
|
<div class="feature-box-content last-paragraph-no-margin">
|
|
<span class="d-inline-block primary-font fw-500 text-dark-gray mb-5px fs-19">Trained people</span>
|
|
<p class="w-65 xl-w-80 mx-auto">Our yoga trainers are professionals.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="row" data-anime="{ "translateY": [30, 0], "opacity": [0,1], "duration":600, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<div class="col-12 text-center">
|
|
<div class="text-dark-gray fs-28 alt-font ls-minus-05px">Yoga is the journey of the <span class="text-decoration-line-bottom-medium">self through</span> the self.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="position-relative overflow-hidden pt-5 d-none d-md-block">
|
|
<div class="shape-image-animation p-0 w-100">
|
|
<svg xmlns="http://www.w3.org/2000/svg" widht="auto" height="100" viewBox="0 150 3000 100">
|
|
<path class="st1" d="M 0 190 C 1200 400 1200 50 3000 190 L 3000 350 L 0 350 L 0 190" fill="#e9e2e3">
|
|
<animate attributeName="d" dur="8s" values="M 0 190 C 1200 400 1200 50 3000 190 L 3000 350 L 0 350 L 0 190;
|
|
M 0 190 C 400 50 400 400 3000 190 L 3000 350 L 0 350 L 0 190;
|
|
M 0 190 C 1200 400 1200 50 3000 190 L 3000 350 L 0 350 L 0 190" repeatCount="indefinite" />
|
|
</path>
|
|
<path class="st1" d="M 0 190 C 1200 400 1200 50 3000 190 L 3000 350 L 0 350 L 0 190" fill="#f8f2f3">
|
|
<animate attributeName="d" dur="5s" values="M 0 190 C 1200 400 1200 50 3000 190 L 3000 350 L 0 350 L 0 190;
|
|
M 0 190 C 400 50 400 400 3000 190 L 3000 350 L 0 350 L 0 190;
|
|
M 0 190 C 1200 400 1200 50 3000 190 L 3000 350 L 0 350 L 0 190" repeatCount="indefinite" />
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="pt-3 bg-very-light-gray overflow-hidden sm-pt-50px">
|
|
<div class="container">
|
|
<div class="row justify-content-center mb-1">
|
|
<div class="col-lg-7 text-center" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<span class="fs-15 alt-font fw-600 text-base-color text-uppercase ls-3px">Popular classes</span>
|
|
<h3 class="alt-font text-dark-gray ls-minus-1px">Find what you love</h3>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12 position-relative">
|
|
<div class="outside-box-right-20 sm-outside-box-left-0 sm-outside-box-right-0" data-anime="{ "translateY": [0, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<div class="swiper magic-cursor" data-slider-options="{ "slidesPerView": 1, "spaceBetween": 30, "loop": true, "autoplay": { "delay": 4000, "disableOnInteraction": false }, "pagination": { "el": ".slider-four-slide-pagination", "clickable": true, "dynamicBullets": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "1400": { "slidesPerView": 4 }, "992": { "slidesPerView": 3 }, "768": { "slidesPerView": 2 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }">
|
|
<div class="swiper-wrapper pt-20px pb-20px">
|
|
|
|
<div class="swiper-slide">
|
|
<div class="box-shadow-extra-large services-box-style-01 hover-box last-paragraph-no-margin border-radius-4px overflow-hidden">
|
|
<div class="position-relative box-image">
|
|
<img src="images/demo-yoga-and-meditation-home-02.jpg" alt>
|
|
</div>
|
|
<div class="bg-white">
|
|
<div class="ps-50px pe-50px pt-35px sm-p-35px sm-pb-0">
|
|
<a href="demo-yoga-and-meditation-classes.html" class="d-inline-block fs-19 primary-font fw-500 text-dark-gray mb-5px">Kundalini yoga</a>
|
|
<p>Lorem ipsum dolor eiusmod adipiscing lit tempor.</p>
|
|
</div>
|
|
<div class="border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px mt-30px sm-ps-35px sm-pe-35px position-relative">
|
|
<div class="fs-17"><span class="text-dark-gray fs-26 alt-font me-5px">$220</span>Per month</div>
|
|
<a href="demo-yoga-and-meditation-classes.html" class="d-flex justify-content-center align-items-center w-55px h-55px lh-55 rounded-circle bg-dark-gray position-absolute right-40px top-minus-30px"><i class="bi bi-arrow-right-short text-white icon-very-medium"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="box-shadow-extra-large services-box-style-01 hover-box last-paragraph-no-margin border-radius-4px overflow-hidden">
|
|
<div class="position-relative box-image">
|
|
<img src="images/demo-yoga-and-meditation-home-03.jpg" alt>
|
|
</div>
|
|
<div class="bg-white">
|
|
<div class="ps-50px pe-50px pt-35px sm-p-35px sm-pb-0">
|
|
<a href="demo-yoga-and-meditation-classes.html" class="d-inline-block fs-19 primary-font fw-500 text-dark-gray mb-5px">Aerial yoga</a>
|
|
<p>Lorem ipsum dolor eiusmod adipiscing lit tempor.</p>
|
|
</div>
|
|
<div class="border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px mt-30px sm-ps-35px sm-pe-35px position-relative">
|
|
<div class="fs-17"><span class="text-dark-gray fs-26 alt-font me-5px">$240</span>Per month</div>
|
|
<a href="demo-yoga-and-meditation-classes.html" class="d-flex justify-content-center align-items-center w-55px h-55px lh-55 rounded-circle bg-dark-gray position-absolute right-40px top-minus-30px"><i class="bi bi-arrow-right-short text-white icon-very-medium"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="box-shadow-extra-large services-box-style-01 hover-box last-paragraph-no-margin border-radius-4px overflow-hidden">
|
|
<div class="position-relative box-image">
|
|
<img src="images/demo-yoga-and-meditation-home-04.jpg" alt>
|
|
</div>
|
|
<div class="bg-white">
|
|
<div class="ps-50px pe-50px pt-35px sm-p-35px sm-pb-0">
|
|
<a href="demo-yoga-and-meditation-classes.html" class="d-inline-block fs-19 primary-font fw-500 text-dark-gray mb-5px">Meditation classes</a>
|
|
<p>Lorem ipsum dolor eiusmod adipiscing lit tempor.</p>
|
|
</div>
|
|
<div class="border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px mt-30px sm-ps-35px sm-pe-35px position-relative">
|
|
<div class="fs-17"><span class="text-dark-gray fs-26 alt-font me-5px">$100</span>Per month</div>
|
|
<a href="demo-yoga-and-meditation-classes.html" class="d-flex justify-content-center align-items-center w-55px h-55px lh-55 rounded-circle bg-dark-gray position-absolute right-40px top-minus-30px"><i class="bi bi-arrow-right-short text-white icon-very-medium"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="box-shadow-extra-large services-box-style-01 hover-box last-paragraph-no-margin border-radius-4px overflow-hidden">
|
|
<div class="position-relative box-image">
|
|
<img src="images/demo-yoga-and-meditation-home-05.jpg" alt>
|
|
</div>
|
|
<div class="bg-white">
|
|
<div class="ps-50px pe-50px pt-35px sm-p-35px sm-pb-0">
|
|
<a href="demo-yoga-and-meditation-classes.html" class="d-inline-block fs-19 primary-font fw-500 text-dark-gray mb-5px">Sound therapy</a>
|
|
<p>Lorem ipsum dolor eiusmod adipiscing lit tempor.</p>
|
|
</div>
|
|
<div class="border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px mt-30px sm-ps-35px sm-pe-35px position-relative">
|
|
<div class="fs-17"><span class="text-dark-gray fs-26 alt-font me-5px">$270</span>Per month</div>
|
|
<a href="demo-yoga-and-meditation-classes.html" class="d-flex justify-content-center align-items-center w-55px h-55px lh-55 rounded-circle bg-dark-gray position-absolute right-40px top-minus-30px"><i class="bi bi-arrow-right-short text-white icon-very-medium"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="box-shadow-extra-large services-box-style-01 hover-box last-paragraph-no-margin border-radius-4px overflow-hidden">
|
|
<div class="position-relative box-image">
|
|
<img src="images/demo-yoga-and-meditation-home-06.jpg" alt>
|
|
</div>
|
|
<div class="bg-white">
|
|
<div class="ps-50px pe-50px pt-35px sm-p-35px sm-pb-0">
|
|
<a href="demo-yoga-and-meditation-classes.html" class="d-inline-block fs-19 primary-font fw-500 text-dark-gray mb-5px">Nadabrahma yoga</a>
|
|
<p>Lorem ipsum dolor eiusmod adipiscing lit tempor.</p>
|
|
</div>
|
|
<div class="border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px mt-30px sm-ps-35px sm-pe-35px position-relative">
|
|
<div class="fs-17"><span class="text-dark-gray fs-26 alt-font me-5px">$310</span>Per month</div>
|
|
<a href="demo-yoga-and-meditation-classes.html" class="d-flex justify-content-center align-items-center w-55px h-55px lh-55 rounded-circle bg-dark-gray position-absolute right-40px top-minus-30px"><i class="bi bi-arrow-right-short text-white icon-very-medium"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="box-shadow-extra-large services-box-style-01 hover-box last-paragraph-no-margin border-radius-4px overflow-hidden">
|
|
<div class="position-relative box-image">
|
|
<img src="images/demo-yoga-and-meditation-home-02.jpg" alt>
|
|
</div>
|
|
<div class="bg-white">
|
|
<div class="ps-50px pe-50px pt-35px sm-p-35px sm-pb-0">
|
|
<a href="demo-yoga-and-meditation-classes.html" class="d-inline-block fs-19 primary-font fw-500 text-dark-gray mb-5px">Kundalini yoga</a>
|
|
<p>Lorem ipsum dolor eiusmod adipiscing lit tempor.</p>
|
|
</div>
|
|
<div class="border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px mt-30px sm-ps-35px sm-pe-35px position-relative">
|
|
<div class="fs-17"><span class="text-dark-gray fs-26 alt-font me-5px">$220</span>Per month</div>
|
|
<a href="demo-yoga-and-meditation-classes.html" class="d-flex justify-content-center align-items-center w-55px h-55px lh-55 rounded-circle bg-dark-gray position-absolute right-40px top-minus-30px"><i class="bi bi-arrow-right-short text-white icon-very-medium"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="box-shadow-extra-large services-box-style-01 hover-box last-paragraph-no-margin border-radius-4px overflow-hidden">
|
|
<div class="position-relative box-image">
|
|
<img src="images/demo-yoga-and-meditation-home-03.jpg" alt>
|
|
</div>
|
|
<div class="bg-white">
|
|
<div class="ps-50px pe-50px pt-35px sm-p-35px sm-pb-0">
|
|
<a href="demo-yoga-and-meditation-classes.html" class="d-inline-block fs-19 primary-font fw-500 text-dark-gray mb-5px">Aerial yoga</a>
|
|
<p>Lorem ipsum dolor eiusmod adipiscing lit tempor.</p>
|
|
</div>
|
|
<div class="border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px mt-30px sm-ps-35px sm-pe-35px position-relative">
|
|
<div class="fs-17"><span class="text-dark-gray fs-26 alt-font me-5px">$240</span>Per month</div>
|
|
<a href="demo-yoga-and-meditation-classes.html" class="d-flex justify-content-center align-items-center w-55px h-55px lh-55 rounded-circle bg-dark-gray position-absolute right-40px top-minus-30px"><i class="bi bi-arrow-right-short text-white icon-very-medium"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="box-shadow-extra-large services-box-style-01 hover-box last-paragraph-no-margin border-radius-4px overflow-hidden">
|
|
<div class="position-relative box-image">
|
|
<img src="images/demo-yoga-and-meditation-home-04.jpg" alt>
|
|
</div>
|
|
<div class="bg-white">
|
|
<div class="ps-50px pe-50px pt-35px sm-p-35px sm-pb-0">
|
|
<a href="demo-yoga-and-meditation-classes.html" class="d-inline-block fs-19 primary-font fw-500 text-dark-gray mb-5px">Meditation classes</a>
|
|
<p>Lorem ipsum dolor eiusmod adipiscing lit tempor.</p>
|
|
</div>
|
|
<div class="border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px mt-30px sm-ps-35px sm-pe-35px position-relative">
|
|
<div class="fs-17"><span class="text-dark-gray fs-26 alt-font me-5px">$100</span>Per month</div>
|
|
<a href="demo-yoga-and-meditation-classes.html" class="d-flex justify-content-center align-items-center w-55px h-55px lh-55 rounded-circle bg-dark-gray position-absolute right-40px top-minus-30px"><i class="bi bi-arrow-right-short text-white icon-very-medium"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="border-bottom border-color-extra-medium-gray pt-40px pb-40px overflow-hidden">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-xl-4 lg-mb-40px" data-anime="{ "translateY": [0, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<h5 class="alt-font text-dark-gray w-90 xl-w-100 mb-0 ls-minus-05px text-center text-xl-start">Special <span class="text-decoration-line-bottom-medium">health benefits</span> of yoga in the morning.</h5>
|
|
</div>
|
|
<div class="col-xl-8 position-relative" data-anime="{ "translateY": [0, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<div class="outside-box-right-15 sm-outside-box-right-0">
|
|
<div class="swiper slider-shadow-right" data-slider-options="{ "slidesPerView": 1, "spaceBetween":40, "speed": 25000, "loop": true, "pagination": { "el": ".slider-four-slide-pagination-2", "clickable": false }, "allowTouchMove": false, "autoplay": { "delay":0, "disableOnInteraction": false }, "navigation": { "nextEl": ".slider-four-slide-next-2", "prevEl": ".slider-four-slide-prev-2" }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "1200": { "slidesPerView": 2 }, "992": { "slidesPerView": 2 }, "768": { "slidesPerView": 2 }, "576": { "slidesPerView": 2 } }, "effect": "slide" }">
|
|
<div class="swiper-wrapper marquee-slide">
|
|
|
|
<div class="swiper-slide">
|
|
<div class="position-relative">
|
|
<div class="process-step-item d-flex align-items-center">
|
|
<div class="process-step-icon-wrap position-relative">
|
|
<div class="process-step-icon d-flex justify-content-center align-items-center mx-auto rounded-circle h-90px w-90px border border-color-extra-medium-gray">
|
|
<h6 class="number position-relative z-index-1 text-dark-gray alt-font mb-0">01</h6>
|
|
</div>
|
|
</div>
|
|
<div class="process-content ps-25px last-paragraph-no-margin">
|
|
<span class="d-block primary-font fw-500 text-dark-gray fs-19">Prevents cartilage and joint breakdown</span>
|
|
<p>Lorem ipsum dolor sit amet consectetur.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="position-relative">
|
|
<div class="process-step-item d-flex align-items-center">
|
|
<div class="process-step-icon-wrap position-relative">
|
|
<div class="process-step-icon d-flex justify-content-center align-items-center mx-auto rounded-circle h-90px w-90px border border-color-extra-medium-gray">
|
|
<h6 class="number position-relative z-index-1 text-dark-gray alt-font mb-0">02</h6>
|
|
</div>
|
|
</div>
|
|
<div class="process-content ps-25px last-paragraph-no-margin">
|
|
<span class="d-block primary-font fw-500 text-dark-gray fs-19">Meditation can reduce stress levels</span>
|
|
<p>Lorem ipsum dolor sit amet consectetur.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="position-relative">
|
|
<div class="process-step-item d-flex align-items-center">
|
|
<div class="process-step-icon-wrap position-relative">
|
|
<div class="process-step-icon d-flex justify-content-center align-items-center mx-auto rounded-circle h-90px w-90px border border-color-extra-medium-gray">
|
|
<h6 class="number position-relative z-index-1 text-dark-gray alt-font mb-0">03</h6>
|
|
</div>
|
|
</div>
|
|
<div class="process-content ps-25px last-paragraph-no-margin">
|
|
<span class="d-block primary-font fw-500 text-dark-gray fs-19">Improved self-image and a positive</span>
|
|
<p>Lorem ipsum dolor sit amet consectetur.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="position-relative">
|
|
<div class="process-step-item d-flex align-items-center">
|
|
<div class="process-step-icon-wrap position-relative">
|
|
<div class="process-step-icon d-flex justify-content-center align-items-center mx-auto rounded-circle h-90px w-90px border border-color-extra-medium-gray">
|
|
<h6 class="number position-relative z-index-1 text-dark-gray alt-font mb-0">04</h6>
|
|
</div>
|
|
</div>
|
|
<div class="process-content ps-25px last-paragraph-no-margin">
|
|
<span class="d-block primary-font fw-500 text-dark-gray fs-19">Improvements in attention and clarity</span>
|
|
<p>Lorem ipsum dolor sit amet consectetur.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="position-relative pt-5 sm-pt-50px">
|
|
<div class="container">
|
|
<div class="row justify-content-center mb-2">
|
|
<div class="col-lg-7 text-center" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<span class="fs-15 alt-font fw-600 text-base-color text-uppercase ls-3px">The best facility</span>
|
|
<h3 class="alt-font text-dark-gray ls-minus-1px">Premium facility</h3>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center mb-4 sm-mb-9">
|
|
<div class="col-12 sliding-box sliding-box-style-02 d-flex lg-flex-nowrap flex-wrap p-lg-0" data-anime="{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
|
|
<div class="sliding-box-item active md-mb-30px">
|
|
<div class="sliding-box-img overflow-hidden">
|
|
<img src="images/demo-yoga-and-meditation-home-07.jpg" alt class="w-100" />
|
|
</div>
|
|
<div class="d-flex flex-column align-items-start justify-content-center sliding-box-content bg-dark-gray p-45px xl-p-35px">
|
|
<div class="content-hover w-100 last-paragraph-no-margin">
|
|
<i class="line-icon-Environmental-3 text-white icon-extra-large mb-50px lg-mb-35px"></i>
|
|
<div class="text-white mb-5px fs-19">Daily healthy tips</div>
|
|
<p class="opacity-8">Lorem ipsum eiusmod adipiscing lit tempor.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="sliding-box-item md-mb-30px">
|
|
<div class="sliding-box-img overflow-hidden">
|
|
<img src="images/demo-yoga-and-meditation-home-08.jpg" alt class="w-100" />
|
|
</div>
|
|
<div class="d-flex flex-column align-items-start justify-content-center sliding-box-content bg-dark-gray p-45px xl-p-35px">
|
|
<div class="content-hover w-100 last-paragraph-no-margin">
|
|
<i class="line-icon-weight-Lift text-white icon-extra-large mb-50px lg-mb-35px"></i>
|
|
<div class="text-white mb-5px fs-19">Skilled instructors</div>
|
|
<p class="opacity-8">Lorem ipsum eiusmod adipiscing lit tempor.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="sliding-box-item">
|
|
<div class="sliding-box-img overflow-hidden">
|
|
<img src="images/demo-yoga-and-meditation-home-09.jpg" alt class="w-100" />
|
|
</div>
|
|
<div class="d-flex flex-column align-items-start justify-content-center sliding-box-content bg-dark-gray p-45px xl-p-35px">
|
|
<div class="content-hover w-100 last-paragraph-no-margin">
|
|
<i class="line-icon-Soup text-white icon-extra-large mb-50px lg-mb-35px"></i>
|
|
<div class="text-white mb-5px fs-19">Nutrition strategies</div>
|
|
<p class="opacity-8">Lorem ipsum eiusmod adipiscing lit tempor.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3" data-anime="{ "translateY": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<div class="col-12 text-center">
|
|
<img src="images/demo-yoga-and-meditation-home-10.png" class="d-inline-block align-middle h-60px me-10px" alt />
|
|
<div class="text-dark-gray fs-26 ls-minus-05px alt-font d-inline-block align-middle">Because we provide the <span class="text-decoration-line-bottom-medium">awesome</span> facility.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="position-absolute bottom-minus-130px sm-bottom-minus-50px xs-bottom-minus-25px left-0px right-0px text-center w-100 fs-225 lg-fs-200 md-fs-170 sm-fs-150 xs-fs-100 alt-font text-very-light-gray z-index-minus-2 ls-minus-8px d-none d-sm-block" data-anime="{ "translateY": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">meditation</div>
|
|
</section>
|
|
|
|
|
|
<section class="position-relative overflow-hidden pt-30px mt-minus-30px d-none d-md-block">
|
|
<div class="shape-image-animation p-0 w-100">
|
|
<svg xmlns="http://www.w3.org/2000/svg" widht="auto" height="100" viewBox="0 150 3000 100">
|
|
<path class="st1" d="M 0 190 C 1200 400 1200 50 3000 190 L 3000 350 L 0 350 L 0 190" fill="#e9e2e3">
|
|
<animate attributeName="d" dur="8s" values="M 0 190 C 1200 400 1200 50 3000 190 L 3000 350 L 0 350 L 0 190;
|
|
M 0 190 C 400 50 400 400 3000 190 L 3000 350 L 0 350 L 0 190;
|
|
M 0 190 C 1200 400 1200 50 3000 190 L 3000 350 L 0 350 L 0 190" repeatCount="indefinite" />
|
|
</path>
|
|
<path class="st1" d="M 0 190 C 1200 400 1200 50 3000 190 L 3000 350 L 0 350 L 0 190" fill="#f8f2f3">
|
|
<animate attributeName="d" dur="5s" values="M 0 190 C 1200 400 1200 50 3000 190 L 3000 350 L 0 350 L 0 190;
|
|
M 0 190 C 400 50 400 400 3000 190 L 3000 350 L 0 350 L 0 190;
|
|
M 0 190 C 1200 400 1200 50 3000 190 L 3000 350 L 0 350 L 0 190" repeatCount="indefinite" />
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="position-relative bg-very-light-gray overflow-hidden overlap-height pt-3 pb-6 sm-pt-50px" style="background-image: url('images/demo-yoga-and-meditation-home-bg-02.jpg')">
|
|
<div class="container">
|
|
<div class="row justify-content-center mb-2">
|
|
<div class="col-lg-7 text-center" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<span class="fs-15 alt-font fw-600 text-base-color text-uppercase ls-3px">Greatest testimonials</span>
|
|
<h3 class="alt-font text-dark-gray ls-minus-1px">Why others love us</h3>
|
|
</div>
|
|
</div>
|
|
<div class="row row-cols-1 row-cols-xl-2 row-cols-lg-2 justify-content-center mb-1" data-anime="{"el": "childs", "translateY": [0, 0], "perspective": [1200,1200], "scale": [1.1, 1], "rotateX": [50, 0], "opacity": [0,1], "duration": 800, "delay": 200, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
|
|
<div class="col review-style-05 lg-mb-30px">
|
|
<div class="border-radius-4px last-paragraph-no-margin bg-white box-shadow-extra-large">
|
|
<div class="d-flex align-items-center ps-45px pe-45px pt-35px pb-35px xl-p-25px">
|
|
<img class="rounded-circle w-120px md-w-75px h-120px md-h-75px me-25px" src="images/avtar-27.jpg" alt />
|
|
<p>Team of ThemeZaa has worked closely with us and never failed to follow our perfect business requirements.</p>
|
|
</div>
|
|
<div class="border-top border-color-extra-medium-gray pt-15px pb-15px ps-45px pe-45px xl-ps-25px xl-pe-25px">
|
|
<span class="fw-500 primary-font text-dark-gray d-inline-block xs-fs-15">Herman Miller, ThemeZaa</span>
|
|
<div class="review-star-icon float-end fs-19 xs-fs-15">
|
|
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col review-style-05 lg-mb-30px">
|
|
<div class="border-radius-4px last-paragraph-no-margin bg-white box-shadow-extra-large">
|
|
<div class="d-flex align-items-center ps-45px pe-45px pt-35px pb-35px xl-p-25px">
|
|
<img class="rounded-circle w-120px md-w-75px h-120px md-h-75px me-25px" src="images/avtar-29.jpg" alt />
|
|
<p>I personally enjoyed the energy and the professional support the whole team gave to us into creating website.</p>
|
|
</div>
|
|
<div class="border-top border-color-extra-medium-gray pt-15px pb-15px ps-45px pe-45px xl-ps-25px xl-pe-25px">
|
|
<span class="fw-500 primary-font text-dark-gray d-inline-block xs-fs-15">Matthew Taylor, ThemeZaa</span>
|
|
<div class="review-star-icon float-end fs-19 xs-fs-15">
|
|
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section>
|
|
<div class="container">
|
|
<div class="row justify-content-center overlap-section mb-4 ms-0 me-0">
|
|
<div class="col-auto text-center bg-white pt-30px pb-30px ps-7 pe-7 md-ps-4 md-pe-4 sm-mb-15px border-radius-100px sm-border-radius-6px sm-box-shadow">
|
|
<div class="d-inline-block text-dark-gray fs-26 md-fs-24 alt-font ls-minus-05px">More than the <span class="text-decoration-line-bottom-medium">30000+</span> people trusting crafto yoga studio!</div>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center mb-2">
|
|
<div class="col-lg-7 text-center" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<span class="fs-15 alt-font fw-600 text-base-color text-uppercase ls-3px">The right classes</span>
|
|
<h3 class="alt-font text-dark-gray ls-minus-1px">Classes on demand</h3>
|
|
</div>
|
|
</div>
|
|
<div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 justify-content-center" data-anime="{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
|
|
<div class="col">
|
|
<div class="services-box-style-01 hover-box md-mb-50px sm-mb-40px">
|
|
<div class="position-relative box-image border-radius-4px overflow-hidden">
|
|
<img src="images/demo-yoga-and-meditation-home-13.jpg" alt>
|
|
<div class="box-overlay bg-dark-gray"></div>
|
|
<a href="demo-yoga-and-meditation-classes.html" class="d-flex justify-content-center align-items-center mx-auto icon-box absolute-middle-center z-index-1 w-120px h-120px rounded-circle bg-white text-dark-gray text-uppercase fw-600 fs-15 p-15px text-center lh-20 box-shadow-extra-large">Join classes</a>
|
|
</div>
|
|
<div class="ps-11 pe-11 pt-30px last-paragraph-no-margin text-center">
|
|
<span class="d-inline-block fs-19 primary-font fw-500 text-dark-gray">Demand classes</span>
|
|
<p>Your online yoga program</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col">
|
|
<div class="services-box-style-01 hover-box md-mb-50px sm-mb-40px">
|
|
<div class="position-relative box-image border-radius-4px overflow-hidden">
|
|
<img src="images/demo-yoga-and-meditation-home-11.jpg" alt>
|
|
<div class="box-overlay bg-dark-gray"></div>
|
|
<a href="demo-yoga-and-meditation-classes.html" class="d-flex justify-content-center align-items-center mx-auto icon-box absolute-middle-center z-index-1 w-120px h-120px rounded-circle bg-white text-dark-gray text-uppercase fw-600 fs-15 p-15px text-center lh-20 box-shadow-extra-large">Join classes</a>
|
|
</div>
|
|
<div class="ps-11 pe-11 pt-30px last-paragraph-no-margin text-center">
|
|
<span class="d-inline-block fs-19 primary-font fw-500 text-dark-gray">Outdoor classes</span>
|
|
<p>Yoga studio without walls</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col">
|
|
<div class="services-box-style-01 hover-box">
|
|
<div class="position-relative box-image border-radius-4px overflow-hidden">
|
|
<img src="images/demo-yoga-and-meditation-home-12.jpg" alt>
|
|
<div class="box-overlay bg-dark-gray"></div>
|
|
<a href="demo-yoga-and-meditation-classes.html" class="d-flex justify-content-center align-items-center mx-auto icon-box absolute-middle-center z-index-1 w-120px h-120px rounded-circle bg-white text-dark-gray text-uppercase fw-600 fs-15 p-15px text-center lh-20 box-shadow-extra-large">Join classes</a>
|
|
</div>
|
|
<div class="ps-11 pe-11 pt-30px last-paragraph-no-margin text-center">
|
|
<span class="d-inline-block fs-19 primary-font fw-500 text-dark-gray">In studio classes</span>
|
|
<p>Our studio home for safe</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="pt-40px pb-40px cover-background position-relative" style="background-image: url('images/demo-yoga-and-meditation-bg-03.jpg')">
|
|
<div class="container-fluid">
|
|
<div class="row position-relative">
|
|
<div class="col swiper text-cente" data-slider-options="{ "slidesPerView": "auto", "spaceBetween":0, "centeredSlides": true, "speed": 15000, "loop": true, "pagination": { "el": ".slider-four-slide-pagination-2", "clickable": false }, "allowTouchMove": false, "autoplay": { "delay":1, "disableOnInteraction": false }, "navigation": { "nextEl": ".slider-four-slide-next-2", "prevEl": ".slider-four-slide-prev-2" }, "keyboard": { "enabled": true, "onlyInViewport": true }, "effect": "slide" }">
|
|
<div class="swiper-wrapper swiper-width-auto marquee-slide">
|
|
|
|
<div class="swiper-slide">
|
|
<div class="fs-26 alt-font text-white"><span class="w-10px h-10px border border-2 border-radius-100 border-color-white d-inline-block align-middle ms-50px me-50px sm-ms-30px sm-me-30px"></span>More than the 30000+ people trusting crafto yoga</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="fs-26 alt-font text-white"><span class="w-10px h-10px border border-2 border-radius-100 border-color-white d-inline-block align-middle ms-50px me-50px sm-ms-30px sm-me-30px"></span>Choose the most comfortable way to train</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="fs-26 alt-font text-white"><span class="w-10px h-10px border border-2 border-radius-100 border-color-white d-inline-block align-middle ms-50px me-50px sm-ms-30px sm-me-30px"></span>Transformation of body and mind</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="fs-26 alt-font text-white"><span class="w-10px h-10px border border-2 border-radius-100 border-color-white d-inline-block align-middle ms-50px me-50px sm-ms-30px sm-me-30px"></span>Devotion and love to warm our hearts</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="fs-26 alt-font text-white"><span class="w-10px h-10px border border-2 border-radius-100 border-color-white d-inline-block align-middle ms-50px me-50px sm-ms-30px sm-me-30px"></span>More than the 30000+ people trusting crafto yoga</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="fs-26 alt-font text-white"><span class="w-10px h-10px border border-2 border-radius-100 border-color-white d-inline-block align-middle ms-50px me-50px sm-ms-30px sm-me-30px"></span>Choose the most comfortable way to train</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="fs-26 alt-font text-white"><span class="w-10px h-10px border border-2 border-radius-100 border-color-white d-inline-block align-middle ms-50px me-50px sm-ms-30px sm-me-30px"></span>Transformation of body and mind</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="fs-26 alt-font text-white"><span class="w-10px h-10px border border-2 border-radius-100 border-color-white d-inline-block align-middle ms-50px me-50px sm-ms-30px sm-me-30px"></span>Devotion and love to warm our hearts</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="fs-26 alt-font text-white"><span class="w-10px h-10px border border-2 border-radius-100 border-color-white d-inline-block align-middle ms-50px me-50px sm-ms-30px sm-me-30px"></span>More than the 30000+ people trusting crafto yoga</div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="fs-26 alt-font text-white"><span class="w-10px h-10px border border-2 border-radius-100 border-color-white d-inline-block align-middle ms-50px me-50px sm-ms-30px sm-me-30px"></span>Choose the most comfortable way to train</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<footer class="cover-background" style="background-image: url('images/demo-yoga-and-meditation-bg-04.jpg')">
|
|
<div class="container footer-dark">
|
|
<div class="row">
|
|
|
|
<div class="col-lg-3 col-md-12 col-sm-6 md-mt-40px xs-mt-35px d-flex flex-column order-4 order-lg-1 order-md-4 text-center text-sm-start text-md-center text-lg-start last-paragraph-no-margin">
|
|
<a href="demo-yoga-and-meditation.html" class="footer-logo mb-25px sm-mb-20px d-inline-block">
|
|
<img src="images/demo-yoga-and-meditation-logo-white.png" data-at2x="images/demo-yoga-and-meditation-logo-white@2x.png" alt>
|
|
</a>
|
|
<p class="mt-auto fs-17">© 2024 <a href="index.html" target="_blank" class="text-white text-decoration-line-bottom">Crafto</a></p>
|
|
</div>
|
|
|
|
|
|
<div class="col-lg-3 col-md-4 col-sm-6 order-1 order-lg-2 text-center text-sm-start last-paragraph-no-margin">
|
|
<p class="d-block mb-0 fs-17">Need live support?</p>
|
|
<a href="cdn-cgi/l/email-protection.html#b3daddd5dcf3cadcc6c1d7dcded2dadd9dd0dcde" class="text-white mb-20px d-block"><span class="__cf_email__" data-cfemail="c3aaada5ac83baacb6b1a7acaea2aaadeda0acae">[email protected]</span></a>
|
|
<p class="d-block fs-17">Toll free customer care</p>
|
|
<a href="tel:1800222000" class="text-white">1-800-222-000</a>
|
|
</div>
|
|
|
|
|
|
<div class="col-lg-3 col-md-5 col-sm-6 order-2 order-lg-3 xs-mt-30px text-center text-sm-start">
|
|
<span class="d-block text-white mb-15px xs-mb-10px">Sign up for the newsletter</span>
|
|
<div class="d-inline-block w-100 newsletter-style-02 position-relative mb-15px">
|
|
<form action="email-templates/subscribe-newsletter.php" method="post" class="position-relative w-100">
|
|
<input class="input-small bg-transparent border-color-transparent-white-light w-100 form-control required" type="email" name="email" placeholder="Enter your email">
|
|
<input type="hidden" name="redirect" value>
|
|
<button class="btn text-white fs-15 text-transform-none submit" aria-label="submit">Submit <i class="feather icon-feather-arrow-right"></i></button>
|
|
<div class="form-results border-radius-4px pt-5px pb-5px ps-15px pe-15px fs-14 lh-20 w-100 text-center position-absolute d-none"></div>
|
|
</form>
|
|
</div>
|
|
<div class="d-flex align-items-center justify-content-center justify-content-sm-start">
|
|
<i class="line-icon-Handshake align-middle icon-medium me-10px text-medium-gray"></i>
|
|
<span class="fs-15 text-medium-gray">Protecting your privacy</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col-lg-2 col-md-3 col-sm-6 offset-lg-1 order-3 order-lg-4 order-md-3 order-sm-4 sm-mt-40px xs-mt-30px text-center text-sm-start last-paragraph-no-margin">
|
|
<span class="d-block text-white mb-15px xs-mb-10px">Social connect</span>
|
|
<div class="elements-social social-icon-style-08">
|
|
<ul class="small-icon light">
|
|
<li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></li>
|
|
<li><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i></a></li>
|
|
<li><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
|
|
<li><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
<div class="scroll-progress d-none d-xxl-block">
|
|
<a href="demo-yoga-and-meditation.html#" class="scroll-top" aria-label="scroll">
|
|
<span class="scroll-text">Scroll</span><span class="scroll-line"><span class="scroll-point"></span></span>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
<script data-cfasync="false" src="cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="text/javascript" src="js/jquery.js"></script>
|
|
<script type="text/javascript" src="js/vendors.min.js"></script>
|
|
|
|
<script type="text/javascript" src="revolution/js/jquery.themepunch.tools.min.js"></script>
|
|
<script type="text/javascript" src="revolution/js/jquery.themepunch.revolution.min.js"></script>
|
|
|
|
|
|
|
|
<script type="text/javascript" src="revolution/revolution-addons/particles/js/revolution.addon.particles.min-ver=1.0.3.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var tpj = jQuery;
|
|
var revapi14;
|
|
tpj(document).ready(function () {
|
|
if (tpj("#yoga-and-meditation-slider").revolution == undefined) {
|
|
revslider_showDoubleJqueryError("#yoga-and-meditation-slider");
|
|
} else {
|
|
revapi14 = tpj("#yoga-and-meditation-slider").show().revolution({
|
|
sliderType: "standard",
|
|
/* options are 'auto', 'fullwidth' or 'fullscreen' */
|
|
sliderLayout: 'fullscreen',
|
|
/* sets the Slider's default timeline */
|
|
delay: 9000,
|
|
/* options that disable autoplay */
|
|
stopLoop: "off",
|
|
stopAfterLoops: 0,
|
|
stopAtSlide: 1,
|
|
scrolleffect: {
|
|
fade: "off",
|
|
blur: "on",
|
|
maxblur: "10",
|
|
on_layers: "on",
|
|
direction: "top",
|
|
multiplicator_layers: "1.6",
|
|
tilt: "20",
|
|
},
|
|
particles: {startSlide: "first", endSlide: "last", zIndex: "1",
|
|
particles: {
|
|
number: {value: 80}, color: {value: "#ffffff"},
|
|
shape: {
|
|
type: "circle", stroke: {width: 0, color: "#ffffff", opacity: 1},
|
|
image: {src: ""}
|
|
},
|
|
opacity: {value: 0.6, random: true, min: 0.2, anim: {enable: false, speed: 7, opacity_min: 0.1, sync: false}},
|
|
size: {value: 2, random: true, min: 0.05, anim: {enable: false, speed: 40, size_min: 1, sync: false}},
|
|
line_linked: {enable: false, distance: 150, color: "#ffffff", opacity: 0.4, width: 1},
|
|
move: {enable: true, speed: 5, direction: "right", random: false, min_speed: 4, straight: true, out_mode: "out"}},
|
|
interactivity: {
|
|
events: {onhover: {enable: false, mode: "bubble"}, onclick: {enable: false, mode: "repulse"}},
|
|
modes: {grab: {distance: 400, line_linked: {opacity: 0.5}}, bubble: {distance: 400, size: 40, opacity: 0.4}, repulse: {distance: 200}}
|
|
}
|
|
},
|
|
responsiveLevels: [1240, 1024, 778, 480],
|
|
/* [DESKTOP, LAPTOP, TABLET, SMARTPHONE] */
|
|
gridwidth: [1190, 1024, 778, 480],
|
|
/* [DESKTOP, LAPTOP, TABLET, SMARTPHONE] */
|
|
gridheight: [900, 920, 700, 650],
|
|
/* Lazy Load options are "all", "smart", "single" and "none" */
|
|
lazyType: "none",
|
|
parallax: {
|
|
type: "mouse+scroll",
|
|
origo: "enterpoint",
|
|
speed: 400,
|
|
speedbg: 1500,
|
|
speedls: 1000,
|
|
levels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, -10, -9, -8, -7, -6, -5],
|
|
}
|
|
,
|
|
shadow: 0,
|
|
spinner: "off",
|
|
shuffle: "off",
|
|
autoHeight: "on",
|
|
fullScreenAutoWidth: "on",
|
|
fullScreenAlignForce: "on",
|
|
fullScreenOffsetContainer: "",
|
|
fullScreenOffset: "",
|
|
disableProgressBar: "on",
|
|
hideThumbsOnMobile: "on",
|
|
hideSliderAtLimit: 0,
|
|
hideCaptionAtLimit: 0,
|
|
hideAllCaptionAtLilmit: 0,
|
|
debugMode: false,
|
|
fallbacks: {
|
|
simplifyAll: "off",
|
|
nextSlideOnWindowFocus: "off",
|
|
disableFocusListener: false,
|
|
}
|
|
});
|
|
}
|
|
|
|
RsParticlesAddOn(revapi14);
|
|
}); /*ready*/
|
|
</script>
|
|
<script type="text/javascript" src="js/main.js"></script>
|
|
</body>
|
|
</html> |