1121 lines
37 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<!-- FONTS -->
<link href='https://fonts.googleapis.com/css?family=Work+Sans:400,300,500,600,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Philosopher:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Bilbo+Swash+Caps' rel='stylesheet' type='text/css'>
<!-- STYLESHEETS -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link href="css/vertical.min.css" rel="stylesheet" type="text/css">
<link href="css/magnific-popup.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/flaticon.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/ihover.css">
<link rel="stylesheet" type="text/css" href="revslider/css/settings.css" media="screen">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<title>Relish</title>
</head>
<body>
<!-- PAGE -->
<div class="page" id="top">
<!-- preloader -->
<div id="preloader">
<div class="preloader-wave"></div>
</div>
<!-- / preloader -->
<!-- site top panel -->
<div class="site-top-panel">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-8">
<div class="tel-wrap">
<address>
<a href="tel:475-1969996"><i class="fa fa-phone"></i>(475) 196-9996</a>
<span>|</span>
<a href="mailto:relish.support@gmail.com"><i class="fa fa-envelope"></i>relish.support@gmail.com</a>
</address>
</div>
</div>
<div class="col-md-6 col-sm-4">
<div class="lang-wrap">
<div class="currency">
<select name="billing_lang" class="cur-change">
<option value="">USD</option>
<option value="eur">EUR</option>
<option value="gbp">GBP</option>
<option value="au">AUD</option>
</select>
</div>
<span>|</span>
<div class="lang-bar">
<div>
<ul>
<li>
<a href="#" class="lang-sel icl-en">
<img src="images/flag/us.png" class="icflag" alt>
&nbsp;EN
</a>
<ul>
<li class="icl-fr">
<a href="#">
<img src="images/flag/fr.png" class="icflag" alt>
&nbsp;FR
</a>
</li>
<li class="icl-de">
<a href="#">
<img src="images/flag/de.png" class="icflag" alt>
&nbsp;DE
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /site top panel -->
<!-- sticky menu -->
<header class='sticky-header js-stick top-fixed'>
<div class="container">
<nav class="main-nav">
<div class="full-wrapper align-center">
<!-- logo sticky -->
<div class="nav-logo-wrap-sticky">
<a href="index.html" class="logo">
<img src="images/logo.png" data-at2x="images/logo@2x.png" alt>
</a>
</div>
<!-- / logo sticky -->
<!-- menu mobile bars -->
<div class="mobile-nav">
<i class="fa fa-bars"></i>
</div>
<!-- / menu mobile bars -->
<div class="inner-nav desktop-nav">
<ul class="clearlist">
<li>
<a href="index.html" class="nav-submenu">Home</a>
</li>
<li class="sep">
<a>/</a>
</li>
<li>
<a href="#" class="nav-submenu active">Pages</a>
<!-- submenu -->
<ul class="submenu submenu-mega">
<li class="submenu-mega-col">
<a class="submenu-mega-title font-alt">Pages</a>
<ul>
<li>
<a href="home-1.html">Home 2</a>
</li>
<li>
<a href="home-2.html">Home 3</a>
</li>
<li>
<a href="about-1.html">About us 1</a>
</li>
<li>
<a href="team.html">Our Team</a>
</li>
</ul>
</li>
<li class="submenu-mega-col">
<a class="submenu-mega-title font-alt">Content</a>
<ul>
<li>
<a href="pricing-tables.html">Pricing</a>
</li>
<li>
<a href="reservation.html">Reservation</a>
</li>
<li>
<a href="services.html">Services</a>
</li>
<li>
<a href="shortcodes.html">Shortcodes</a>
</li>
<li>
<a href="typography.html">Typography</a>
</li>
</ul>
</li>
<li class="submenu-mega-col">
<a class="submenu-mega-title font-alt">Portfolio</a>
<ul>
<li>
<a href="gallery-fullwidth-filter.html">Filter</a>
</li>
<li>
<a href="gallery-right-sidebar.html">Right Sidebar</a>
</li>
<li>
<a href="gallery-one-column.html">One Column</a>
</li>
<li>
<a href="gallery-two-column.html">Two Column</a>
</li>
<li>
<a href="gallery-three-column.html">Three Column</a>
</li>
</ul>
</li>
<li class="submenu-mega-col">
<a class="submenu-mega-title font-alt">Blog</a>
<ul>
<li>
<a href="blog-default.html">Default</a>
</li>
<li>
<a href="blog-post.html">Blog Post</a>
</li>
<li>
<a href="blog-two-col.html">Two Columns</a>
</li>
<li>
<a href="blog-three-col.html">Three Columns</a>
</li>
<li>
<a href="blog-fullwidth.html">Full Width</a>
</li>
</ul>
</li>
</ul>
<!-- / submenu -->
</li>
<li class="sep">
<a>/</a>
</li>
<li>
<a href="#" class="nav-submenu">Gallery</a>
<!-- submenu -->
<ul class="submenu">
<li>
<a href="gallery-fullwidth.html">Full Width</a>
</li>
<li>
<a href="gallery-fullwidth-filter.html">Filter</a>
</li>
<li>
<a href="gallery-right-sidebar.html">Right Sidebar</a>
</li>
<li>
<a href="gallery-one-column.html">One Column</a>
</li>
<li>
<a href="gallery-two-column.html">Two Column</a>
</li>
<li>
<a href="gallery-three-column.html">Three Column</a>
</li>
</ul>
<!-- / submenu -->
</li>
<!-- logo menu -->
<li class="nav-logo-wrap">
<a href="index.html" class="logo">
<img src="images/logo.png" data-at2x="images/logo@2x.png" alt>
</a>
</li>
<!-- / logo menu -->
<li>
<a href="#" class="nav-submenu">Blog</a>
<!-- submenu -->
<ul class="submenu">
<li>
<a href="blog-default.html">Default</a>
</li>
<li>
<a href="blog-post.html">Blog Post</a>
</li>
<li>
<a href="blog-two-col.html">Two Columns</a>
</li>
<li>
<a href="blog-three-col.html">Three Columns</a>
</li>
<li>
<a href="blog-fullwidth.html">Full Width</a>
</li>
</ul>
<!-- / submenu -->
</li>
<li class="sep">
<a>/</a>
</li>
<li>
<a href="#" class="nav-submenu">Shop</a>
<!-- submenu -->
<ul class="submenu">
<li>
<a href="shop-product-list.html">Product List</a>
</li>
<li>
<a href="shop-single-item.html">Single Item</a>
</li>
<li>
<a href="shop-cart.html">Shop Cart</a>
</li>
<li>
<a href="shop-checkout.html">Checkout</a>
</li>
</ul>
<!-- / submenu -->
</li>
<li class="sep">
<a>/</a>
</li>
<li>
<a href="contact.html">Location</a>
</li>
</ul>
<div class="menu-rect">
<img src="images/lines/rectangle-1.png" data-at2x="images/lines/rectangle-1@2x.png" alt>
</div>
</div>
</div>
</nav>
</div>
</header>
<!-- / sticky menu -->
<!-- slider revolution -->
<div class="tp-banner-container">
<div class="tp-banner-slider">
<ul>
<!-- slide revolution -->
<li data-masterspeed="700">
<img src="images/section-bg/slider-2.jpg" alt>
<div class="tp-caption sl-content font-alt" data-x="['left']" data-hoffset="20" data-y="170" data-voffset="0" data-width="['315px','250px','200px','150px']" data-height="['315px','250px','200px','150px']" data-transform_in="opacity:0;s:1000;e:Power2.easeInOut;" data-transform_out="opacity:0;s:300;s:1000;" data-start="400">
<div class="sl-title font-alt">Spa <br /> treatment</div>
<div class="img-line">
<img src="images/lines/img-line-8.png" data-at2x="images/lines/img-line-8@2x.png" alt>
</div>
<p>Unique Watercare <br /> System</p>
</div>
<div class="tp-caption sl-content font-alt" data-x="['right']" data-hoffset="20" data-y="center" data-voffset="0" data-width="['315px','250px','200px','150px']" data-height="['315px','250px','200px','150px']" data-transform_in="opacity:0;s:1000;e:Power2.easeInOut;" data-transform_out="opacity:0;s:300;s:1000;" data-start="400">
<div class="sl-title font-alt">Something <br /> for everyone!</div>
<div class="img-line">
<img src="images/lines/img-line-8.png" data-at2x="images/lines/img-line-8@2x.png" alt>
</div>
<p>Spa Experience <br /> For You</p>
</div>
</li>
<!-- /slide revolution -->
<!-- slide revolution -->
<li data-masterspeed="700" data-transition="fade">
<img src="images/section-bg/slider-3.jpg" alt>
<div class="tp-caption sl-content font-alt" data-x="['left']" data-hoffset="20" data-y="center" data-voffset="0" data-width="['315px','250px','200px','150px']" data-height="['315px','250px','200px','150px']" data-transform_in="opacity:0;s:1000;e:Power2.easeInOut;" data-transform_out="opacity:0;s:300;s:1000;" data-start="400">
<div class="sl-title font-alt">Spa <br /> treatment</div>
<div class="img-line">
<img src="images/lines/img-line-8.png" data-at2x="images/lines/img-line-8@2x.png" alt>
</div>
<p>Unique Watercare <br /> System</p>
</div>
<div class="tp-caption sl-content font-alt" data-x="['right']" data-hoffset="20" data-y="150" data-voffset="0" data-width="['315px','250px','200px','150px']" data-height="['315px','250px','200px','150px']" data-transform_in="opacity:0;s:1000;e:Power2.easeInOut;" data-transform_out="opacity:0;s:300;s:1000;" data-start="400">
<div class="sl-title font-alt">Something <br /> for everyone!</div>
<div class="img-line">
<img src="images/lines/img-line-8.png" data-at2x="images/lines/img-line-8@2x.png" alt>
</div>
<p>Spa Experience <br /> For You</p>
</div>
</li>
<!-- /slide revolution -->
<!-- slide revolution -->
<li data-masterspeed="700">
<img src="images/section-bg/slider-1.jpg" alt>
<div class="tp-caption sl-content font-alt" data-x="['left']" data-hoffset="20" data-y="center" data-voffset="0" data-width="['315px','250px','200px','150px']" data-height="['315px','250px','200px','150px']" data-transform_in="opacity:0;s:1000;e:Power2.easeInOut;" data-transform_out="opacity:0;s:300;s:1000;" data-start="400">
<div class="sl-title font-alt">Spa <br /> treatment</div>
<div class="img-line">
<img src="images/lines/img-line-8.png" data-at2x="images/lines/img-line-8@2x.png" alt>
</div>
<p>Unique Watercare <br /> System</p>
</div>
<div class="tp-caption sl-content font-alt" data-x="['right']" data-hoffset="20" data-y="['75']" data-voffset="0" data-width="['315px','250px','200px','150px']" data-height="['315px','250px','200px','150px']" data-transform_in="opacity:0;s:1000;e:Power2.easeInOut;" data-transform_out="opacity:0;s:300;s:1000;" data-start="400">
<div class="sl-title font-alt">Something <br /> for everyone!</div>
<div class="img-line">
<img src="images/lines/img-line-8.png" data-at2x="images/lines/img-line-8@2x.png" alt>
</div>
<p>Spa Experience <br /> For You</p>
</div>
</li>
<!-- /slide revolution -->
</ul>
</div>
<div class="slider-rect-bot">
<img src="images/lines/rectangle-2.png" data-at2x="images/lines/rectangle-2@2x.png" alt>
</div>
</div>
<!-- /slider revolution -->
<!-- page section -->
<section class="page-section">
<div class="container align-center">
<h3 class="section-title bottom-line font-alt">Latest Notes<span>Heavenly Delight</span></h3>
<div class="col-md-10 col-md-offset-1 mb-30">
<p>Donec rhoncus diam in lectus finibus, eget ultrices urna commodo. Fusce dignissim lobortis erat, tristique lobortis justo imperdiet at. Aliquam congue orci non pulvinar gravida.</p>
</div>
<!-- latest news -->
<div class="row">
<div class="col-md-4 mb-md-30">
<div class="news-item alt-1">
<a href="images/news/img-1@2x.jpg" class="lightbox mfp-image">
<div class="news-media">
<img src="images/news/img-1.jpg" data-at2x="images/news/img-1@2x.jpg" alt>
</div>
</a>
<h3 class="news-title font-alt">Proin vehicula elit eu metus</h3>
<div class="img-line alt-1">
<img src="images/lines/img-line-26.png" data-at2x="images/lines/img-line-26@2x.png" alt>
</div>
<p>Phasellus ullamcorper, lectus et tristique semper, magna nunc vestibulum purus, efficitur tincidunt nisi diam id erat.</p>
<div class="news-date">
by Jane Doe &#160;/&#160; Dec 10, 2016 &#160;/&#160; <i class="fa fa-heart-o"></i> 2 &#160;/&#160; <i class="fa fa-comment-o"></i> 10
</div>
<a href="#" class="button mini">Read More</a>
</div>
</div>
<div class="col-md-4 mb-md-30">
<div class="news-item alt-1">
<a href="images/news/img-2@2x.jpg" class="lightbox mfp-image">
<div class="news-media">
<img src="images/news/img-2.jpg" data-at2x="images/news/img-2@2x.jpg" alt>
</div>
</a>
<h3 class="news-title font-alt">Proin vehicula elit eu metus</h3>
<div class="img-line alt-1">
<img src="images/lines/img-line-26.png" data-at2x="images/lines/img-line-26@2x.png" alt>
</div>
<p>In vel fermentum arcu. Mauris eu ullamcorper lorem. Nulla laoreet ipsum erat, sed tincidunt mi imperdiet sed.</p>
<div class="news-date">
by Jane Doe &#160;/&#160; Dec 10, 2016 &#160;/&#160; <i class="fa fa-heart-o"></i> 2 &#160;/&#160; <i class="fa fa-comment-o"></i> 10
</div>
<a href="#" class="button mini">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="news-item alt-1">
<a href="images/news/img-3@2x.jpg" class="lightbox mfp-image">
<div class="news-media">
<img src="images/news/img-3.jpg" data-at2x="images/news/img-3@2x.jpg" alt>
</div>
</a>
<h3 class="news-title font-alt">Proin vehicula elit eu metus</h3>
<div class="img-line alt-1">
<img src="images/lines/img-line-26.png" data-at2x="images/lines/img-line-26@2x.png" alt>
</div>
<p>Donec at condimentum dui. Nunc lectus tellus, laoreet eget consequat ut, faucibus ut dolor. Aenean eu ex augue.</p>
<div class="news-date">
by Jane Doe &#160;/&#160; Dec 10, 2016 &#160;/&#160; <i class="fa fa-heart-o"></i> 2 &#160;/&#160; <i class="fa fa-comment-o"></i> 10
</div>
<a href="#" class="button mini">Read More</a>
</div>
</div>
</div>
<!-- /latest news -->
</div>
</section>
<!-- /page section -->
<!-- small section -->
<section class="small-section bg-section-color1 opacity-90" data-background="images/section-bg/section-bg-2.jpg">
<div class="container">
<!-- features items -->
<div class="row">
<div class="col-md-4 mb-md-30">
<div class="features-center">
<div class="features-icon alt-1">
<i class="flaticon-nature"></i>
</div>
<h3 class="features-title font-alt">Body Care</h3>
<p>Integer placerat leo eu nisl sollicidin ali quamutdasfe fermetum nulla.</p>
</div>
</div>
<div class="col-md-4 mb-md-30">
<div class="features-center">
<div class="features-icon alt-1">
<i class="flaticon-stack"></i>
</div>
<h3 class="features-title font-alt">Hands & Feet</h3>
<p>Integer placerat leo eu nisl sollicidin ali quamutdasfe fermetum nulla.</p>
</div>
</div>
<div class="col-md-4 mb-md-30">
<div class="features-center">
<div class="features-icon alt-1">
<i class="flaticon-food"></i>
</div>
<h3 class="features-title font-alt">Spa Massage</h3>
<p>Integer placerat leo eu nisl sollicidin ali quamutdasfe fermetum nulla.</p>
</div>
</div>
</div>
<!-- /features items -->
</div>
</section>
<!-- /small section -->
<!-- page section -->
<section class="page-section">
<div class="container align-center">
<h3 class="section-title bottom-line font-alt">About Relish<span>Elegance & Beauty</span></h3>
<div class="col-md-10 col-md-offset-1 mb-30">
<p>Integer placerat leo eu nisl sollicitudin aliquam. Ut fermentum nulla ac neque dictum, vel porta orci tempus. Duis imperdiet est arcu, nec bibendum enim eleifend at.</p>
</div>
<div class="row mt-30">
<!-- accordion -->
<div class="col-md-6 mb-md-30">
<dl class="accordion">
<dt>
<a href="#" class="">Nullam at eros sodales, fermentum eros sit amet, cursus<i class="plus-minus"></i></a>
</dt>
<dd style="display: none;">
Libero commodo, ornare mi id, egestas metus. Vivamus condimen tum elit vel vestibulum feugiat Aliquam semper nunc augue, vitae fringilla felis adipiscing acer espice.
</dd>
<dt>
<a href="#" class="active">Aenean sed purus eget elit viverra posuere ut vitae enim<i class="plus-minus"></i></a>
</dt>
<dd style="display: block;">
Libero commodo, ornare mi id, egestas metus. Vivamus condimen tum elit vel vestibulum feugiat Aliquam semper nunc augue, vitae fringilla felis adipiscing acer espice.
</dd>
<dt>
<a href="#" class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit<i class="plus-minus"></i></a>
</dt>
<dd style="display: none;">
Libero commodo, ornare mi id, egestas metus. Vivamus condimen tum elit vel vestibulum feugiat Aliquam semper nunc augue, vitae fringilla felis adipiscing acer espice.
</dd>
</dl>
</div>
<!-- /accordion -->
<!-- skill bars -->
<div class="col-md-6">
<ul class="skill-bar font-alt">
<li>
<div class="name">
SPA RESORT BREAKS<span> - </span>
<span class="skill-bar-perc"> 49%</span>
</div>
<div class="bar">
<span class="bar-color-1 skill-bar-progress" data-value="49"></span>
</div>
</li>
<li>
<div class="name">
NEW PACKAGES<span> - </span>
<span class="skill-bar-perc">86%</span>
</div>
<div class="bar">
<span class="bar-color-2 skill-bar-progress" data-value="86"></span>
</div>
</li>
<li>
<div class="name">
SPECIALIST RETREATS<span> - </span>
<span class="skill-bar-perc">68%</span>
</div>
<div class="bar">
<span class="bar-color-3 skill-bar-progress" data-value="68"></span>
</div>
</li>
<li>
<div class="name">
SPECIAL OCCASIONS<span> - </span>
<span class="skill-bar-perc">78%</span>
</div>
<div class="bar">
<span class="bar-color-4 skill-bar-progress" data-value="78"></span>
</div>
</li>
<li>
<div class="name">
CLASSIC SPA DAYS<span> - </span>
<span class="skill-bar-perc">47%</span>
</div>
<div class="bar">
<span class="bar-color-4 skill-bar-progress" data-value="47"></span>
</div>
</li>
</ul>
</div>
<!-- /skill bars -->
</div>
</div>
</section>
<!-- /page section -->
<div class="sep-lane alt-3"><span></span></div>
<!-- page section -->
<section class="page-section alt-color">
<div class="container align-center">
<h3 class="section-title bottom-line long font-alt">Book An Procedure<span>We are Open for You</span></h3>
<div class="col-md-10 col-md-offset-1 mb-30">
<p>Phasellus sodales elementum vestibulum. In et dolor felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum nec ornare mi, ac porttitor nisi.</p>
</div>
<!-- procedure items -->
<div class="row mt-30">
<div class="col-md-6 col-lg-4 mb-md-30">
<div class="procedure-item ih-item circle effect13 from_left_and_right font-alt">
<a href="#">
<div class="procedure-media img">
<img src="images/procedure/img-1.jpg" data-at2x="images/procedure/img-1@2x.jpg" alt>
</div>
<div class="info">
<h3>Opening Time</h3>
<div>
<div class="img-line alt-1">
<img src="images/lines/img-line-26.png" data-at2x="images/lines/img-line-26@2x.png" alt>
</div>
Monday - Friday
<span>08:00 - 17:30</span>
</div>
<div>
<div class="img-line alt-1">
<img src="images/lines/img-line-26.png" data-at2x="images/lines/img-line-26@2x.png" alt>
</div>
Saturday
<span>12:00 - 17:30</span>
</div>
<div>
<div class="img-line alt-1">
<img src="images/lines/img-line-26.png" data-at2x="images/lines/img-line-26@2x.png" alt>
</div>
Sunday
<span>CLOSED</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-md-30">
<div class="procedure-item ih-item circle effect13 from_left_and_right font-alt">
<a href="#">
<div class="procedure-media img">
<img src="images/procedure/img-2.jpg" data-at2x="images/procedure/img-2@2x.jpg" alt>
</div>
<div class="info">
<h3>Opening Time</h3>
<div>
<div class="img-line alt-1">
<img src="images/lines/img-line-26.png" data-at2x="images/lines/img-line-26@2x.png" alt>
</div>
Monday - Friday
<span>08:00 - 17:30</span>
</div>
<div>
<div class="img-line alt-1">
<img src="images/lines/img-line-26.png" data-at2x="images/lines/img-line-26@2x.png" alt>
</div>
Saturday
<span>12:00 - 17:30</span>
</div>
<div>
<div class="img-line alt-1">
<img src="images/lines/img-line-26.png" data-at2x="images/lines/img-line-26@2x.png" alt>
</div>
Sunday
<span>CLOSED</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-12 col-lg-4">
<div class="procedure-item ih-item circle effect13 from_left_and_right font-alt">
<a href="#">
<div class="procedure-media img">
<img src="images/procedure/img-3.jpg" data-at2x="images/procedure/img-3@2x.jpg" alt>
</div>
<div class="info">
<h3>Opening Time</h3>
<div>
<div class="img-line alt-1">
<img src="images/lines/img-line-26.png" data-at2x="images/lines/img-line-26@2x.png" alt>
</div>
Monday - Friday
<span>08:00 - 17:30</span>
</div>
<div>
<div class="img-line alt-1">
<img src="images/lines/img-line-26.png" data-at2x="images/lines/img-line-26@2x.png" alt>
</div>
Saturday
<span>12:00 - 17:30</span>
</div>
<div>
<div class="img-line alt-1">
<img src="images/lines/img-line-26.png" data-at2x="images/lines/img-line-26@2x.png" alt>
</div>
Sunday
<span>CLOSED</span>
</div>
</div>
</a>
</div>
</div>
</div>
<!-- /procedure items -->
<!-- selection boxes -->
<div class="row mt-20">
<div class="col-lg-3 col-md-6">
<div class="select">
<h3 class="select-title font-alt">
<span>01.</span>
Select Service
</h3>
<div class="selection-box">
<select>
<option>Detox Body Treatments</option>
<option>Skin Care</option>
<option>Health & Wellness</option>
<option>Power of Water</option>
<option>Red Rock Treatments</option>
<option>Massage</option>
</select>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="select">
<h3 class="select-title font-alt">
<span>02.</span>
Select Staff
</h3>
<div class="selection-box">
<select>
<option>Jane Doe</option>
<option>Jhon Doe</option>
</select>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="select">
<h3 class="select-title font-alt">
<span>03.</span>
Select Day
</h3>
<div class="selection-box">
<select>
<option>21-08-2016</option>
<option>22-08-2016</option>
<option>23-08-2016</option>
<option>24-08-2016</option>
<option>25-08-2016</option>
<option>26-08-2016</option>
</select>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="select">
<h3 class="select-title font-alt">
<span>04.</span>
Select Time
</h3>
<div class="selection-box">
<select>
<option>10:30 am</option>
<option>11:30 am</option>
<option>12:30 pm</option>
<option>13:30 pm</option>
<option>14:30 pm</option>
<option>15:30 pm</option>
<option>16:30 pm</option>
<option>17:30 pm</option>
<option>18:30 pm</option>
</select>
</div>
</div>
</div>
</div>
<!-- /selection boxes -->
<a href="#" class="button mt-40">Make an appointment</a>
</div>
</section>
<!-- /page section -->
<div class="sep-lane alt-3"><span></span></div>
<!-- page section -->
<section class="page-section">
<div class="container align-center">
<h3 class="section-title bottom-line font-alt">Pricing Tables<span>Heavenly Delight</span></h3>
<p>Donec rhoncus diam in lectus finibus, eget ultrices urna commodo. Fusce dignissim lobortis erat, tristique lobortis justo imperdiet at. Aliquam congue orci non pulvinar gravida. Etiam consequat, odio at ultricies pharetra, purus elit tristique magna, ut imperdiet tortor orci vel libero. </p>
<!-- pricing tables -->
<div class="row mt-30">
<div class="col-lg-3 col-md-6 mb-lg-50">
<div class="pricing-table-container">
<article class="pricing-table">
<div class="pricing-media">
<img src="images/pricing/img-1.jpg" data-at2x="images/pricing/img-1@2x.jpg" alt>
</div>
<div class="pricing-price font-alt">
<span>29<sup>.99</sup></span>
<p>per month</p>
</div>
<h3 class="pricing-title font-alt">Spa Light</h3>
<div class="img-line">
<img src="images/lines/img-line-40.png" data-at2x="images/lines/img-line-40@2x.png" alt>
</div>
<ul>
<li>10 Cleansing Sauna</li>
<li>10 Jacuzzi</li>
<li>10 Steam Room</li>
<li>10 Monsoon Shower</li>
<li>10 Metre Lap Indoor Pool</li>
</ul>
<a href="#" class="button mini mb-30">View Details</a>
</article>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-lg-50">
<div class="pricing-table-container">
<article class="pricing-table active">
<div class="pricing-media">
<img src="images/pricing/img-2.jpg" data-at2x="images/pricing/img-2@2x.jpg" alt>
</div>
<div class="pricing-price font-alt">
<span>59<sup>.99</sup></span>
<p>per month</p>
</div>
<h3 class="pricing-title font-alt">Spa Mild</h3>
<div class="img-line">
<img src="images/lines/img-line-40.png" data-at2x="images/lines/img-line-40@2x.png" alt>
</div>
<ul>
<li>20 Cleansing Sauna</li>
<li>20 Jacuzzi</li>
<li>20 Steam Room</li>
<li>20 Monsoon Shower</li>
<li>20 Metre Lap Indoor Pool</li>
</ul>
<a href="#" class="button mini mb-30">View Details</a>
</article>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-lg-50">
<div class="pricing-table-container">
<article class="pricing-table">
<div class="pricing-media">
<img src="images/pricing/img-3.jpg" data-at2x="images/pricing/img-3@2x.jpg" alt>
</div>
<div class="pricing-price font-alt">
<span>79<sup>.99</sup></span>
<p>per month</p>
</div>
<h3 class="pricing-title font-alt">Spa Exclusive</h3>
<div class="img-line">
<img src="images/lines/img-line-40.png" data-at2x="images/lines/img-line-40@2x.png" alt>
</div>
<ul>
<li>30 Cleansing Sauna</li>
<li>30 Jacuzzi</li>
<li>30 Steam Room</li>
<li>30 Monsoon Shower</li>
<li>30 Metre Lap Indoor Pool</li>
</ul>
<a href="#" class="button mini mb-30">View Details</a>
</article>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-lg-50">
<div class="pricing-table-container">
<article class="pricing-table">
<div class="pricing-media">
<img src="images/pricing/img-4.jpg" data-at2x="images/pricing/img-4@2x.jpg" alt>
</div>
<div class="pricing-price font-alt">
<span>99<sup>.99</sup></span>
<p>per month</p>
</div>
<h3 class="pricing-title font-alt">Spa Vip</h3>
<div class="img-line">
<img src="images/lines/img-line-40.png" data-at2x="images/lines/img-line-40@2x.png" alt>
</div>
<ul>
<li>40 Cleansing Sauna</li>
<li>40 Jacuzzi</li>
<li>40 Steam Room</li>
<li>40 Monsoon Shower</li>
<li>40 Metre Lap Indoor Pool</li>
</ul>
<a href="#" class="button mini mb-30">View Details</a>
</article>
</div>
</div>
</div>
<!-- /pricing tables -->
</div>
</section>
<!-- /page section -->
<hr class="mt-0 mb-0 alt-2">
<!-- footer -->
<footer>
<div class="footer-rect">
<img src="images/lines/rectangle-3.png" data-at2x="images/lines/rectangle-3@2x.png" alt>
</div>
<!-- footer top -->
<div class="footer-section">
<div class="container">
<div class="row">
<!-- footer about -->
<div class="col-md-4 col-xs-12 mb-lg-30">
<div class="footer-about align-center">
<h3 class="footer-title font-alt">About Relish</h3>
<div class="img-line">
<img src="images/lines/img-line-40.png" data-at2x="images/lines/img-line-40@2x.png" alt>
</div>
<p class="align-left mb-40">Lorem ipsum dolor sit amet, consectetuer adipiscing no. Aenean comodo ligula eget dolor. Senean masas, cum sociis natoque nean comodo.</p>
<h3 class="footer-title-small font-alt">NEWSLETTER SIGNUP</h3>
<form class="form">
<input type="email" class="input-sm mb-20" value="" placeholder="Your Email">
<button class="button small button-newsletter" name="submit" type="submit" >OK</button>
</form>
</div>
</div>
<!-- / footer about -->
<!-- footer tweets -->
<div class="col-md-4 col-xs-12 mb-lg-30">
<div class="footer-tweets align-center">
<h3 class="footer-title font-alt">Latest Tweets</h3>
<div class="img-line">
<img src="images/lines/img-line-40.png" data-at2x="images/lines/img-line-40@2x.png" alt>
</div>
<div class="twitter-footer align-left"></div>
</div>
</div>
<!-- / footer tweets -->
<!-- footer contacts -->
<div class="col-md-4 col-xs-12 mb-lg-30">
<div class="footer-contact align-center">
<h3 class="footer-title font-alt">Contacts</h3>
<div class="img-line">
<img src="images/lines/img-line-40.png" data-at2x="images/lines/img-line-40@2x.png" alt>
</div>
<p>Little Lonsdale St, Talay Victoria 8011 Philippines</p>
E-mail: <a href="#">mail@mail.com</a><br />
Tel: <a href="#">+4723-000-5555</a><br />
Fax: <a href="#">+4723-000-5556</a>
<h3 class="footer-title-small font-alt">Working Hours</h3>
Mon - Fr: 9:00 - 19:00 <br />
Sat: 10:00 - 15:00
</div>
</div>
<!-- / footer contacts -->
</div>
</div>
</div>
<!-- / footer top -->
<!-- footer bottom -->
<div class="bottom-footer">
<div class="container">
<!-- footer copy -->
<div class="footer-copy">
Copyright © 2016 relish.com. All rights reserved. Terms of Use l Privacy Policy
</div>
<!-- / footer copy -->
<!-- footer social -->
<div class="footer-soc-links">
<a href="#">
<i class="flaticon-social"></i>
</a>
<a href="#">
<i class="flaticon-social-4"></i>
</a>
<a href="#">
<i class="flaticon-social-5"></i>
</a>
<a href="#">
<i class="flaticon-connection"></i>
</a>
<a href="#">
<i class="flaticon-social-2"></i>
</a>
</div>
<!-- / footer social -->
</div>
</div>
<!-- / footer bottom -->
</footer>
<!-- / footer -->
<!-- scroll-top -->
<div id="scroll-top">
<i class="fa fa-angle-up"></i>
top
</div>
<!-- / scroll-top -->
</div>
<!-- / PAGE -->
<!-- SCRIPTS -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/isotope.pkgd.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/jquery.form.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/jquery.parallax.min.js"></script>
<script src="js/jquery.appear.js"></script>
<script src="js/retina.min.js"></script>
<script type='text/javascript' src='revslider/js/jquery.themepunch.tools.min.js'></script>
<script type='text/javascript' src='revslider/js/jquery.themepunch.revolution.min.js'></script>
<script type='text/javascript' src='revslider/js/jquery.themepunch.tools.min.js'></script>
<script type='text/javascript' src='revslider/js/jquery.themepunch.revolution.min.js'></script>
<script type="text/javascript" src="revslider/js/extensions/revolution.extension.slideanims.min.js"></script>
<script type="text/javascript" src="revslider/js/extensions/revolution.extension.layeranimation.min.js"></script>
<script type="text/javascript" src="revslider/js/extensions/revolution.extension.navigation.min.js"></script>
<script type="text/javascript" src="revslider/js/extensions/revolution.extension.parallax.min.js"></script>
<script type="text/javascript" src="revslider/js/extensions/revolution.extension.video.min.js"></script>
<script type="text/javascript" src="revslider/js/extensions/revolution.extension.actions.min.js"></script>
<script type="text/javascript" src="revslider/js/extensions/revolution.extension.kenburn.min.js"></script>
<script type="text/javascript" src="revslider/js/extensions/revolution.extension.migration.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;language=en"></script>
<script src="js/gmap3.min.js"></script>
<script src="js/jquery.ui.min.js"></script>
<script src="js/jquery.tweet.js"></script>
<script src="js/scripts.js"></script>
<!-- / SCRIPTS -->
</body>
</html>