yogiwhere/public/frontend/shortcodes.html

2008 lines
68 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 -->
<!-- breadcrumb -->
<section class="breadcrumb-section" data-background="images/section-bg/section-bg-4.jpg">
<div class="container align-center">
<nav class="breadcrumb">
<a href="index.html">Home</a>
<a href="#">Pages</a>
<a href="#">Shortcodes</a>
</nav>
</div>
</section>
<!-- /breadcrumb -->
<hr class="mt-0 mb-0 alt-2" />
<!-- page section -->
<section class="page-section">
<div class="container">
<h3 class="section-title font-alt">Info Boxes</h3>
<!-- info boxes -->
<div class="row">
<div class="col-md-12 col-lg-6 mb-lg-20">
<div class="info-boxes info-message alt">
<div class="info-box-icon">
<i class="fa fa-info"></i>
</div>
<h3 class="info-title font-alt">Information box</h3>
Vestibulum sodales pellentesque nibh quis imperdiet
<div class="close-button"><i class="fa fa-times"></i></div>
</div>
<div class="info-boxes error-message alt">
<div class="info-box-icon">
<i class="fa fa-bolt"></i>
</div>
<h3 class="info-title font-alt">Error box</h3>
Vestibulum sodales pellentesque nibh quis imperdiet
<div class="close-button"><i class="fa fa-times"></i></div>
</div>
<div class="info-boxes warning-message alt">
<div class="info-box-icon">
<i class="fa fa-plug"></i>
</div>
<h3 class="info-title font-alt">Warning box</h3>
Vestibulum sodales pellentesque nibh quis imperdiet
<div class="close-button"><i class="fa fa-times"></i></div>
</div>
<div class="info-boxes confirmation-message alt">
<div class="info-box-icon">
<i class="fa fa-check"></i>
</div>
<h3 class="info-title font-alt">Confirmation box</h3>
Vestibulum sodales pellentesque nibh quis imperdiet
<div class="close-button"><i class="fa fa-times"></i></div>
</div>
</div>
<div class="col-md-12 col-lg-6">
<div class="info-boxes info-message">
<div class="info-box-icon">
<i class="fa fa-info"></i>
</div>
<h3 class="info-title font-alt">Information box</h3>
Vestibulum sodales pellentesque nibh quis imperdiet
<div class="close-button"><i class="fa fa-times"></i></div>
</div>
<div class="info-boxes error-message">
<div class="info-box-icon">
<i class="fa fa-bolt"></i>
</div>
<h3 class="info-title font-alt">Error box</h3>
Vestibulum sodales pellentesque nibh quis imperdiet
<div class="close-button"><i class="fa fa-times"></i></div>
</div>
<div class="info-boxes warning-message">
<div class="info-box-icon">
<i class="fa fa-plug"></i>
</div>
<h3 class="info-title font-alt">Warning box</h3>
Vestibulum sodales pellentesque nibh quis imperdiet
<div class="close-button"><i class="fa fa-times"></i></div>
</div>
<div class="info-boxes confirmation-message">
<div class="info-box-icon">
<i class="fa fa-check"></i>
</div>
<h3 class="info-title font-alt">Confirmation box</h3>
Vestibulum sodales pellentesque nibh quis imperdiet
<div class="close-button"><i class="fa fa-times"></i></div>
</div>
</div>
</div>
<!-- /info boxes -->
<hr class="mt-60 mb-40 alt-3" />
<div class="row">
<div class="col-md-8 col-lg-6">
<h3 class="section-title font-alt align-left">Toggles</h3>
<!-- toggle -->
<dl class="toggle">
<dt>
<a href="#" class="">Nullam at eros sodales, fermentum eros sit amet, cursus</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</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</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="">Curabitur in neque sed urna ultricies aliquet a id mi.</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="">Phasellus a lectus non turpis ornare adipiscing nunc</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>
<!-- /toggle -->
</div>
<div class="col-md-8 col-lg-6">
<h3 class="section-title font-alt align-left">Tabs</h3>
<!-- tabs -->
<div class="tabs">
<ul class="nav nav-tabs font-alt">
<li class="active">
<a href="#one" data-toggle="tab">Tab 1</a>
</li>
<li>
<a href="#two" data-toggle="tab">Tab 2</a>
</li>
<li>
<a href="#three" data-toggle="tab">Tab 3</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="one">
<h3 class="tab-title">Donec tincidunt interdum risus consequat placerat.</h3>
<p>Nam sit amet augue ante. Integer scelerisque dapibus odio gravida dapibus. Mauris tincidunt vitae tortor eu bibendum. Nulla ultrices eu lorem ac fermentum. Nulla accumsan euismod tellus, ut pretium.</p>
<div class="row">
<div class="col-md-6">
<ul class="list-style-1">
<li>Suspendisse in risus a odio</li>
<li>Praesent at sem vitae lacus</li>
<li>Sed pretium lorem sed nulla</li>
<li>Svitae tortor eu bibendum</li>
</ul>
</div>
<div class="col-md-6">
<ul class="list-style-1">
<li>In condimentum, risus eget</li>
<li>Vivamus justo odio dictum</li>
<li>Evitae tortor eu bibendum</li>
<li>Eleifend rutrum dignissim</li>
</ul>
</div>
</div>
</div>
<div class="tab-pane fade" id="two">
<h3 class="tab-title">Donec tincidunt interdum risus consequat placerat.</h3>
<p>Nam sit amet augue ante. Integer scelerisque dapibus odio gravida dapibus. Mauris tincidunt vitae tortor eu bibendum. Nulla ultrices eu lorem ac fermentum. Nulla accumsan euismod tellus, ut pretium.</p>
<div class="row">
<div class="col-md-6">
<ul class="list-style-1">
<li>Suspendisse in risus a odio</li>
<li>Praesent at sem vitae lacus</li>
<li>Sed pretium lorem sed nulla</li>
<li>Svitae tortor eu bibendum</li>
</ul>
</div>
<div class="col-md-6">
<ul class="list-style-1">
<li>In condimentum, risus eget</li>
<li>Vivamus justo odio dictum</li>
<li>Evitae tortor eu bibendum</li>
<li>Eleifend rutrum dignissim</li>
</ul>
</div>
</div>
</div>
<div class="tab-pane fade" id="three">
<h3 class="tab-title">Donec tincidunt interdum risus consequat placerat.</h3>
<p>Nam sit amet augue ante. Integer scelerisque dapibus odio gravida dapibus. Mauris tincidunt vitae tortor eu bibendum. Nulla ultrices eu lorem ac fermentum. Nulla accumsan euismod tellus, ut pretium.</p>
<div class="row">
<div class="col-md-6">
<ul class="list-style-1">
<li>Suspendisse in risus a odio</li>
<li>Praesent at sem vitae lacus</li>
<li>Sed pretium lorem sed nulla</li>
<li>Svitae tortor eu bibendum</li>
</ul>
</div>
<div class="col-md-6">
<ul class="list-style-1">
<li>In condimentum, risus eget</li>
<li>Vivamus justo odio dictum</li>
<li>Evitae tortor eu bibendum</li>
<li>Eleifend rutrum dignissim</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- /tabs -->
</div>
</div>
<hr class="mt-60 mb-40 alt-3" />
<h3 class="section-title font-alt">Dividers</h3>
<!-- dividers -->
<div class="row">
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc erat lectus, molestie ut sem vel, lobortis feugiat turpis. Etiam pharetra, libero ac sollicitudin tristique, felis odio vestibulum leo, sed rutrum lectus magna id eros. Curabitur fermentum urna augue, sed ultricies enim finibus sit amet. Praesent nulla quam, laoreet sit amet imperdiet nec, mollis et eros. In laoreet id neque vitae consectetur. Nullam sit amet rhoncus lorem. Mauris ac elementum nisi, ac feugiat orci.</p>
<hr class="mt-40 mb-40 alt-4" />
</div>
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc erat lectus, molestie ut sem vel, lobortis feugiat turpis. Etiam pharetra, libero ac sollicitudin tristique, felis odio vestibulum leo, sed rutrum lectus magna id eros. Curabitur fermentum urna augue, sed ultricies enim finibus sit amet. Praesent nulla quam, laoreet sit amet imperdiet nec, mollis et eros. In laoreet id neque vitae consectetur. Nullam sit amet rhoncus lorem. Mauris ac elementum nisi, ac feugiat orci.</p>
<hr class="mt-40 mb-40 alt-1" />
</div>
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc erat lectus, molestie ut sem vel, lobortis feugiat turpis. Etiam pharetra, libero ac sollicitudin tristique, felis odio vestibulum leo, sed rutrum lectus magna id eros. Curabitur fermentum urna augue, sed ultricies enim finibus sit amet. Praesent nulla quam, laoreet sit amet imperdiet nec, mollis et eros. In laoreet id neque vitae consectetur. Nullam sit amet rhoncus lorem. Mauris ac elementum nisi, ac feugiat orci.</p>
<div class="sep-lane mt-40 mb-40"><span><img src="images/lines/img-line-0.png" data-at2x="images/lines/img-line-0@2x.png" alt></span></div>
</div>
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc erat lectus, molestie ut sem vel, lobortis feugiat turpis. Etiam pharetra, libero ac sollicitudin tristique, felis odio vestibulum leo, sed rutrum lectus magna id eros. Curabitur fermentum urna augue, sed ultricies enim finibus sit amet. Praesent nulla quam, laoreet sit amet imperdiet nec, mollis et eros. In laoreet id neque vitae consectetur. Nullam sit amet rhoncus lorem. Mauris ac elementum nisi, ac feugiat orci.</p>
<hr class="mt-40 mb-40 alt-3" />
</div>
</div>
<!-- /dividers -->
<h3 class="section-title font-alt">Buttons</h3>
<!-- buttons -->
<div class="row short-buttons">
<div class="col-md-12 col-lg-6 fsize-0">
<div class="row">
<div class="col-md-3 col-sm-6 mb-20">
<a href="#" class="button mini">Button</a>
</div>
<div class="col-md-3 col-sm-6 mb-20">
<a href="#" class="button small">Button</a>
</div>
<div class="col-md-3 col-sm-6 mb-20">
<a href="#" class="button">Button</a>
</div>
<div class="col-md-3 col-sm-6 mb-20">
<a href="#" class="button large">Button</a>
</div>
</div>
</div>
<div class="col-md-12 col-lg-6 fsize-0">
<div class="row">
<div class="col-md-3 col-sm-6 mb-20">
<a href="#" class="button button-color-2 mini">Button</a>
</div>
<div class="col-md-3 col-sm-6 mb-20">
<a href="#" class="button button-color-2 small">Button</a>
</div>
<div class="col-md-3 col-sm-6 mb-20">
<a href="#" class="button button-color-2">Button</a>
</div>
<div class="col-md-3 col-sm-6 mb-20">
<a href="#" class="button button-color-2 large">Button</a>
</div>
</div>
</div>
<div class="col-md-12 col-lg-6 fsize-0">
<div class="row">
<div class="col-md-3 col-sm-6 mb-20">
<a href="#" class="button button-border mini">Button</a>
</div>
<div class="col-md-3 col-sm-6 mb-20">
<a href="#" class="button button-border small">Button</a>
</div>
<div class="col-md-3 col-sm-6 mb-20">
<a href="#" class="button button-border">Button</a>
</div>
<div class="col-md-3 col-sm-6 mb-20">
<a href="#" class="button button-border large">Button</a>
</div>
</div>
</div>
<div class="col-md-12 col-lg-6 fsize-0">
<div class="row">
<div class="col-md-3 col-sm-6 mb-20">
<a href="#" class="button button-border button-color-2 mini">Button</a>
</div>
<div class="col-md-3 col-sm-6 mb-20">
<a href="#" class="button button-border button-color-2 small">Button</a>
</div>
<div class="col-md-3 col-sm-6 mb-20">
<a href="#" class="button button-border button-color-2">Button</a>
</div>
<div class="col-md-3 col-sm-6 mb-20">
<a href="#" class="button button-border button-color-2 large">Button</a>
</div>
</div>
</div>
</div>
<!-- /buttons -->
<hr class="mt-40 mb-40 alt-3" />
<div class="row">
<div class="col-lg-6 col-md-8">
<h3 class="section-title font-alt">Accordion</h3>
<!-- accordion -->
<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>
<dt>
<a href="#" class="">Curabitur in neque sed urna ultricies aliquet a id mi. <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="">Phasellus a lectus non turpis ornare adipiscing nunc<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>
<!-- /accordion -->
</div>
<div class="col-lg-6 col-md-8">
<h3 class="section-title font-alt">Progress Bar</h3>
<!-- skill bars -->
<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>
<li>
<div class="name">
HEALTH & WELLBEING<span> - </span>
<span class="skill-bar-perc">72%</span>
</div>
<div class="bar">
<span class="bar-color-4 skill-bar-progress" data-value="72"></span>
</div>
</li>
<li>
<div class="name">
MEETINGS & EVENTS<span> - </span>
<span class="skill-bar-perc">61%</span>
</div>
<div class="bar">
<span class="bar-color-4 skill-bar-progress" data-value="61"></span>
</div>
</li>
</ul>
<!-- /skill bars -->
</div>
</div>
<hr class="mt-40 mb-40 alt-3" />
<h3 class="section-title font-alt">Gallery</h3>
<div class="row">
<!-- portfolio slider carousel -->
<div class="slider-3 dots-alt sidebar">
<div class="slider-item">
<div class="portfolio-item ih-item circle effect13 from_left_and_right font-alt alt-2">
<a href="images/portfolio/img-1@2x.jpg" class="lightbox mfp-image">
<div class="portfolio-media">
<div class="portfolio-img">
<img src="images/portfolio/img-1.jpg" data-at2x="images/portfolio/img-1@2x.jpg" alt>
</div>
<div class="info">
<h3>Mauris eleifend</h3>
<div>
<div class="img-line">
<img src="images/lines/img-line-7.png" data-at2x="images/lines/img-line-7@2x.png" alt>
</div>
</div>
<div>
<p>Integer ex nunc, placerat vel orci quis, blandit varius</p>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="slider-item">
<div class="portfolio-item ih-item circle effect13 from_left_and_right font-alt alt-2">
<a href="images/portfolio/img-2@2x.jpg" class="lightbox mfp-image">
<div class="portfolio-media">
<div class="portfolio-img">
<img src="images/portfolio/img-2.jpg" data-at2x="images/portfolio/img-2@2x.jpg" alt>
</div>
<div class="info">
<h3>Mauris eleifend</h3>
<div>
<div class="img-line">
<img src="images/lines/img-line-7.png" data-at2x="images/lines/img-line-7@2x.png" alt>
</div>
</div>
<div>
<p>Integer ex nunc, placerat vel orci quis, blandit varius</p>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="slider-item">
<div class="portfolio-item ih-item circle effect13 from_left_and_right font-alt alt-2">
<a href="images/portfolio/img-3@2x.jpg" class="lightbox mfp-image">
<div class="portfolio-media">
<div class="portfolio-img">
<img src="images/portfolio/img-3.jpg" data-at2x="images/portfolio/img-3@2x.jpg" alt>
</div>
<div class="info">
<h3>Mauris eleifend</h3>
<div>
<div class="img-line">
<img src="images/lines/img-line-7.png" data-at2x="images/lines/img-line-7@2x.png" alt>
</div>
</div>
<div>
<p>Integer ex nunc, placerat vel orci quis, blandit varius</p>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="slider-item">
<div class="portfolio-item ih-item circle effect13 from_left_and_right font-alt alt-2">
<a href="images/portfolio/img-4@2x.jpg" class="lightbox mfp-image">
<div class="portfolio-media">
<div class="portfolio-img">
<img src="images/portfolio/img-4.jpg" data-at2x="images/portfolio/img-4@2x.jpg" alt>
</div>
<div class="info">
<h3>Mauris eleifend</h3>
<div>
<div class="img-line">
<img src="images/lines/img-line-7.png" data-at2x="images/lines/img-line-7@2x.png" alt>
</div>
</div>
<div>
<p>Integer ex nunc, placerat vel orci quis, blandit varius</p>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="slider-item">
<div class="portfolio-item ih-item circle effect13 from_left_and_right font-alt alt-2">
<a href="images/portfolio/img-5@2x.jpg" class="lightbox mfp-image">
<div class="portfolio-media">
<div class="portfolio-img">
<img src="images/portfolio/img-5.jpg" data-at2x="images/portfolio/img-5@2x.jpg" alt>
</div>
<div class="info">
<h3>Mauris eleifend</h3>
<div>
<div class="img-line">
<img src="images/lines/img-line-7.png" data-at2x="images/lines/img-line-7@2x.png" alt>
</div>
</div>
<div>
<p>Integer ex nunc, placerat vel orci quis, blandit varius</p>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="slider-item">
<div class="portfolio-item ih-item circle effect13 from_left_and_right font-alt alt-2">
<a href="images/portfolio/img-6@2x.jpg" class="lightbox mfp-image">
<div class="portfolio-media">
<div class="portfolio-img">
<img src="images/portfolio/img-6.jpg" data-at2x="images/portfolio/img-6@2x.jpg" alt>
</div>
<div class="info">
<h3>Mauris eleifend</h3>
<div>
<div class="img-line">
<img src="images/lines/img-line-7.png" data-at2x="images/lines/img-line-7@2x.png" alt>
</div>
</div>
<div>
<p>Integer ex nunc, placerat vel orci quis, blandit varius</p>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="slider-item">
<div class="portfolio-item ih-item circle effect13 from_left_and_right font-alt alt-2">
<a href="images/portfolio/img-7@2x.jpg" class="lightbox mfp-image">
<div class="portfolio-media">
<div class="portfolio-img">
<img src="images/portfolio/img-7.jpg" data-at2x="images/portfolio/img-7@2x.jpg" alt>
</div>
<div class="info">
<h3>Mauris eleifend</h3>
<div>
<div class="img-line">
<img src="images/lines/img-line-7.png" data-at2x="images/lines/img-line-7@2x.png" alt>
</div>
</div>
<div>
<p>Integer ex nunc, placerat vel orci quis, blandit varius</p>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="slider-item">
<div class="portfolio-item ih-item circle effect13 from_left_and_right font-alt alt-2">
<a href="images/portfolio/img-8@2x.jpg" class="lightbox mfp-image">
<div class="portfolio-media">
<div class="portfolio-img">
<img src="images/portfolio/img-8.jpg" data-at2x="images/portfolio/img-8@2x.jpg" alt>
</div>
<div class="info">
<h3>Mauris eleifend</h3>
<div>
<div class="img-line">
<img src="images/lines/img-line-7.png" data-at2x="images/lines/img-line-7@2x.png" alt>
</div>
</div>
<div>
<p>Integer ex nunc, placerat vel orci quis, blandit varius</p>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="slider-item">
<div class="portfolio-item ih-item circle effect13 from_left_and_right font-alt alt-2">
<a href="images/portfolio/img-9@2x.jpg" class="lightbox mfp-image">
<div class="portfolio-media">
<div class="portfolio-img">
<img src="images/portfolio/img-9.jpg" data-at2x="images/portfolio/img-9@2x.jpg" alt>
</div>
<div class="info">
<h3>Mauris eleifend</h3>
<div>
<div class="img-line">
<img src="images/lines/img-line-7.png" data-at2x="images/lines/img-line-7@2x.png" alt>
</div>
</div>
<div>
<p>Integer ex nunc, placerat vel orci quis, blandit varius</p>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="slider-item">
<div class="portfolio-item ih-item circle effect13 from_left_and_right font-alt alt-2">
<a href="images/portfolio/img-1@2x.jpg" class="lightbox mfp-image">
<div class="portfolio-media">
<div class="portfolio-img">
<img src="images/portfolio/img-1.jpg" data-at2x="images/portfolio/img-1@2x.jpg" alt>
</div>
<div class="info">
<h3>Mauris eleifend</h3>
<div>
<div class="img-line">
<img src="images/lines/img-line-7.png" data-at2x="images/lines/img-line-7@2x.png" alt>
</div>
</div>
<div>
<p>Integer ex nunc, placerat vel orci quis, blandit varius</p>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="slider-item">
<div class="portfolio-item ih-item circle effect13 from_left_and_right font-alt alt-2">
<a href="images/portfolio/img-2@2x.jpg" class="lightbox mfp-image">
<div class="portfolio-media">
<div class="portfolio-img">
<img src="images/portfolio/img-2.jpg" data-at2x="images/portfolio/img-2@2x.jpg" alt>
</div>
<div class="info">
<h3>Mauris eleifend</h3>
<div>
<div class="img-line">
<img src="images/lines/img-line-7.png" data-at2x="images/lines/img-line-7@2x.png" alt>
</div>
</div>
<div>
<p>Integer ex nunc, placerat vel orci quis, blandit varius</p>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="slider-item">
<div class="portfolio-item ih-item circle effect13 from_left_and_right font-alt alt-2">
<a href="images/portfolio/img-3@2x.jpg" class="lightbox mfp-image">
<div class="portfolio-media">
<div class="portfolio-img">
<img src="images/portfolio/img-3.jpg" data-at2x="images/portfolio/img-3@2x.jpg" alt>
</div>
<div class="info">
<h3>Mauris eleifend</h3>
<div>
<div class="img-line">
<img src="images/lines/img-line-7.png" data-at2x="images/lines/img-line-7@2x.png" alt>
</div>
</div>
<div>
<p>Integer ex nunc, placerat vel orci quis, blandit varius</p>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<!-- /portfolio slider carousel -->
</div>
<hr class="mt-120 mb-40 alt-3" />
<h3 class="section-title font-alt">Posts Slider</h3>
<!-- blog item -->
<div class="blog-item">
<div class="slider-2 nav-alt mb-20">
<div class="blog-media">
<a href="images/blog/fullwidth/img-2.jpg" class="lightbox-single mfp-image">
<img src="images/blog/fullwidth/img-2.jpg" data-at2x="images/blog/fullwidth/img-2@2x.jpg" alt>
</a>
</div>
<div class="blog-media">
<a href="images/blog/fullwidth/img-3.jpg" class="lightbox-single mfp-image">
<img src="images/blog/fullwidth/img-3.jpg" data-at2x="images/blog/fullwidth/img-3@2x.jpg" alt>
</a>
</div>
<div class="blog-media">
<a href="images/blog/fullwidth/img-1.jpg" class="lightbox-single mfp-image">
<img src="images/blog/fullwidth/img-1.jpg" data-at2x="images/blog/fullwidth/img-1@2x.jpg" alt>
</a>
</div>
</div>
</div>
<!-- /blog item -->
<hr class="mt-60 mb-40 alt-3" />
<h3 class="section-title font-alt">Video Player</h3>
<!-- blog media video -->
<div class="blog-media video">
<iframe width="1118" height="515" src="https://www.youtube.com/embed/WjoDEQqyTig" allowfullscreen></iframe>
</div>
<!-- /blog media video -->
<hr class="mt-60 mb-40 alt-3" />
<h3 class="section-title font-alt">Banners</h3>
<!-- banners -->
<div class="row">
<!-- gift items -->
<div class="col-lg-3 col-md-6 mb-lg-30">
<div class="gift-item alt-1 font-alt">
<div class="gift-wrapper">
<div class="gift-media">
<a href="shop-product-list.html">
<img src="images/gifts/img-1.jpg" data-at2x="images/gifts/img-1@2x.jpg" alt>
</a>
<div class="gift-inside">
<div class="gift-title">
<div class="img-line">
<img src="images/lines/img-line-26.png" data-at2x="images/lines/img-line-26@2x.png" alt>
</div>
<span>Day Spa</span>
<div class="img-line">
<img src="images/lines/img-line-26.png" data-at2x="images/lines/img-line-26@2x.png" alt>
</div>
<a href="shop-product-list.html"><h3>Detox Day</h3></a>
</div>
<div class="gift-price">
$60
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-lg-30">
<div class="gift-item alt-1 font-alt">
<div class="gift-wrapper">
<div class="gift-media">
<a href="shop-product-list.html">
<img src="images/gifts/img-2.jpg" data-at2x="images/gifts/img-2@2x.jpg" alt>
</a>
<div class="gift-inside">
<div class="gift-title">
<div class="img-line">
<img src="images/lines/img-line-26.png" data-at2x="images/lines/img-line-26@2x.png" alt>
</div>
<span>One Day</span>
<div class="img-line">
<img src="images/lines/img-line-26.png" data-at2x="images/lines/img-line-26@2x.png" alt>
</div>
<a href="shop-product-list.html"><h3>Spa Break</h3></a>
</div>
<div class="gift-price">
$55
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-lg-30">
<div class="gift-item hover-alt alt-1 font-alt">
<div class="gift-wrapper">
<div class="gift-media">
<a href="shop-product-list.html">
<img src="images/gifts/img-3.jpg" data-at2x="images/gifts/img-3@2x.jpg" alt>
</a>
<div class="gift-inside">
<div class="gift-title">
<div class="img-line">
<img src="images/lines/img-line-26.png" data-at2x="images/lines/img-line-26@2x.png" alt>
</div>
<span>Special</span>
<div class="img-line">
<img src="images/lines/img-line-26.png" data-at2x="images/lines/img-line-26@2x.png" alt>
</div>
<a href="shop-product-list.html"><h3>Winter Spa</h3></a>
</div>
<div class="gift-price">
$45
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-lg-30">
<div class="gift-item hover-alt alt-1 font-alt">
<div class="gift-wrapper">
<div class="gift-media">
<a href="shop-product-list.html">
<img src="images/gifts/img-4.jpg" data-at2x="images/gifts/img-4@2x.jpg" alt>
</a>
<div class="gift-inside">
<div class="gift-title">
<div class="img-line">
<img src="images/lines/img-line-26.png" data-at2x="images/lines/img-line-26@2x.png" alt>
</div>
<span>2 Night</span>
<div class="img-line">
<img src="images/lines/img-line-26.png" data-at2x="images/lines/img-line-26@2x.png" alt>
</div>
<a href="shop-product-list.html"><h3>Spa Stay</h3></a>
</div>
<div class="gift-price">
$75
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /gift items-->
</div>
<!-- /banners -->
<div class="row mt-40">
<!-- /gift items -->
<div class="col-lg-3 col-md-6 mb-lg-30">
<div class="gift-item hover-alt alt-3 font-alt">
<div class="gift-wrapper">
<a href="shop-product-list.html">
<div class="gift-media">
<img src="images/gifts/img-9.jpg" data-at2x="images/gifts/img-9@2x.jpg" alt>
<div class="gift-inside">
<div class="gift-inside-1">
<div class="gift-price">
-10%
</div>
<div class="gift-inside-title">
0n royal spa
</div>
<div class="img-line">
<img src="images/lines/img-line-26.png" data-at2x="images/lines/img-line-26@2x.png" alt>
</div>
<span>this week</span>
</div>
<div class="gift-inside-2">
Best Offer
</div>
<div class="gift-inside-2-white"></div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-lg-30">
<div class="gift-item hover-alt alt-3 font-alt">
<div class="gift-wrapper">
<a href="shop-product-list.html">
<div class="gift-media">
<img src="images/gifts/img-10.jpg" data-at2x="images/gifts/img-10@2x.jpg" alt>
<div class="gift-inside">
<div class="gift-inside-1">
<div class="gift-price">
SALE
</div>
<div class="gift-inside-title">
Up to 50% off
</div>
<div class="img-line">
<img src="images/lines/img-line-26.png" data-at2x="images/lines/img-line-26@2x.png" alt>
</div>
<span>taste it</span>
</div>
<div class="gift-inside-2">
Only today
</div>
<div class="gift-inside-2-white"></div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-lg-30">
<div class="gift-item hover-alt alt-3 font-alt">
<div class="gift-wrapper">
<a href="shop-product-list.html">
<div class="gift-media">
<img src="images/gifts/img-11.jpg" data-at2x="images/gifts/img-11@2x.jpg" alt>
<div class="gift-inside">
<div class="gift-inside-1">
<div class="gift-price">
-25%
</div>
<div class="gift-inside-title">
0n royal spa
</div>
<div class="img-line">
<img src="images/lines/img-line-26.png" data-at2x="images/lines/img-line-26@2x.png" alt>
</div>
<span>this week</span>
</div>
<div class="gift-inside-2">
Big Sale
</div>
<div class="gift-inside-2-white"></div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-lg-30">
<div class="gift-item hover-alt alt-3 font-alt">
<div class="gift-wrapper">
<a href="shop-product-list.html">
<div class="gift-media">
<img src="images/gifts/img-12.jpg" data-at2x="images/gifts/img-12@2x.jpg" alt>
<div class="gift-inside">
<div class="gift-inside-1">
<div class="gift-price">
-50%
</div>
<div class="gift-inside-title">
0n royal spa
</div>
<div class="img-line">
<img src="images/lines/img-line-26.png" data-at2x="images/lines/img-line-26@2x.png" alt>
</div>
<span>taste it</span>
</div>
<div class="gift-inside-2">
Only today
</div>
<div class="gift-inside-2-white"></div>
</div>
</div>
</a>
</div>
</div>
</div>
<!-- /gift items -->
</div>
<hr class="mt-60 mb-60 alt-3" />
<div class="row">
<div class="col-md-6 col-lg-3">
<!-- widget categories -->
<aside class="widget-categories">
<h3>Categories</h3>
<ul>
<li class="cat-item">
<a href="#">Massage<span> 25 </span></a>
</li>
<li class="cat-item">
<a href="#">Body care<span> 5 </span></a>
</li>
<li class="cat-item">
<a href="#">Facials<span> 12 </span></a>
</li>
<li class="cat-item">
<a href="#">Spa complexes<span> 10 </span></a>
</li>
<li class="cat-item">
<a href="#">Slim program<span> 7 </span></a>
</li>
<li class="cat-item">
<a href="#">Hand care<span> 32 </span></a>
</li>
<li class="cat-item">
<a href="#">Foot care<span> 15 </span></a>
</li>
<li class="cat-item">
<a href="#">Hair care<span> 19 </span></a>
</li>
</ul>
</aside>
<!-- /widget categories -->
<!-- widget search -->
<aside class="widget-search">
<h3>Search</h3>
<form method="get" class="form" action="#">
<label>
<input type="search" class="form-control" placeholder="Search..." value="" title="Search for:">
</label>
<button type="submit" class="search-submit"><i class="flaticon-search"></i></button>
</form>
</aside>
<!-- /widget search -->
<!-- widget tag -->
<aside class="widget-tag">
<h3>Tag Coloud</h3>
<div class="tag-cloud">
<a href="#" rel="tag">Acupressure</a> /
<a href="#" rel="tag">Aroma therapy</a> /
<a href="#" rel="tag">Body</a> /
<a href="#" rel="tag">Hydrotherapy</a> /
<a href="#" rel="tag">Hirudotherapy</a> /
<a href="#" rel="tag">Care</a> /
<a href="#" rel="tag">Homotoxicology</a> /
<a href="#" rel="tag">Massage</a> /
<a href="#" rel="tag">Spa</a> /
<a href="#" rel="tag">Naturopathy</a> /
<a href="#" rel="tag">Medicine</a> /
<a href="#" rel="tag">Herbal</a> /
<a href="#" rel="tag">Medicine</a> /
<a href="#" rel="tag">Fungotherapy</a> /
<a href="#" rel="tag">Hilerstvo</a> /
</div>
</aside>
<!-- /widget tag -->
<!-- widget navigation -->
<aside class="widget-navigation">
<h3>Sidebar Navigation</h3>
<ul class="mt-10">
<li class="active">
<a>Sample Page 1</a>
<ul>
<li>
<a>Page 1</a>
<ul>
<li>
<a href="#">Sample Page 1</a>
</li>
<li>
<a href="#">Sample Page 2</a>
</li>
<li>
<a href="#">Sample Page 3</a>
</li>
</ul>
</li>
<li>
<a href="#">Page 2</a>
</li>
<li>
<a href="#">Page 3</a>
</li>
</ul>
</li>
<li>
<a>Sample Page 2</a>
<ul class="active">
<li>
<a href="#">Page 1</a>
</li>
<li>
<a href="#">Page 2</a>
</li>
<li>
<a href="#">Page 3</a>
</li>
</ul>
</li>
<li>
<a>Sample Page 3</a>
<ul>
<li>
<a href="#">Page 1</a>
</li>
<li>
<a href="#">Page 2</a>
</li>
<li>
<a href="#">Page 3</a>
</li>
</ul>
</li>
<li>
<a>Sample Page 4</a>
<ul>
<li>
<a href="#">Page 1</a>
</li>
<li>
<a href="#">Page 2</a>
</li>
<li>
<a href="#">Page 3</a>
</li>
</ul>
</li>
<li>
<a>Sample Page 5</a>
<ul>
<li>
<a href="#">Page 1</a>
</li>
<li>
<a href="#">Page 2</a>
</li>
<li>
<a href="#">Page 3</a>
</li>
</ul>
</li>
</ul>
</aside>
<!-- /widget navigation -->
</div>
<div class="col-md-6 col-lg-3">
<!-- widget post -->
<aside class="widget-post">
<h3>Recent Posts</h3>
<div class="widget-slider-2 nav-alt-1">
<div class="slider-item">
<article class="clearfix">
<div class="author">
<img src="images/blog/authors/img-1.jpg" data-at2x="images/blog/authors/img-1@2x.jpg" alt>
</div>
<h4>Phasellus ullamcorper</h4>
<p>Tristique semper, magna nunc vestibulum purus</p>
</article>
<article class="clearfix">
<div class="author">
<img src="images/blog/authors/img-2.jpg" data-at2x="images/blog/authors/img-2@2x.jpg" alt>
</div>
<h4>Aenean quis velit quis</h4>
<p>Tristique semper, magna nunc vestibulum purus</p>
</article>
<article class="clearfix">
<div class="author">
<img src="images/blog/authors/img-3.jpg" data-at2x="images/blog/authors/img-3@2x.jpg" alt>
</div>
<h4>Praesent luctus diam</h4>
<p>Tristique semper, magna nunc vestibulum purus</p>
</article>
</div>
<div class="slider-item">
<article class="clearfix">
<div class="author">
<img src="images/blog/authors/img-1.jpg" data-at2x="images/blog/authors/img-1@2x.jpg" alt>
</div>
<h4>Phasellus ullamcorper</h4>
<p>Tristique semper, magna nunc vestibulum purus</p>
</article>
<article class="clearfix">
<div class="author">
<img src="images/blog/authors/img-2.jpg" data-at2x="images/blog/authors/img-2@2x.jpg" alt>
</div>
<h4>Aenean quis velit quis</h4>
<p>Tristique semper, magna nunc vestibulum purus</p>
</article>
<article class="clearfix">
<div class="author">
<img src="images/blog/authors/img-3.jpg" data-at2x="images/blog/authors/img-3@2x.jpg" alt>
</div>
<h4>Praesent luctus diam</h4>
<p>Tristique semper, magna nunc vestibulum purus</p>
</article>
</div>
</div>
</aside>
<!-- /widget post -->
<!-- widget text -->
<aside class="widget-text">
<h3>Text Relish</h3>
<p>Proin vehicula elit eu metus posuere, eget iaculis mauris aliquam. Nullam ut libero eu nisl efficitur rhoncus.</p>
<p>Donec blandit viverra lacus, id vehicula lacus viverra ac. Nulla vehicula scelerisque, unc posuere consequat tortor eget elementum.</p>
</aside>
<!-- /widget text -->
<!-- widget video -->
<aside class="widget-video">
<h3>Video</h3>
<div class="widget-media-post">
<iframe width="245" height="175" src="https://www.youtube.com/embed/WjoDEQqyTig" allowfullscreen></iframe>
</div>
</aside>
<!-- /widget video -->
<!-- widget calendar -->
<aside class="widget-calendar">
<h3>Calendar</h3>
<div id="calendar" class="mt-10"></div>
</aside>
<!-- /widget calendar -->
</div>
<div class="col-md-6 col-lg-3">
<!-- widget comments -->
<aside class="widget-comments">
<h3>Recent Comments</h3>
<div class="widget-slider-2 nav-alt-1">
<div class="slider-item">
<div class="comment">
<p>Tristique semper, magna nunc vestibulum purus efficitur tincidunt nisi</p>
<div class="comments-bottom">
<i class="fa fa-comment-o"></i>
by Victoria | 07 May 2016 @ 1:25 pm
</div>
</div>
<div class="comment">
<p>Tristique semper, magna nunc vestibulum purus efficitur tincidunt nisi</p>
<div class="comments-bottom">
<i class="fa fa-comment-o"></i>
by Victoria | 07 May 2016 @ 1:25 pm
</div>
</div>
<div class="comment">
<p>Tristique semper, magna nunc vestibulum purus efficitur tincidunt nisi</p>
<div class="comments-bottom">
<i class="fa fa-comment-o"></i>
by Victoria | 07 May 2016 @ 1:25 pm
</div>
</div>
</div>
<div class="slider-item">
<div class="comment">
<p>Tristique semper, magna nunc vestibulum purus efficitur tincidunt nisi</p>
<div class="comments-bottom">
<i class="fa fa-comment-o"></i>
by Victoria | 07 May 2016 @ 1:25 pm
</div>
</div>
<div class="comment">
<p>Tristique semper, magna nunc vestibulum purus efficitur tincidunt nisi</p>
<div class="comments-bottom">
<i class="fa fa-comment-o"></i>
by Victoria | 07 May 2016 @ 1:25 pm
</div>
</div>
<div class="comment">
<p>Tristique semper, magna nunc vestibulum purus efficitur tincidunt nisi</p>
<div class="comments-bottom">
<i class="fa fa-comment-o"></i>
by Victoria | 07 May 2016 @ 1:25 pm
</div>
</div>
</div>
</div>
</aside>
<!-- /widget comments -->
<!-- widget gallery -->
<aside class="widget-gallery">
<h3>Flickr</h3>
<div class="widget-slider-1 nav-alt-1">
<div class="slider-item">
<a href="#">
<img src="images/blog/widget-gallery/img-1.jpg" data-at2x="images/blog/widget-gallery/img-1@2x.jpg" alt>
</a>
<a href="#">
<img src="images/blog/widget-gallery/img-2.jpg" data-at2x="images/blog/widget-gallery/img-2@2x.jpg" alt>
</a>
</div>
<div class="slider-item">
<a href="#">
<img src="images/blog/widget-gallery/img-3.jpg" data-at2x="images/blog/widget-gallery/img-3@2x.jpg" alt>
</a>
<a href="#">
<img src="images/blog/widget-gallery/img-4.jpg" data-at2x="images/blog/widget-gallery/img-4@2x.jpg" alt>
</a>
</div>
<div class="slider-item">
<a href="#">
<img src="images/blog/widget-gallery/img-5.jpg" data-at2x="images/blog/widget-gallery/img-5@2x.jpg" alt>
</a>
<a href="#">
<img src="images/blog/widget-gallery/img-6.jpg" data-at2x="images/blog/widget-gallery/img-6@2x.jpg" alt>
</a>
</div>
<div class="slider-item">
<a href="#">
<img src="images/blog/widget-gallery/img-1.jpg" data-at2x="images/blog/widget-gallery/img-1@2x.jpg" alt>
</a>
<a href="#">
<img src="images/blog/widget-gallery/img-2.jpg" data-at2x="images/blog/widget-gallery/img-2@2x.jpg" alt>
</a>
</div>
<div class="slider-item">
<a href="#">
<img src="images/blog/widget-gallery/img-3.jpg" data-at2x="images/blog/widget-gallery/img-3@2x.jpg" alt>
</a>
<a href="#">
<img src="images/blog/widget-gallery/img-4.jpg" data-at2x="images/blog/widget-gallery/img-4@2x.jpg" alt>
</a>
</div>
</div>
</aside>
<!-- /widget gallery -->
<!-- widget meta -->
<aside class="widget-meta">
<h3>Meta</h3>
<ul>
<li class="cat-item">
<a href="#">Log in</a>
</li>
<li class="cat-item">
<a href="#">Entries RSS</a>
</li>
<li class="cat-item">
<a href="#">Comments RSS</a>
</li>
<li class="cat-item">
<a href="#">WordPress.org</a>
</li>
</ul>
</aside>
<!-- /widget meta -->
<!-- widget form -->
<aside class="widget-form">
<h3>Contact Form</h3>
<form action="php/contacts-process.php" id="feedback-form" class="form mt-10" method="post">
<input type="text" class="input-sm mb-20" value="" placeholder="Your Name*">
<input type="email" class="input-sm mb-20" value="" placeholder="Your E-Mail*">
<textarea id="message" name="message" cols="45" rows="8" aria-required="true" placeholder="Your Message*" class="input-sm mb-20"></textarea>
<button class="button small" name="submit" type="submit">Submit</button>
</form>
</aside>
<!-- /widget form -->
<!-- widget form -->
<aside class="widget-form alt">
<h4 class="font-alt">Subscribe to our newsletter</h4>
<form class="form">
<input type="email" class="input-sm mb-20" value="" placeholder="Your E-Mail*">
<button class="button small button-newsletter" name="submit" type="submit">Ok</button>
</form>
</aside>
<!-- /widget form -->
</div>
<div class="col-md-6 col-lg-3">
<!-- widget archives -->
<aside class="widget-archives">
<h3>Archives</h3>
<ul>
<li class="cat-item">
<a href="#">June 2016</a>
</li>
<li class="cat-item">
<a href="#">March 2016</a>
</li>
<li class="cat-item">
<a href="#">November 2016</a>
</li>
<li class="cat-item">
<a href="#">September 2016</a>
</li>
<li class="cat-item">
<a href="#">July 2016</a>
</li>
<li class="cat-item">
<a href="#">May 2016</a>
</li>
<li class="cat-item">
<a href="#">April 2016</a>
</li>
<li class="cat-item">
<a href="#">Recent</a>
</li>
</ul>
</aside>
<!-- /widget archives -->
<!-- widget twitter -->
<aside class="widget-twitter">
<h3>Twitter Feed</h3>
<div class="twitter-carousel twitter"></div>
</aside>
<aside class="widget-audio">
<h3>Audio</h3>
<div class="blog-audio">
<audio controls="">
<source src="audio/audio.mp3" type="audio/mpeg">
</audio>
</div>
</aside>
<!-- /widget twitter -->
<!-- widget big gallery -->
<aside class="widget-big-gallery">
<h3>Mini Gallery</h3>
<div class="widget-slider-2 nav-alt-1 mt-10">
<div class="slider-item">
<a href="#">
<img src="images/portfolio/img-8.jpg" data-at2x="images/portfolio/img-8@2x.jpg" alt>
</a>
</div>
<div class="slider-item">
<a href="#">
<img src="images/portfolio/img-10.jpg" data-at2x="images/portfolio/img-10@2x.jpg" alt>
</a>
</div>
<div class="slider-item">
<a href="#">
<img src="images/portfolio/img-2.jpg" data-at2x="images/portfolio/img-2@2x.jpg" alt>
</a>
</div>
</div>
</aside>
<!-- widget big gallery -->
</div>
</div>
</div>
</section>
<!-- /page setion -->
<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-1.png" data-at2x="images/lines/img-line-1@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-1.png" data-at2x="images/lines/img-line-1@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-1.png" data-at2x="images/lines/img-line-1@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>