Helgen-Website/html/onepage-spa.html
2024-11-04 11:54:48 -06:00

775 lines
54 KiB
HTML

<!doctype html>
<html class="no-js" lang="en">
<head>
<title>H-Code | Responsive & Multi-Purpose One/Multi Page Template</title>
<meta name="description" content="H-Code - A premium portfolio template from ThemeZaa">
<meta name="keywords" content="">
<meta charset="utf-8">
<meta name="author" content="ThemeZaa">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
<!-- favicon -->
<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">
<!-- animation -->
<link rel="stylesheet" href="css/animate.css" />
<!-- bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css" />
<!-- et line icon -->
<link rel="stylesheet" href="css/et-line-icons.css" />
<!-- font-awesome icon -->
<link rel="stylesheet" href="css/font-awesome.min.css" />
<!-- revolution slider -->
<link rel="stylesheet" href="css/extralayers.css" />
<link rel="stylesheet" href="css/settings.css" />
<!-- magnific popup -->
<link rel="stylesheet" href="css/magnific-popup.css" />
<!-- owl carousel -->
<link rel="stylesheet" href="css/owl.carousel.css" />
<link rel="stylesheet" href="css/owl.transitions.css" />
<link rel="stylesheet" href="css/full-slider.css" />
<!-- text animation -->
<link rel="stylesheet" href="css/text-effect.css" />
<!-- hamburger menu -->
<link rel="stylesheet" href="css/menu-hamburger.css" />
<!-- common -->
<link rel="stylesheet" href="css/style.css" />
<!-- responsive -->
<link rel="stylesheet" href="css/responsive.css" />
<!--[if IE]>
<link rel="stylesheet" href="css/style-ie.css" />
<![endif]-->
<!--[if IE]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<!-- navigation -->
<nav class="navbar navbar-default navbar-fixed-top nav-transparent overlay-nav sticky-nav nav-border-bottom bg-white no-transition" role="navigation">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-6"><a class="logo-light" href="index.html"><img alt="" src="images/onepage-spa-logo.png" class="logo" /></a><a class="logo-dark" href="index.html"><img alt="" src="images/onepage-spa-logo.png" class="logo" /></a></div>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div class="col-md-9 text-right">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#slider" class="inner-link">Home</a> </li>
<li><a href="#animated-tab" class="inner-link">About us</a> </li>
<li><a href="#treatments" class="inner-link">Treatments</a> </li>
<li><a href="#packages" class="inner-link">Packages</a></li>
<li><a href="#gallery" class="inner-link">Gallery</a> </li>
<li><a href="#blog" class="inner-link">Blog</a> </li>
<li><a href="#contact-us" class="inner-link">Contact</a> </li>
<li><a href="index.html" class="inner-link">Demos</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
</nav>
<!-- end of navigation -->
<!-- header section -->
<section class="parallax6 parallax-fix full-screen no-padding spa-sider" id="slider">
<img class="parallax-background-img" src="http://placehold.it/1920x1100" alt="" />
<div class="full-screen position-relative row">
<div class="col-md-6 col-sm-6 col-xs-12 slider-content">
<img alt="" class="spa-slider-bg" src="images/onepage-spa-slider-bg.jpg" />
<div class="slider-typography padding-seven">
<div class="slider-text-middle-main padding-left-right sm-no-padding">
<div class="slider-text-middle slider-text-middle2 text-left">
<img alt="" class="get-bg xs-display-none" src="images/onepage-spa-get.png" />
<div class="separator-line bg-yellow no-margin-lr no-margin-top sm-margin-bottom-ten"></div>
<span class="owl-title white-text margin-four-bottom sm-margin-bottom-ten">Wellness Of<br><br>Life In Nature.</span>
<span class="slider-title-big5 white-text no-margin-top xs-margin-bottom-ten">Enjoy the soothing experience!</span>
<a class="btn-small-white btn inner-link no-margin-top" href="#treatments">Reserve Now</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- end header section -->
<!-- about us section -->
<section id="animated-tab" class="spa-about-us xs-onepage-section">
<div class="container">
<div class="row">
<!-- section title -->
<div class="col-md-12 text-center">
<h3 class="section-title">About us</h3>
</div>
<!-- end section title -->
</div>
<div class="row">
<div class="col-md-6 col-sm-6 xs-margin-bottom-ten">
<div class="progress-bar-main">
<!-- progress bar item -->
<div class="progress-bar-sub">
<div class="progress">
<div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar"></div>
</div>
<div class="progress-name">2005 / Laser Skin Services</div>
</div>
<!-- end progress bar item -->
<!-- progress bar item -->
<div class="progress-bar-sub">
<div class="progress">
<div style="width: 90%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="90" role="progressbar" class="progress-bar"></div>
</div>
<div class="progress-name">2010 / Injectable Services</div>
</div>
<!-- end progress bar item -->
<!-- progress bar item -->
<div class="progress-bar-sub">
<div class="progress">
<div style="width: 95%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="95" role="progressbar" class="progress-bar"></div>
</div>
<div class="progress-name">2015 / 20th Location Opens</div>
</div>
<!-- end progress bar item -->
</div>
</div>
<div class="col-md-6 col-sm-6 spa-story position-relative">
<p class="text-large no-margin-bottom">The h-code Spa Story.</p>
<p class="text-uppercase gray-text margin-one">Lorem Ipsum is simply dummy text of the printing & typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the, when an unknown printer took a galley.</p>
</div>
</div>
<div class="row margin-five no-margin-bottom">
<div class="col-md-3 col-sm-3 col-xs-6 text-center xs-margin-bottom-ten"><div class="icon-bg"><img src="images/spa-massage.png" alt=""></div><span class="display-block margin-ten work-process-title gray-text no-margin-bottom">Spa & Massage</span></div>
<div class="col-md-3 col-sm-3 col-xs-6 text-center xs-margin-bottom-ten"><div class="icon-bg"><img src="images/spa-therapy.png" alt=""></div><span class="display-block margin-ten work-process-title gray-text no-margin-bottom">Therapy</span></div>
<div class="col-md-3 col-sm-3 col-xs-6 text-center"><div class="icon-bg"><img src="images/spa-wellness.png" alt=""></div><span class="display-block margin-ten work-process-title gray-text no-margin-bottom">Wellness</span></div>
<div class="col-md-3 col-sm-3 col-xs-6 text-center"><div class="icon-bg"><img src="images/spa-acupuncture.png" alt=""></div><span class="display-block margin-ten work-process-title gray-text no-margin-bottom">Acupuncture</span></div>
</div>
</div>
</section>
<!-- end about us section -->
<!-- our treatments section -->
<section id="treatments" class="bg-light-yellow spa-treatments xs-onepage-section" >
<div class="container">
<div class="row">
<!-- section title -->
<div class="col-md-12 text-center">
<h3 class="section-title no-padding-bottom">Our Treatments</h3>
</div>
<!-- end section title -->
<!-- section text -->
<div class="col-md-5 center-col text-center margin-five">
<h4 class="gray-text">We are a multi-discipline design studio with an extensive network of the finest talent, allowing us to build the perfect team to respond to your brief. </h4>
</div>
<!-- end section text -->
</div>
<div class="row">
<div class="col-md-12 text-left center-col">
<!-- tab navigation -->
<ul class="nav nav-tabs no-margin-bottom">
<li class="nav active"><a href="#treatments1" data-toggle="tab">Massage</a></li>
<li class="nav"><a href="#treatments2" data-toggle="tab">Aroma</a></li>
<li class="nav"><a href="#treatments3" data-toggle="tab">Oil Massage</a></li>
<li class="nav"><a href="#treatments4" data-toggle="tab">Luxury Spa</a></li>
<li class="nav"><a href="#treatments5" data-toggle="tab">Skin Therapy</a></li>
</ul>
<!-- end tab navigation -->
</div>
</div>
<div class="row">
<div class="col-md-12 text-left center-col">
<div class="tab-content margin-three no-margin-bottom">
<!-- tab item -->
<div id="treatments1" class="text-left tab-pane fade in active position-relative cover-background" style="background-image:url('http://placehold.it/1200x600');">
<div class="tab-pane fade in">
<div class="col-md-6 col-sm-6 bg-white pull-right no-padding">
<div class="pull-right right-content">
<span class="text-extra-large font-weight-600 letter-spacing-2 text-uppercase black-text margin-three no-margin-top display-block">Massage Therapy</span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum been the industry's standard dummy text ever since. Lorem Ipsum been the industry's standard dummy text ever since. Lorem Ipsum been the industry's standard dummy.</p>
<ul class="margin-ten">
<li><span>$60</span>- 25 minutes</li>
<li><span>$95</span>- 50 minutes</li>
<li><span>$500</span>- 1 Month Package</li>
<li><span>$2000</span>- 6 Month Package</li>
<li><span>$3500</span>- 1 Year Package</li>
</ul>
<a href="#contact-us" class="btn inner-link btn-black btn-small no-margin">Book Now</a>
</div>
</div>
</div>
</div>
<!-- end tab item -->
<!-- tab item -->
<div id="treatments2" class="text-left tab-pane fade in position-relative cover-background" style="background-image:url('http://placehold.it/1200x600');">
<div class="tab-pane fade in">
<div class="col-md-6 col-sm-6 bg-white pull-right no-padding">
<div class="pull-right right-content">
<span class="text-extra-large font-weight-600 letter-spacing-2 text-uppercase black-text margin-three no-margin-top display-block">Aroma</span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum been the industry's standard dummy text ever since. Lorem Ipsum been the industry's standard dummy text ever since. Lorem Ipsum been the industry's standard dummy.</p>
<ul class="margin-ten">
<li><span>$60</span>- 25 minutes</li>
<li><span>$95</span>- 50 minutes</li>
<li><span>$500</span>- 1 Month Package</li>
<li><span>$2000</span>- 6 Month Package</li>
<li><span>$3500</span>- 1 Year Package</li>
</ul>
<a href="#contact-us" class="btn inner-link btn-black btn-small no-margin">Book Now</a>
</div>
</div>
</div>
</div>
<!-- end tab item -->
<!-- tab item -->
<div id="treatments3" class="text-left tab-pane fade in position-relative cover-background" style="background-image:url('http://placehold.it/1200x600');">
<div class="tab-pane fade in">
<div class="col-md-6 col-sm-6 bg-white pull-right no-padding">
<div class="pull-right right-content">
<span class="text-extra-large font-weight-600 letter-spacing-2 text-uppercase black-text margin-three no-margin-top display-block">Oil Massage</span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum been the industry's standard dummy text ever since. Lorem Ipsum been the industry's standard dummy text ever since. Lorem Ipsum been the industry's standard dummy.</p>
<ul class="margin-ten">
<li><span>$60</span>- 25 minutes</li>
<li><span>$95</span>- 50 minutes</li>
<li><span>$500</span>- 1 Month Package</li>
<li><span>$2000</span>- 6 Month Package</li>
<li><span>$3500</span>- 1 Year Package</li>
</ul>
<a href="#contact-us" class="btn inner-link btn-black btn-small no-margin">Book Now</a>
</div>
</div>
</div>
</div>
<!-- end tab item -->
<!-- tab item -->
<div id="treatments4" class="text-left tab-pane fade in position-relative cover-background" style="background-image:url('http://placehold.it/1000x800');">
<div class="tab-pane fade in">
<div class="col-md-6 col-sm-6 bg-white pull-right no-padding">
<div class="pull-right right-content">
<span class="text-extra-large font-weight-600 letter-spacing-2 text-uppercase black-text margin-three no-margin-top display-block">Luxury Spa</span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum been the industry's standard dummy text ever since. Lorem Ipsum been the industry's standard dummy text ever since. Lorem Ipsum been the industry's standard dummy.</p>
<ul class="margin-ten">
<li><span>$60</span>- 25 minutes</li>
<li><span>$95</span>- 50 minutes</li>
<li><span>$500</span>- 1 Month Package</li>
<li><span>$2000</span>- 6 Month Package</li>
<li><span>$3500</span>- 1 Year Package</li>
</ul>
<a href="#contact-us" class="btn inner-link btn-black btn-small no-margin">Book Now</a>
</div>
</div>
</div>
</div>
<!-- end tab item -->
<!-- tab item -->
<div id="treatments5" class="text-left tab-pane fade in position-relative cover-background" style="background-image:url('http://placehold.it/1000x800');">
<div class="tab-pane fade in">
<div class="col-md-6 col-sm-6 bg-white pull-right no-padding">
<div class="pull-right right-content">
<span class="text-extra-large font-weight-600 letter-spacing-2 text-uppercase black-text margin-three no-margin-top display-block">Skin Therapy</span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum been the industry's standard dummy text ever since. Lorem Ipsum been the industry's standard dummy text ever since. Lorem Ipsum been the industry's standard dummy.</p>
<ul class="margin-ten">
<li><span>$60</span>- 25 minutes</li>
<li><span>$95</span>- 50 minutes</li>
<li><span>$500</span>- 1 Month Package</li>
<li><span>$2000</span>- 6 Month Package</li>
<li><span>$3500</span>- 1 Year Package</li>
</ul>
<a href="#contact-us" class="btn inner-link btn-black btn-small no-margin">Book Now</a>
</div>
</div>
</div>
</div>
<!-- end tab item -->
</div>
</div>
</div>
</div>
</section>
<!-- end our treatments section -->
<!-- feature section -->
<section>
<div class="container">
<div class="row">
<div class="col-md-5 col-sm-8 center-col text-center margin-six no-margin-top">
<h4 class="gray-text">We are a multi-discipline design studio with an extensive network of the finest talent, allowing us to build the perfect team to respond to your brief. </h4>
</div>
</div>
<div class="row margin-six">
<div class="col-md-4 col-sm-4 col-xs-12 bottom-margin text-center xs-margin-bottom-ten">
<div class="key-person">
<div class="key-person-img"><img src="http://placehold.it/364x501" alt=""></div>
<div class="key-person-details no-border"><span class="person-name black-text margin-five no-margin-top">Lose Your Unwanted Hair</span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<div class="thin-separator-line bg-black"></div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 bottom-margin text-center xs-margin-bottom-ten">
<div class="key-person">
<div class="key-person-img"><img src="http://placehold.it/364x501" alt=""></div>
<div class="key-person-details no-border"> <span class="person-name black-text margin-five no-margin-top">Improve your Skin</span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<div class="thin-separator-line bg-black"></div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 text-center">
<div class="key-person">
<div class="key-person-img"><img src="http://placehold.it/364x501" alt=""></div>
<div class="key-person-details no-border"> <span class="person-name black-text margin-five no-margin-top">Shape Your Body</span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<div class="thin-separator-line bg-black"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- end feature section -->
<!-- spa packages section -->
<section id="packages" class="parallax1 parallax-fix spa-our-packages xs-onepage-section">
<img class="parallax-background-img" src="http://placehold.it/1920x1100" alt="" />
<div class="opacity-full bg-dark-gray"></div>
<div class="container">
<!-- slider -->
<div class="carousel slide carousel-slide" id="myCarousel3">
<div class="row">
<div class="col-md-12 text-center">
<h3 class="section-title white-text no-padding-bottom">Our Packages</h3>
</div>
</div>
<div id="approach-slider" class="owl-carousel owl-theme dark-pagination owl-no-pagination margin-seven no-margin-bottom position-relative">
<!-- slider item -->
<div class="item">
<div class="col-md-12 sm-margin-bottom-ten">
<img alt="" src="http://placehold.it/750x650">
<div class="content-box">
<p class="black-text margin-ten no-margin text-med text-uppercase letter-spacing-2 font-weight-600 no-margin">Fringila Auctor</p>
<p class="text-med text-uppercase letter-spacing-1 no-margin">$59.00 - Month</p>
<div class="thin-separator-line bg-black no-margin-lr"></div>
<p>Lorem Ipsum is simply dummy text the printing & typesetting industry.</p>
<a href="#contact-us" class="btn inner-link btn-black btn-small no-margin">Order Now</a>
</div>
</div>
</div>
<!-- end slider item -->
<!-- slider item -->
<div class="item">
<div class="col-md-12 sm-margin-bottom-ten">
<img alt="" src="http://placehold.it/750x650">
<div class="content-box">
<p class="black-text margin-ten no-margin text-med text-uppercase letter-spacing-2 font-weight-600 no-margin">Oil Massage</p>
<p class="text-med text-uppercase letter-spacing-1 no-margin">$89.00 - Month</p>
<div class="thin-separator-line bg-black no-margin-lr"></div>
<p>Lorem Ipsum is simply dummy text the printing & typesetting industry.</p>
<a href="#contact-us" class="btn inner-link btn-black btn-small no-margin">Order Now</a>
</div>
</div>
</div>
<!-- end slider item -->
<!-- slider item -->
<div class="item">
<div class="col-md-12 xs-margin-bottom-ten">
<img alt="" src="http://placehold.it/750x650">
<div class="content-box">
<p class="black-text margin-ten no-margin text-med text-uppercase letter-spacing-2 font-weight-600 no-margin">Beauty Treatment</p>
<p class="text-med text-uppercase letter-spacing-1 no-margin">$65.00 - Month</p>
<div class="thin-separator-line bg-black no-margin-lr"></div>
<p>Lorem Ipsum is simply dummy text the printing & typesetting industry.</p>
<a href="#contact-us" class="btn inner-link btn-black btn-small no-margin">Order Now</a>
</div>
</div>
</div>
<!-- end slider item -->
<!-- slider item -->
<div class="item">
<div class="col-md-12">
<img alt="" src="http://placehold.it/750x650">
<div class="content-box">
<p class="black-text margin-ten no-margin text-med text-uppercase letter-spacing-2 font-weight-600 no-margin">Steam Bath</p>
<p class="text-med text-uppercase letter-spacing-1 no-margin">$59.00 - Month</p>
<div class="thin-separator-line bg-black no-margin-lr"></div>
<p>Lorem Ipsum is simply dummy text the printing & typesetting industry.</p>
<a href="#contact-us" class="btn inner-link btn-black btn-small no-margin">Order Now</a>
</div>
</div>
</div>
<!-- end slider item -->
<!-- end slider item -->
<div class="item">
<div class="col-md-12 sm-margin-bottom-ten">
<img alt="" src="http://placehold.it/750x650">
<div class="content-box">
<p class="black-text margin-ten no-margin text-med text-uppercase letter-spacing-2 font-weight-600 no-margin">Fringila Auctor</p>
<p class="text-med text-uppercase letter-spacing-1 no-margin">$89.00 - Month</p>
<div class="thin-separator-line bg-black no-margin-lr"></div>
<p>Lorem Ipsum is simply dummy text the printing & typesetting industry.</p>
<a href="#contact-us" class="btn inner-link btn-black btn-small no-margin">Order Now</a>
</div>
</div>
</div>
<!-- end slider item -->
<!-- slider item -->
<div class="item">
<div class="col-md-12 sm-margin-bottom-ten">
<img alt="" src="http://placehold.it/750x650">
<div class="content-box">
<p class="black-text margin-ten no-margin text-med text-uppercase letter-spacing-2 font-weight-600 no-margin">Oil Massage</p>
<p class="text-med text-uppercase letter-spacing-1 no-margin">$72.00 - Month</p>
<div class="thin-separator-line bg-black no-margin-lr"></div>
<p>Lorem Ipsum is simply dummy text the printing & typesetting industry.</p>
<a href="#contact-us" class="btn inner-link btn-black btn-small no-margin">Order Now</a>
</div>
</div>
</div>
<!-- end slider item -->
<!-- slider item -->
<div class="item">
<div class="col-md-12 xs-margin-bottom-ten">
<img alt="" src="http://placehold.it/750x650">
<div class="content-box">
<p class="black-text margin-ten no-margin text-med text-uppercase letter-spacing-2 font-weight-600 no-margin">Beauty Treatment</p>
<p class="text-med text-uppercase letter-spacing-1 no-margin">$64.00 - Month</p>
<div class="thin-separator-line bg-black no-margin-lr"></div>
<p>Lorem Ipsum is simply dummy text the printing & typesetting industry.</p>
<a href="#contact-us" class="btn inner-link btn-black btn-small no-margin">Order Now</a>
</div>
</div>
</div>
<!-- end slider item -->
<!-- slider item -->
<div class="item">
<div class="col-md-12">
<img alt="" src="http://placehold.it/750x650">
<div class="content-box">
<p class="black-text margin-ten no-margin text-med text-uppercase letter-spacing-2 font-weight-600 no-margin">Steam Bath</p>
<p class="text-med text-uppercase letter-spacing-1 no-margin">$78.00 - Month</p>
<div class="thin-separator-line bg-black no-margin-lr"></div>
<p>Lorem Ipsum is simply dummy text the printing & typesetting industry.</p>
<a href="#contact-us" class="btn inner-link btn-black btn-small no-margin">Order Now</a>
</div>
</div>
</div>
<!-- end slider item -->
</div>
</div>
<!-- end slider -->
</div>
</section>
<!-- end spa packages section -->
<!-- photo gallery section -->
<section id="gallery" class="grid-wrap work-4col margin-top-section no-margin-top no-padding-bottom xs-onepage-section">
<div class="container-fluid" >
<div class="row no-padding">
<!-- section title -->
<div class="col-md-12 text-center">
<h3 class="section-title no-padding-bottom">Gallery</h3>
</div>
<!-- end section title -->
<div class="col-lg-3 col-md-8 col-sm-11 margin-three center-col text-center">
<h4 class="gray-text">Lorem Ipsum is simply dummy text of the printing & typesetting industry. Lorem Ipsum has been the industry's standard dummy </h4>
</div>
<div class="grid-gallery overflow-hidden" >
<div class="tab-content">
<ul class="masonry-items grid lightbox-gallery">
<!-- slider item -->
<li class="main-dishes deserts starters-sides">
<figure>
<div class="gallery-img"><a href="http://placehold.it/800x1000" title=""><img src="http://placehold.it/800x1000" alt=""></a></div>
</figure>
</li>
<!-- end slider item -->
<!-- slider item -->
<li class="main-dishes starters-sides">
<figure>
<div class="gallery-img"><a href="http://placehold.it/800x1000" title=""><img src="http://placehold.it/800x1000" alt=""></a></div>
</figure>
</li>
<!-- end slider item -->
<!-- slider item -->
<li class="main-dishes starters-sides">
<figure>
<div class="gallery-img"><a href="http://placehold.it/800x1000" title=""><img src="http://placehold.it/800x1000" alt=""></a></div>
</figure>
</li>
<!-- end slider item -->
<!-- slider item -->
<li class="main-dishes drinks starters-sides">
<figure>
<div class="gallery-img"><a href="http://placehold.it/800x1000" title=""><img src="http://placehold.it/800x1000" alt=""></a></div>
</figure>
</li>
<!-- end slider item -->
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- end photo gallery section -->
<!-- call to action section -->
<section class="border-bottom no-padding-bottom">
<div class="container">
<div class="row">
<div class="col-md-5 col-sm-6 center-col text-center margin-five no-margin-top">
<p class="title-med black-text font-weight-100">We live in a culture that values stress,like it makes us better or something.</p>
<a href="#packages" class="highlight-button-black-border btn margin-six inner-link no-margin-lr">Popular Procedures</a>
</div>
<div class="col-md-12 text-center">
<img src="http://placehold.it/1000x479" alt=""/>
</div>
</div>
</div>
</section>
<!-- end call to action section -->
<!-- blog section -->
<section id="blog" class="xs-onepage-section">
<div class="container">
<div class="row">
<!-- section title -->
<div class="col-md-12 text-center">
<h3 class="section-title">Blog</h3>
</div>
<!-- end section title -->
</div>
<div class="row">
<!-- blog item -->
<div class="col-md-4 col-sm-4">
<div class="blog-post">
<div class="blog-post-images"><a href="blog-grid-3columns.html"><img src="http://placehold.it/800x502" alt=""></a></div>
<div class="post-details">
<a class="post-title" href="blog-grid-3columns.html">Ayurvedic Treatments</a>
<span class="post-author">Posted by Colin Powell | 02 January 2015</span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
</div>
</div>
<!-- end blog item -->
<!-- blog item -->
<div class="col-md-4 col-sm-4">
<div class="blog-post">
<div class="blog-post-images"><a href="blog-masonry-3columns.html"><img src="http://placehold.it/800x502" alt=""></a></div>
<div class="post-details">
<a class="post-title" href="blog-masonry-3columns.html">Herbal Treatments</a>
<span class="post-author">Posted by Michael Freemon | 10 January 2015</span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
</div>
</div>
<!-- end blog item -->
<!-- blog item -->
<div class="col-md-4 col-sm-4">
<div class="blog-post">
<div class="blog-post-images"><a href="blog-right-sidebar.html"><img src="http://placehold.it/800x502" alt=""></a></div>
<div class="post-details">
<a class="post-title" href="blog-right-sidebar.html">Relax with Face Massage</a>
<span class="post-author">Posted by Vince Lombardi | 02 January 2015</span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
</div>
</div>
<!-- end blog item -->
</div>
<div class="row">
<div class="col-md-12 text-center">
<a class="btn btn-black btn-small margin-four no-margin-bottom" href="blog-grid-full-width.html">View All Blog</a>
</div>
</div>
</div>
</section>
<!-- end blog section -->
<!-- call to action section -->
<section class="no-padding spa-case-study">
<div class="carousel slide carousel-slide">
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1920x566');"></div>
<div class="container case-study-slider">
<div class="row position-relative">
<div class="col-md-5 col-sm-6 col-xs-11 text-left no-margin-right animated fadeInUp f-right">
<span class="case-study-title white-text">Daily Special and Wellness</span>
<span class="case-study-work white-text">We Use Only Herbal Products</span>
<div class="separator-line bg-yellow no-margin-lr"></div>
<span class="case-study-detials white-text">Lorem Ipsum is simply dummy text of the printing & typesetting industry. Lorem Ipsum has been the industry. Lorem Ipsum is simply dummy text of the printing & typesetting industry.</span>
<a href="#contact-us" class="btn inner-link btn-small-white-background margin-four no-margin-bottom" >More Info</a>
</div>
<img src="images/spa-discount-logo.png" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- end call to action section -->
<!-- contact us section -->
<section id="contact-us" class="xs-onepage-section">
<div class="container">
<div class="row">
<!-- section title -->
<div class="col-md-12 text-center no-padding">
<h3 class="section-title">Contact Us</h3>
</div>
<!-- end section title -->
</div>
<div class="row">
<div class="col-md-9 text-center center-col">
<div class="col-md-4 col-sm-4 text-center"><i class="icon-phone medium-icon black-text"></i><h6 class="black-text margin-two no-margin-bottom">123-456-7890</h6></div>
<div class="col-md-4 col-sm-4 text-center"><i class="icon-map-pin medium-icon black-text"></i><h6 class="black-text margin-two no-margin-bottom">Victoria, United States</h6></div>
<div class="col-md-4 col-sm-4 text-center"><i class="icon-envelope medium-icon black-text"></i><h6 class="black-text margin-two no-margin-bottom"><a class="black-text" href="mailto:no-reply@domain.com">no-reply@domain.com</a></h6></div>
</div>
</div>
<div class="row">
<!-- form -->
<form id="contactusform" action="javascript:void(0)" method="post">
<div class="col-md-10 col-sm-12 center-col">
<div class="row"><div class="col-md-12 col-sm-12"><div class="wide-separator-line margin-ten"></div></div>
<div class="col-md-12 col-sm-12"><div id="success"></div></div>
</div>
<div class="col-md-6 col-sm-12">
<input name="name" type="text" placeholder="Your Name" />
<input name="email" type="text" placeholder="Your Email" />
</div>
<div class="col-md-6 col-sm-12">
<textarea name="comment" placeholder="Your Message" ></textarea>
</div>
<div class="col-md-12 col-sm-12">
<div class="col-md-6 col-sm-6 no-padding-left"><span class="required">*Please complete all fields correctly</span></div>
<div class="col-md-3 col-sm-6 f-right no-padding-right"><input id="contact-us-button" name="send message" type="button" value="send message" class="btn btn-black no-margin-top f-right no-margin-lr"></div>
</div>
</div>
</form>
<!-- end form -->
</div>
</div>
</section>
<!-- end contact us section -->
<!-- counter section -->
<section id="counter" class="parallax9 parallax-fix" >
<img class="parallax-background-img" src="http://placehold.it/1920x1100" alt="" />
<div class="opacity-full bg-black"></div>
<div class="container">
<div class="row">
<!-- counter item -->
<div class="col-md-3 col-sm-6 bottom-margin text-center counter-section sm-margin-bottom-ten">
<i class="icon-heart medium-icon"></i> <span class="timer counter-number white-text" data-to="312" data-speed="7000"></span> <span class="counter-title light-gray-text">Pizzas Ordered</span>
</div>
<!-- end counter item -->
<!-- counter item -->
<div class="col-md-3 col-sm-6 bottom-margin text-center counter-section sm-margin-bottom-ten">
<i class="icon-happy medium-icon"></i> <span class="timer counter-number white-text" data-to="780" data-speed="7000"></span> <span class="counter-title light-gray-text">Happy Clients</span>
</div>
<!-- end counter item -->
<!-- counter item -->
<div class="col-md-3 col-sm-6 bottom-margin-small text-center counter-section xs-margin-bottom-ten">
<i class="icon-anchor medium-icon"></i> <span class="timer counter-number white-text" data-to="987" data-speed="7000"></span> <span class="counter-title light-gray-text">Projects Completed</span>
</div>
<!-- end counter item -->
<!-- counter item -->
<div class="col-md-3 col-sm-6 text-center counter-section">
<i class="icon-chat medium-icon"></i> <span class="timer counter-number white-text" data-to="456" data-speed="7000"></span> <span class="counter-title gray-text">Comments</span>
</div>
<!-- end counter item -->
</div>
</div>
</section>
<!-- end counter section -->
<!-- footer -->
<footer>
<div class=" bg-white footer-top">
<div class="container">
<div class="row margin-four">
<!-- phone -->
<div class="col-md-4 col-sm-4 text-center"><i class="icon-phone small-icon black-text"></i><h6 class="black-text margin-two no-margin-bottom">123-456-7890</h6></div>
<!-- end phone -->
<!-- address -->
<div class="col-md-4 col-sm-4 text-center"><i class="icon-map-pin small-icon black-text"></i><h6 class="black-text margin-two no-margin-bottom">Victoria, United States</h6></div>
<!-- end address -->
<!-- email -->
<div class="col-md-4 col-sm-4 text-center"><i class="icon-envelope small-icon black-text"></i><h6 class="margin-two no-margin-bottom"><a href="mailto:no-reply@domain.com" class="black-text">no-reply@domain.com</a></h6></div>
<!-- end email -->
</div>
</div>
</div>
<div class="container onepage-footer-middle">
<div class="row">
<div class="col-md-12 col-sm-12 footer-social text-right text-center">
<!-- social media link -->
<a target="_blank" href="https://www.facebook.com/"><i class="fa fa-facebook"></i></a>
<a target="_blank" href="https://twitter.com/"><i class="fa fa-twitter"></i></a>
<a target="_blank" href="https://plus.google.com"><i class="fa fa-google-plus"></i></a>
<a target="_blank" href="https://dribbble.com/"><i class="fa fa-dribbble"></i></a>
<a target="_blank" href="https://www.youtube.com/"><i class="fa fa-youtube"></i></a>
<a target="_blank" href="https://www.linkedin.com/"><i class="fa fa-linkedin"></i></a>
<!-- end social media link -->
</div>
</div>
</div>
<div class="container-fluid bg-dark-gray footer-bottom">
<div class="container">
<div class="row margin-three">
<!-- copyright -->
<div class="col-md-6 col-sm-6 col-xs-12 copyright text-left letter-spacing-1 xs-text-center xs-margin-bottom-one">
&copy; 2015 H-Code is proudly powered by ThemeZaa.
</div>
<!-- end copyright -->
<!-- logo -->
<div class="col-md-6 col-sm-6 col-xs-12 footer-logo text-right xs-text-center">
<a href="index.html"><img src="images/logo-light-gray.png" alt=""/></a>
</div>
<!-- end logo -->
</div>
</div>
</div>
<!-- scroll to top -->
<a href="javascript:;" class="scrollToTop"><i class="fa fa-angle-up"></i></a>
<!-- scroll to top End... -->
</footer>
<!-- end footer -->
<!-- javascript libraries / javascript files set #2 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/skrollr.min.js"></script>
<script type="text/javascript" src="js/jquery.viewport.mini.js"></script>
<script type="text/javascript" src="js/smooth-scroll.js"></script>
<!-- jquery appear -->
<script type="text/javascript" src="js/jquery.appear.js"></script>
<!-- animation -->
<script type="text/javascript" src="js/wow.min.js"></script>
<!-- page scroll -->
<script type="text/javascript" src="js/page-scroll.js"></script>
<!-- easy piechart-->
<script type="text/javascript" src="js/jquery.easypiechart.js"></script>
<!-- parallax -->
<script type="text/javascript" src="js/jquery.parallax-1.1.3.js"></script>
<!--portfolio with shorting tab -->
<script type="text/javascript" src="js/jquery.isotope.min.js"></script>
<!-- owl slider -->
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<!-- magnific popup -->
<script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="js/popup-gallery.js"></script>
<!-- text effect -->
<script type="text/javascript" src="js/text-effect.js"></script>
<!-- revolution slider -->
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/jquery.revolution.js"></script>
<!-- counter -->
<script type="text/javascript" src="js/counter.js"></script>
<!-- countTo -->
<script type="text/javascript" src="js/jquery.countTo.js"></script>
<!-- fit videos -->
<script type="text/javascript" src="js/jquery.fitvids.js"></script>
<!-- imagesloaded -->
<script type="text/javascript" src="js/imagesloaded.pkgd.min.js"></script>
<!-- hamburger menu-->
<script type="text/javascript" src="js/classie.js"></script>
<script type="text/javascript" src="js/hamburger-menu.js"></script>
<!-- one page navigation -->
<script type="text/javascript" src="js/one-page-main.js"></script>
<!-- setting -->
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>