?
áEÓê¤ÎïLwebshll2019
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<!-- Author -->
<meta name="author" content="Themes Industry">
<!-- description -->
<meta name="description" content="MegaOne is a highly creative, modern, visually stunning and Bootstrap responsive multipurpose studio and portfolio HTML5 template with 8 ready home page demos.">
<!-- keywords -->
<meta name="keywords" content="Creative, modern, clean, bootstrap responsive, html5, css3, portfolio, blog, studio, templates, multipurpose, one page, corporate, start-up, studio, branding, designer, freelancer, carousel, parallax, photography, studio, masonry, grid, faq">
<!-- Page Title -->
<title>Spa | MegaOne HTML5 Template</title>
<!-- Favicon -->
<link rel="icon" href="spa/img/favicon.ico">
<!-- Bundle -->
<link rel="stylesheet" href="vendor/css/bundle.min.css">
<!-- Plugin Css -->
<link rel="stylesheet" href="vendor/css/cubeportfolio.min.css">
<link rel="stylesheet" href="spa/css/animate.min.css">
<link rel="stylesheet" href="spa/css/jquery.fancybox.css">
<link rel="stylesheet" href="spa/css/jquery.fancybox.min.css">
<link rel="stylesheet" href="spa/css/line-awesome.min.css">
<!-- Style Customizer's stylesheets -->
<link rel="stylesheet" type="text/css" href="spa/color-switcher/js/style-customizer/css/style-customizer.css">
<link rel="stylesheet/less" type="text/css" href="spa/color-switcher/less/skin.less">
<!-- Style Sheet -->
<link rel="stylesheet" href="vendor/css/owl.carousel.min.css">
<link rel="stylesheet" href="spa/css/style.css">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="150">
<!-- PRELOADER -->
<div class="loader-area">
<div id='spin-wrap'>
<div id='spin'></div>
</div>
</div>
<header>
<nav id="my-nav" class="navbar navbar-expand-lg navbar-light rounded-bar sidemenu-nav">
<div class="menu-btn">
<span></span>
<span></span>
<span></span>
</div>
<div class="logo ml-5">
<a href="#home1" class="scroll"><img src="spa/img/logo-img.png" alt="Logo Img"></a>
</div>
</nav>
<div class="outer-wrapper">
<div class="nav-img">
<img src="spa/img/navbar-img.jpg" alt="BACKGROUND IMAGE">
</div>
<div class="overlay">
<a class="close-outerwindow"><i class="las la-times"></i></a>
<nav class="navbar-1 w-100">
<div class="row height small-nav">
<div class="col-sm-5 col-md-5 d-flex justify-content-center align-items-center">
<ul id="primary" class="navbar-nav">
<li class="nav-item"><a class="nav-link active" href="#home1">Home</a></li>
<li class="nav-item"><a class="nav-link" href="spa/services.html">Services</a></li>
<li class="nav-item"><a class="nav-link" href="spa/pricing.html">Rates</a></li>
<li class="nav-item"><a class="nav-link" href="spa/team.html">Experts</a></li>
<li class="nav-item"><a class="nav-link" href="spa/booking.html">Book Now</a></li>
</ul>
</div>
<div class="col-sm-12 col-md-3 d-flex justify-content-center align-items-center">
<div class="services-nav">
<h5 class="nav-heading">Spa Services</h5>
<ul class="nav-services">
<li><a href="spa/services.html">Body Massage</a></li>
<li><a href="spa/services.html">Body Wrap</a></li>
<li><a href="spa/services.html">Herbal Massage</a></li>
<li><a href="spa/services.html">Hand & Feet</a></li>
<li><a href="spa/services.html">Relaxation</a></li>
<li><a href="spa/services.html">Mind Therapy</a></li>
<li><a href="spa/services.html">Body Treatments</a></li>
</ul>
<div class="nav-icons">
<ul class="side-menu-icons">
<li><a href=" "><i class="lab la-facebook-f"></i></a></li>
<li><a href=" "><i class="lab la-twitter"></i></a></li>
<li><a href=" "><i class="lab la-google-plus"></i></a></li>
<li><a href=" "><i class="lab la-linkedin-in"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 d-flex justify-content-center align-items-center">
<div class="blog-nav">
<h5 class="nav-heading">Spa Blogs</h5>
<ul class="nav-services">
<li><a href="#">Blog</a></li>
<li><a href="#">Blog Detail</a></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
</header>
<div class="main-content">
<section id="home1" class="home">
<div class="row no-gutters height img-area">
<div class="col-12 col-md-4 col-lg-4 order-2 order-md-1 parallax-color1"></div>
<div class="col-12 col-md-8 col-lg-8 order-1 order-md-2 parallax-img1"></div>
</div>
<div class="content-area">
<div class="text-home">
<p class="sub-heading text-grey">The Essence of</p>
<h1 class="main-heading text-brown">Natural Beauty</h1>
<p class="sub-heading text-grey mb-5">A surreal experience</p>
<a href="#home2" class="btn btn-large trans-btn brown-btn">Learn More</a>
</div>
</div>
</section>
<section id="home2" class="home">
<div class="row no-gutters height img-area">
<div class="col-12 col-md-4 col-lg-4 order-2 order-md-1 parallax-color2"></div>
<div class="col-12 col-md-8 col-lg-8 order-1 order-md-2 parallax-img2"></div>
</div>
<div class="content-area">
<div class="text-home text-lightpink">
<p class="sub-heading">The Essence of</p>
<h1 class="main-heading">Massage & SPA</h1>
<p class="sub-heading mb-5">A surreal experience</p>
<a href="#home3" class="btn btn-large trans-btn pink-btn">Learn More</a>
</div>
</div>
</section>
<section id="home3" class="home">
<div class="row no-gutters height img-area">
<div class="col-12 col-md-4 col-lg-4 order-2 order-md-1 parallax-color3"></div>
<div class="col-12 col-md-8 col-lg-8 parallax-img3 order-1 order-md-2"></div>
</div>
<div class="content-area">
<div class="text-home text-white">
<p class="sub-heading">The Essence of</p>
<h1 class="main-heading">Natural Beauty</h1>
<p class="sub-heading mb-5">A surreal experience</p>
<a href="#about" class="btn btn-large trans-btn white-btn">Learn More</a>
</div>
</div>
</section>
<section id="about" class="about">
<div class="container">
<div class="row">
<div class="col-12 col-md-6 margin-top-125">
<div class="about-text text-left">
<h6 class="heading">Basic info about us</h6>
<h1 class="main-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
</div>
</div>
<div class="col-12 col-md-6">
<p class="sub-heading">Curabitur mollis bibendum luctus. Duis suscipit vitae dui sed suscipit. Vestibulum auctor nunc vitae diam eleifend, in maximus metus sollicitudin. Quisque vitae sodales lectus.
<br><br>
Curabitur mollis bibendum luctus. Duis suscipit vitae dui sed suscipit. Vestibulum auctor nunc vitae diam eleifend, in maximus metus sollicitudin.</p>
</div>
</div>
</div>
</section>
<section id="services" class="services">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4 mt-sm-0 mt-md-0 mt-lg-0 mb-5 mb-md-3 mb-lg-0">
<div class="card box text-center">
<div class="feature-icon text-center">
<i class="las la-hand-holding-heart bg-feature-icon trans"></i>
</div>
<div class="card-body">
<h2 class="card-title text-grey">Treatment</h2>
<p class="card-text">Lorem ipsum dolor sit amet, adipi elit et dolore magna, sed do incididunt adipi elit et dolore magna.</p>
</div>
<div class="services-btn">
<a href="spa/services.html" class="btn btn-large trans-btn service-btn">Learn More</a>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4 mt-5 mt-md-0 mt-lg-0 mb-5 mb-md-0 mb-lg-0">
<div class="card box text-center">
<div class="feature-icon text-center">
<i class="las la-spa bg-feature-icon"></i>
</div>
<div class="card-body">
<h2 class="card-title text-grey">Massage</h2>
<p class="card-text sub-heading">Lorem ipsum dolor sit amet, adipi elit et dolore magna, sed do incididunt adipi elit et dolore magna.</p>
</div>
<div class="services-btn">
<a href="spa/services.html" class="btn btn-large trans-btn service-btn">Learn More</a>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4 mt-5 mt-md-5 mt-lg-0">
<div class="card box text-center">
<div class="feature-icon text-center">
<i class="las la-magic bg-feature-icon"></i>
</div>
<div class="card-body">
<h2 class="card-title text-grey">Therapy</h2>
<p class="card-text sub-heading">Lorem ipsum dolor sit amet, adipi elit et dolore magna, sed do incididunt adipi elit et dolore magna.</p>
</div>
<div class="services-btn">
<a href="spa/services.html" class="btn btn-large trans-btn service-btn">Learn More</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="video" class="video bg-video-img">
<div class="overlay1">
<div class="container">
<div class="row">
<div class="col-12 d-flex justify-content-center align-items-center">
<div class="video-btn">
<a data-fancybox="" href="https://vimeo.com/106765702"><i class="las la-play play-btn text-brown"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="about1" class="about">
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<div class="about-text text-left">
<h6 class="heading">Basic info about us</h6>
<h1 class="main-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
</div>
</div>
<div class="col-12 col-md-6">
<p class="sub-heading">Curabitur mollis bibendum luctus. Duis suscipit vitae dui sed suscipit. Vestibulum auctor nunc vitae diam eleifend, in maximus metus sollicitudin. Quisque vitae sodales lectus.
<br><br>
Curabitur mollis bibendum luctus. Duis suscipit vitae dui sed suscipit. Vestibulum auctor nunc vitae diam eleifend, in maximus metus sollicitudin.</p>
</div>
</div>
</div>
</section>
<section id="prices" class="prices">
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<div class="price-list ml-0">
<div class="rates d-flex justify-content-between">
<div class="info">
<h6 class="main-heading text-grey font-weight-bold">Body Massage</h6>
<h6 class="sub-heading text-grey">Lorem ipsum dolor sit amet, consectetur elit.</h6>
</div>
<p class="rate text-brown">$85</p>
</div>
</div>
<div class="price-list ml-0">
<div class="rates d-flex justify-content-between">
<div class="info">
<h6 class="main-heading text-grey font-weight-bold">Hebal Massage</h6>
<h6 class="sub-heading text-grey">Lorem ipsum dolor sit amet, consectetur elit.</h6>
</div>
<p class="rate text-brown">$35</p>
</div>
</div>
<div class="price-list ml-0">
<div class="rates d-flex justify-content-between">
<div class="info">
<h6 class="main-heading text-grey font-weight-bold">Body Wrap</h6>
<h6 class="sub-heading text-grey">Lorem ipsum dolor sit amet, consectetur elit.</h6>
</div>
<p class="rate text-brown">$80</p>
</div>
</div>
<div class="price-list ml-0">
<div class="rates d-flex justify-content-between">
<div class="info">
<h6 class="main-heading text-grey font-weight-bold">Skin Treatment</h6>
<h6 class="sub-heading text-grey">Lorem ipsum dolor sit amet, consectetur elit.</h6>
</div>
<p class="rate text-brown">$70</p>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="price-list">
<div class="rates d-flex justify-content-between">
<div class="info">
<h6 class="main-heading text-grey font-weight-bold">Hand & Feet</h6>
<h6 class="sub-heading text-grey">Lorem ipsum dolor sit amet, consectetur elit.</h6>
</div>
<p class="rate text-brown">$30</p>
</div>
</div>
<div class="price-list">
<div class="rates d-flex justify-content-between">
<div class="info">
<h6 class="main-heading text-grey font-weight-bold">Relaxation</h6>
<h6 class="sub-heading text-grey">Lorem ipsum dolor sit amet, consectetur elit.</h6>
</div>
<p class="rate text-brown">$60</p>
</div>
</div>
<div class="price-list">
<div class="rates d-flex justify-content-between">
<div class="info">
<h6 class="main-heading text-grey font-weight-bold">Mind Therapy</h6>
<h6 class="sub-heading text-grey">Lorem ipsum dolor sit amet, consectetur elit.</h6>
</div>
<p class="rate text-brown">$25</p>
</div>
</div>
<div class="price-list">
<div class="rates d-flex justify-content-between">
<div class="info">
<h6 class="main-heading text-grey font-weight-bold">AntiDepression Massage</h6>
<h6 class="sub-heading text-grey">Lorem ipsum dolor sit amet, consectetur elit.</h6>
</div>
<p class="rate text-brown">$50</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="testimonial" class="testimonial">
<div class="row bg-blue">
<div class="col-12 col-md-8">
<img src="spa/img/testimonial-img.jpg" alt="image">
</div>
<div class="col-12 col-md-4 pl-4 pl-md-0 d-flex justify-content-center align-items-center">
<div class="owl-testimonial owl-carousel owl-theme ">
<div class="item">
<p class="heading-large text-white">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit diam, sed diam
nonummy nibh euismod tincidunt until laoreet."</p>
<div class="rating">
<i class="las la-star rating-star"></i>
<i class="las la-star rating-star"></i>
<i class="las la-star rating-star"></i>
<i class="las la-star rating-star"></i>
</div>
</div>
<div class="item">
<p class="heading-large text-white">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit diam, sed diam
nonummy nibh euismod tincidunt until laoreet."</p>
<div class="rating">
<i class="las la-star rating-star"></i>
<i class="las la-star rating-star"></i>
<i class="las la-star rating-star"></i>
<i class="las la-star rating-star"></i>
</div>
</div>
<div class="item">
<p class="heading-large text-white">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit diam, sed diam
nonummy nibh euismod tincidunt until laoreet."</p>
<div class="rating">
<i class="las la-star rating-star"></i>
<i class="las la-star rating-star"></i>
<i class="las la-star rating-star"></i>
<i class="las la-star rating-star"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="booking" class="booking">
<div class="container">
<div class="row">
<div class="col-12 wow fadeInUp" data-wow-delay="600ms" data-wow-duration="1.3s" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInUp;">
<div class="booking_text text-center">
<h6 class="heading text-brown">Want to visit us</h6>
<h1 class="main-heading text-brown mb-3">Book your appointment now!</h1>
<p class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim veniam, quis nostrud exercitation consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</p>
<a href="spa/booking.html" class="btn btn-large trans-btn book-btn">Book Now</a>
</div>
</div>
</div>
</div>
</section>
<section id="footer" class="footer">
<div class="container">
<div class="row">
<div class="col-12 text-center">
<ul class="footer_ul">
<li class="footer_list"><i class="lab la-facebook-f"></i></li>
<li class="footer_list"><i class="lab la-twitter"></i></li>
<li class="footer_list"><i class="lab la-google-plus"></i></li>
<li class="footer_list"><i class="lab la-linkedin-in"></i></li>
<li class="footer_list"><i class="lab la-instagram"></i></li>
<li class="footer_list"><i class="las la-envelope"></i></li>
</ul>
<p class="info footer_text text-brown"><i class="far fa-copyright"></i>2020 MegaOne. Made with love by themesindustry</p>
</div>
</div>
</div>
</section>
</div>
<!-- Style Customizer -->
<div id="style-customizer">
<div class="style-customizer-wrap form-horizontal">
<h6 class="sc-header text-dark font-weight-500">Style Switcher</h6>
<div class="sc-variable-row form-group d-flex">
<label for="sc-color-prim" class="col-sm-8 control-label color-text">First color</label>
<div class="col-sm-4">
<div class="sc-btn-round">
<input type="color" id="sc-color-prim" class="sc-variable" data-key="colorPrimary">
</div>
</div>
</div>
<div class="sc-variable-row form-group d-flex">
<label for="sc-color-prim" class="col-sm-8 control-label color-text">Second color</label>
<div class="col-sm-4">
<div class="sc-btn-round">
<input type="color" id="sc-color-sec" class="sc-variable" data-key="colorPrimary1">
</div>
</div>
</div>
<div class="sc-variable-row form-group d-flex">
<label for="sc-color-prim" class="col-sm-8 control-label color-text">Third color</label>
<div class="col-sm-4">
<div class="sc-btn-round">
<input type="color" id="sc-color-third" class="sc-variable" data-key="colorSecondary">
</div>
</div>
</div>
<hr/>
<div class="form-group">
<div class="col-xs-12 p-0 d-flex">
<button type="button" class="sc-btn mr-2" id="reset" onClick="window.location.reload()">Reset</button>
<button class="sc-btn" id="sc-download-css"><i class="fa fa-download"></i> Get CSS</button>
</div>
</div>
<br/>
<br/>
</div>
<button id="sc-toggle" title="Styles Customizer"><i class="fa fa-cog"></i></button>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="afterSaveCSSFileModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body pb-2"> In order to apply custom color styles to your template, Please follow these steps:
<ol>
<li class="sc-after-save-todo-point-file">Upload the "color.css" file to "css" directory in your template</li>
<li class="sc-after-save-todo-point-stylesheet-code"> Copy this code and paste it into "index-spa.html" file in your template, after the "style.css" <br><code><!-- Skin stylesheet --></code>
<pre><code><link rel="stylesheet" href="../spa/css/color.css"></code></pre>
</li>
</ol>
</div>
</div>
</div>
</div>
<!-- Style Customizer End -->
<!-- JavaScript -->
<script src="vendor/js/bundle.min.js"></script>
<!-- Plugin Js -->
<script src="vendor/js/owl.carousel.min.js"></script>
<script src="vendor/js/jquery.cubeportfolio.min.js"></script>
<!-- Color Switcher -->
<script src="spa/color-switcher/js/less/less.min.js" data-env="development"></script>
<script src="spa/color-switcher/js/style-customizer/js/style-customizer.js"></script>
<!-- custom script -->
<script src="spa/js/jquery.fancybox.js"></script>
<script src="spa/js/jquery.fancybox.min.js"></script>
<script src="spa/js/mediaelement-and-player.min.js"></script>
<script src="spa/js/wow.min.js"></script>
<script src="vendor/js/parallaxie.min.js"></script>
<script src="spa/js/script.js"></script>
</body>
</html>