Hello everyone, if you’re in search of a responsive and user-friendly ecommerce salon template in Angular 17+, then you’ve come to the right place! Today this blog post I will show you Angular 17 Best Beauty Salon and Spa Website Template 2024.
Key Features:
- Built on Angular 17 + Bootstrap 5
- CSS3 & HTML5
- Clean & minimal design
- Cross-browser tested & optimized
- Full-width layouts
- Gulp based workflow
- Opinionated code formatter Prettier for a consistent codebase
- Modular markup based on Cards & Utility classes
- Interactive and functional components and pages
- FontAwesome 5 + material icons + feather icon
- W3C validated HTML pages
Angular 17 came and Bootstrap 5 also. If you are new then you must check below two links:
Guys now here is the complete code snippet with GitHub link following assets(css, js, fonts and images):
1. Firstly friends we need fresh angular 17 setup and for this we need to run below commands but if you already have angular 17 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:
npm install -g @angular/cli ng new angularadmin //Create new Angular Project cd angularadmin // Go inside the Angular Project Folder
2. Guys now we need to run below commands to create components to our angular application:
ng g c home
3. Now guys we need to add below code into our scr/app/app.component.html file for main output:
<router-outlet></router-outlet>
4. Now guys we need to add below code into our scr/app/home/home.component.html file:
<div class="page-wraper">
<!-- HEADER START -->
<header class="site-header header-style-8 mobile-sider-drawer-menu">
<div class="top-bar site-bg-primary">
<div class="container">
<div class="wt-topbar-left">
<ul class="list-unstyled e-p-bx">
<li><i class="fa fa-envelope"></i>therichpost.com</li>
<li><i class="fa fa-phone"></i>(000) 000-0000</li>
</ul>
</div>
<div class="wt-topbar-right">
<ul class="social-bx list-inline">
<li><a href="javascript:void(0);" class="fa fa-facebook"></a></li>
<li><a href="javascript:void(0);" class="fa fa-twitter"></a></li>
<li><a href="javascript:void(0);" class="fa fa-linkedin"></a></li>
<li><a href="javascript:void(0);" class="fa fa-rss"></a></li>
<li><a href="javascript:void(0);" class="fa fa-youtube"></a></li>
<li><a href="javascript:void(0);" class="fa fa-instagram"></a></li>
</ul>
</div>
</div>
</div>
<!-- Search Link -->
<!-- Search Form -->
<div class="header-middle bg-white">
<div class="container">
<div class="logo-header">
<a href="#">
<img src="assets/images/logo-7.png" width="216" height="37" alt="" >
</a>
</div>
<div class="header-info">
<ul>
<li>
<div>
<div class="icon-sm">
<span class="icon-cell site-text-primary"><i class="flaticon-placeholder"></i></span>
</div>
<div class="icon-content">
<strong>Our Location </strong>
<span>Punjab, LDH</span>
</div>
</div>
</li>
<li>
<div>
<div class="icon-sm">
<span class="icon-cell site-text-primary"><i class="flaticon-smartphone"></i></span>
</div>
<div class="icon-content">
<strong>Phone Number</strong>
<span>000-0000-0000</span>
</div>
</div>
</li>
<li class="btn-col-last">
<a class="site-button text-uppercase radius-sm font-weight-700">Requet a Quote</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Search Form -->
<div class="sticky-header main-bar-wraper">
<div class="main-bar header-botton nav-bg-secondry">
<div class="container">
<!-- NAV Toggle Button -->
<button id="mobile-side-drawer" data-target=".header-nav" data-toggle="collapse" type="button" class="navbar-toggler collapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar icon-bar-first"></span>
<span class="icon-bar icon-bar-two"></span>
<span class="icon-bar icon-bar-three"></span>
</button>
<!-- MAIN Nav -->
<div class="header-nav navbar-collapse collapse ">
<ul class=" nav navbar-nav">
<li class="active">
<a href="javascript:;">Home<i class="fa fa-chevron-down"></i></a>
<ul class="sub-menu">
<li><a href="#">Home 1</a></li>
<li><a href="#">Home 2</a></li>
<li><a href="#l">Home 3</a></li>
<li><a href="#">Home 4</a></li>
<li><a href="#">Home 5</a></li>
</ul>
</li>
<li>
<a href="javascript:;">Pages<i class="fa fa-chevron-down"></i></a>
<ul class="sub-menu">
<li>
<a href="javascript:;">About us</a>
<ul class="sub-menu">
<li><a href="#">About us 1</a></li>
<li><a href="#">About us 2</a></li>
</ul>
</li>
<li>
<a href="javascript:;">FAQ</a>
<ul class="sub-menu">
<li><a href="#">FAQ 1</a></li>
<li><a href="#">FAQ 2</a></li>
</ul>
</li>
<li>
<a href="#">Career</a>
</li>
<li>
<a href="javascript:;">Portfolio</a>
<ul class="sub-menu">
<li><a href="#">Portfolio 1</a></li>
</ul>
</li>
<li>
<a href="javascript:;">Our Team</a>
<ul class="sub-menu">
<li><a href="#">Our Team 1</a></li>
<li><a href="#">Our Team Detail</a></li>
</ul>
</li>
<li>
<a href="javascript:;">Services</a>
<ul class="sub-menu">
<li><a href="#">Services 1</a></li>
</ul>
</li>
<li>
<a href="javascript:;">Galley</a>
<ul class="sub-menu">
<li><a href="#">Galley Grid 1</a></li>
</ul>
</li>
<li>
<a href="javascript:;">Error</a>
<ul class="sub-menu">
<li><a href="#">Error 403</a></li>
</ul>
</li>
<li>
<a href="javascript:;">Contact us</a>
<ul class="sub-menu">
<li><a href="#">Contact us 1</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="javascript:;">Features<i class="fa fa-chevron-down"></i></a>
<ul class="sub-menu">
<li>
<a href="javascript:;">Header</a>
<ul class="sub-menu">
<li><a href="#">Header 1</a></li>
</ul>
</li>
<li><a href="#">Footer Fixed</a></li>
</ul>
</li>
<li>
<a href="javascript:;">Product<i class="fa fa-chevron-down"></i></a>
<ul class="sub-menu">
<li><a href="#">Product</a></li>
<li><a href="#">Product Detail</a></li>
</ul>
</li>
<li class="submenu-direction">
<a href="javascript:;">Blog<i class="fa fa-chevron-down"></i></a>
<ul class="sub-menu">
<li>
<a href="javascript:;">Media</a>
<ul class="sub-menu">
<li><a href="#">Media list</a></li>
</ul>
</li>
<li>
<a href="javascript:;">list</a>
<ul class="sub-menu">
<li><a href="#">Half image</a></li>
</ul>
</li>
<li>
<a href="javascript:;">Grid</a>
<ul class="sub-menu">
<li><a href="#">Grid 2</a></li>
</ul>
</li>
<li>
<a href="javascript:;">Single</a>
<ul class="sub-menu">
<li><a href="#">Single full</a></li>
</ul>
</li>
</ul>
</li>
<li class="has-mega-menu ">
<a href="javascript:;">Elements<i class="fa fa-chevron-down"></i></a>
<ul class="mega-menu">
<li>
<ul>
<li><a href="#"><i class="fa fa-ravelry"></i> Animations</a></li>
</ul>
</li>
<li>
<ul>
<li><a href="#"> <i class="fa fa-calculator"></i>Counters</a></li>
</ul>
</li>
<li>
<ul>
<li><a href="#"> <i class="fa fa-photo"></i>Images effects</a></li>
</ul>
</li>
<li>
<ul>
<li><a href="#"> <i class="fa fa-th-list"></i>Tabs</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- ETRA Nav -->
<div class="extra-nav">
<a href="javascript:;" class="wt-cart cart-btn dropdown-toggle" title="Your Cart" id="ID-MSG_dropdown" data-bs-toggle="dropdown">
<span class="link-inner">
<span class="woo-cart-total"> </span>
<span class="woo-cart-count">
<span class="shopping-bag wcmenucart-count ">4</span>
</span>
</span>
</a>
<div class="dropdown-menu cart-dropdown-item-wraper">
<div class="nav-cart-content">
<div class="nav-cart-items p-a15">
<div class="nav-cart-item clearfix">
<div class="nav-cart-item-image">
<a href="#"><img src="assets/images/cart/pic-1.jpg" alt="p-1"></a>
</div>
<div class="nav-cart-item-desc">
<a href="#">Safety helmet</a>
<span class="nav-cart-item-price"><strong>2</strong> x $19.99</span>
<a href="#" class="nav-cart-item-quantity">x</a>
</div>
</div>
<div class="nav-cart-item clearfix">
<div class="nav-cart-item-image">
<a href="#"><img src="assets/images/cart/pic-2.jpg" alt="p-2"></a>
</div>
<div class="nav-cart-item-desc">
<a href="#">Hammer drill machine</a>
<span class="nav-cart-item-price"><strong>1</strong> x $24.99</span>
<a href="#" class="nav-cart-item-quantity">x</a>
</div>
</div>
<div class="nav-cart-item clearfix">
<div class="nav-cart-item-image">
<a href="#"><img src="assets/images/cart/pic-3.jpg" alt="p-1"></a>
</div>
<div class="nav-cart-item-desc">
<a href="#">Safety helmet</a>
<span class="nav-cart-item-price"><strong>2</strong> x $19.99</span>
<a href="#" class="nav-cart-item-quantity">x</a>
</div>
</div>
<div class="nav-cart-item clearfix">
<div class="nav-cart-item-image">
<a href="#"><img src="assets/images/cart/pic-4.jpg" alt="p-2"></a>
</div>
<div class="nav-cart-item-desc">
<a href="#">Hammer drill machine</a>
<span class="nav-cart-item-price"><strong>1</strong> x $24.99</span>
<a href="#" class="nav-cart-item-quantity">x</a>
</div>
</div>
</div>
<div class="nav-cart-title p-tb10 p-lr15 clearfix">
<h4 class="pull-left m-a0">Subtotal:</h4>
<h5 class="pull-right m-a0">$114.95</h5>
</div>
<div class="nav-cart-action p-a15 clearfix">
<button class="site-button btn-block m-b15 " type="button">View Cart</button>
<button class="site-button btn-block" type="button">Checkout </button>
</div>
</div>
</div>
</div>
<!-- SITE Search -->
<div id="search">
<span class="close"></span>
<form role="search" id="searchform" action="/search" method="get" class="radius-xl">
<div class="input-group">
<input value="" name="q" type="search" placeholder="Type to search">
<span class="input-group-btn"><button type="button" class="search-btn"><i class="fa fa-search"></i></button></span>
</div>
</form>
</div>
</div>
</div>
</div>
</header>
<!-- HEADER END -->
<!-- CONTENT START -->
<div class="page-content">
<!-- SLIDER START -->
<div id="rev_slider_1050_1_wrapper" class="rev_slider_wrapper fullscreen-container" data-alias="webproduct-light" data-source="gallery" style="background-color:transparent;padding:0px;">
<!-- START REVOLUTION SLIDER 5.4.1 fullscreen mode -->
<div id="rev_slider_1050_1" class="slider-dots rev_slider fullscreenbanner" style="display:none;" data-version="5.4.1">
<ul>
<!-- SLIDE -->
<li data-index="rs-2938" data-transition="slideleft" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="default" data-thumb="assets/images/main-slider/slider2/slide1.jpg" data-rotate="0" data-fsslotamount="7" data-saveperformance="off" data-title="" data-param1="Additional Text" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
<!-- MAIN IMAGE -->
<img src="assets/images/main-slider/slider2/slide1.jpg" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption WebProduct-Title tp-resizeme"
id="slide-2938-layer-01"
data-x="['left','left','left','left']" data-hoffset="['60','60','20','20']"
data-y="['middle','middle','top','top']" data-voffset="['-80','-80','200','130']"
data-fontsize="['57','55','55','30']"
data-lineheight="['65','65','65','65']"
data-width="['700','700','700','300']"
data-height="none"
data-whitespace="nowrap"
data-type="text"
data-responsive_offset="on"
data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":1000,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 11;
white-space: nowrap;
text-transform:uppercase;">
<div class="text-secondry"> Best Place <span class="site-text-primary"> For you</span></div>
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption WebProduct-SubTitle tp-resizeme"
id="slide-2938-layer-02"
data-x="['left','left','left','left']" data-hoffset="['60','60','20','20']"
data-y="['middle','middle','top','top']" data-voffset="['0','0','280','180']"
data-fontsize="['55','55','55','30']"
data-lineheight="['75','75','75','75']"
data-width="['700','700','700','300']"
data-height="none"
data-whitespace="nowrap"
data-type="text"
data-responsive_offset="on"
data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":1250,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 12;
white-space: nowrap;
text-transform:uppercase;
font-weight: 700;
">
<div class="text-secondry">
<span class="site-text-primary">Harbal</span> Treatment
</div>
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption WebProduct-Content tp-resizeme"
id="slide-2938-layer-03"
data-x="['left','left','left','left']" data-hoffset="['60','60','20','20']"
data-y="['middle','middle','top','top']" data-voffset="['80','80','380','250']"
data-fontsize="['21','21','24','18']"
data-lineheight="['28','28','32','26']"
data-width="['700','700','700','300']"
data-height="['none','none','76','68']"
data-whitespace="normal"
data-type="text"
data-responsive_offset="on"
data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":1500,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 13; white-space: normal;">
<div class="text-secondry"> Welcome to beauty lab, where you can relax and enjoy life. A little peace in a crazy world goes a long way.</div>
</div>
<!-- LAYER NR. 4 -->
<div class="tp-caption tp-resizeme"
id="slide-2938-layer-04"
data-x="['left','left','left','left']" data-hoffset="['60','60','20','20']"
data-y="['middle','middle','top','top']" data-voffset="['180','180','480','400']"
data-width="none"
data-height="none"
data-whitespace="nowrap"
data-type="button"
data-actions='[{"event":"click","action":"jumptoslide","slide":"rs-2939","delay":""}]'
data-responsive_offset="on"
data-responsive="on"
data-frames='[
{"from":"y:100px(R);opacity:0;","speed":2000,"to":"o:1;","delay":2000,"ease":"Power4.easeOut"},
{"delay":"wait","speed":1000,"to":"y:-50px;opacity:0;","ease":"Power2.easeInOut"}
]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[40,40,40,40]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index:13; text-transform:uppercase; font-weight:700;">
<a href="#" class="site-button radius-sm button-lg">See all Services</a>
</div>
<!-- LAYER NR. 5 -->
<div class="tp-caption tp-resizeme"
id="slide-2938-layer-05"
data-x="['left','left','left','left']" data-hoffset="['240','240','200','200']"
data-y="['middle','middle','top','top']" data-voffset="['180','180','480','400']"
data-width="none"
data-height="none"
data-whitespace="nowrap"
data-type="button"
data-actions='[{"event":"click","action":"jumptoslide","slide":"rs-2939","delay":""}]'
data-responsive_offset="on"
data-responsive="on"
data-frames='[
{"from":"y:100px(R);opacity:0;","speed":2000,"to":"o:1;","delay":2000,"ease":"Power4.easeOut"},
{"delay":"wait","speed":1000,"to":"y:-50px;opacity:0;","ease":"Power2.easeInOut"}
]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[40,40,40,40]"
style="z-index:13; text-transform:uppercase; font-weight:700;">
<a href="#" class="site-button-secondry radius-sm button-lg">More detail</a>
</div>
</li>
<!-- SLIDE -->
<li data-index="rs-2940" data-transition="slideleft" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="default" data-thumb="assets/images/main-slider/slider2/slide3.jpg" data-rotate="0" data-fsslotamount="7" data-saveperformance="off" data-title="" data-param1="Additional Text" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
<!-- MAIN IMAGE -->
<img src="assets/images/main-slider/slider2/slide3.jpg" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption WebProduct-Title tp-resizeme"
id="slide-2940-layer-01"
data-x="['left','left','left','left']" data-hoffset="['60','60','20','20']"
data-y="['middle','middle','top','top']" data-voffset="['-80','-80','200','130']"
data-fontsize="['57','55','55','30']"
data-lineheight="['65','65','65','65']"
data-width="['700','700','700','300']"
data-height="none"
data-whitespace="nowrap"
data-type="text"
data-responsive_offset="on"
data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":1000,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 11;
white-space: nowrap;
text-transform:uppercase;">
<div class="text-secondry"> Beauty <span class="site-text-primary"> Means</span></div>
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption WebProduct-SubTitle tp-resizeme"
id="slide-2940-layer-02"
data-x="['left','left','left','left']" data-hoffset="['60','60','20','20']"
data-y="['middle','middle','top','top']" data-voffset="['0','0','280','180']"
data-fontsize="['55','55','55','30']"
data-lineheight="['75','75','75','75']"
data-width="['700','700','700','300']"
data-height="none"
data-whitespace="nowrap"
data-type="text"
data-responsive_offset="on"
data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":1250,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 12;
white-space: nowrap;
text-transform:uppercase;
font-weight: 700;
">
<div class="text-secondry">
<span class="site-text-primary">Healthy</span> You
</div>
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption WebProduct-Content tp-resizeme"
id="slide-2940-layer-03"
data-x="['left','left','left','left']" data-hoffset="['60','60','20','20']"
data-y="['middle','middle','top','top']" data-voffset="['80','80','380','250']"
data-fontsize="['21','21','24','18']"
data-lineheight="['28','28','32','26']"
data-width="['700','700','700','300']"
data-height="['none','none','76','68']"
data-whitespace="normal"
data-type="text"
data-responsive_offset="on"
data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":1500,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 13; white-space: normal;">
<div class="text-secondry"> Welcome to beauty lab, where you can relax and enjoy life. A little peace in a crazy world goes a long way.</div>
</div>
<!-- LAYER NR. 4 -->
<div class="tp-caption tp-resizeme"
id="slide-2940-layer-04"
data-x="['left','left','left','left']" data-hoffset="['60','60','20','20']"
data-y="['middle','middle','top','top']" data-voffset="['180','180','480','400']"
data-width="none"
data-height="none"
data-whitespace="nowrap"
data-type="button"
data-actions='[{"event":"click","action":"jumptoslide","slide":"rs-2939","delay":""}]'
data-responsive_offset="on"
data-responsive="on"
data-frames='[
{"from":"y:100px(R);opacity:0;","speed":2000,"to":"o:1;","delay":2000,"ease":"Power4.easeOut"},
{"delay":"wait","speed":1000,"to":"y:-50px;opacity:0;","ease":"Power2.easeInOut"}
]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[40,40,40,40]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index:13; text-transform:uppercase; font-weight:700;">
<a href="#" class="site-button radius-sm button-lg">See all Services</a>
</div>
<!-- LAYER NR. 5 -->
<div class="tp-caption tp-resizeme"
id="slide-2940-layer-05"
data-x="['left','left','left','left']" data-hoffset="['240','240','200','200']"
data-y="['middle','middle','top','top']" data-voffset="['180','180','480','400']"
data-width="none"
data-height="none"
data-whitespace="nowrap"
data-type="button"
data-actions='[{"event":"click","action":"jumptoslide","slide":"rs-2939","delay":""}]'
data-responsive_offset="on"
data-responsive="on"
data-frames='[
{"from":"y:100px(R);opacity:0;","speed":2000,"to":"o:1;","delay":2000,"ease":"Power4.easeOut"},
{"delay":"wait","speed":1000,"to":"y:-50px;opacity:0;","ease":"Power2.easeInOut"}
]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[40,40,40,40]"
style="z-index:13; text-transform:uppercase; font-weight:700;">
<a href="#" class="site-button-secondry radius-sm button-lg">More detail</a>
</div>
</li>
</ul>
</div>
</div>
<!-- SLIDER END -->
<!-- ABOUT SECTION START -->
<div class="section-full p-t100 p-b70 bg-bottom-center bg-full-width bg-no-repeat">
<div class="container ">
<div class="section-content about4-section">
<div class="row">
<div class="col-md-5 col-sm-5 m-b30">
<div class="about4-section-pic ">
<div class="wt-media">
<img src="assets/images/slid-2.jpg" alt="">
</div>
</div>
</div>
<div class="col-md-7 col-sm-7 m-b30">
<div class="about4-content">
<h3 class="text-uppercase text-secondry">We Provide</h3>
<h2><span class="site-text-primary">Welcome to </span> Spa Center </h2>
<p><strong>Spread over two floors, our beautiful spa offer a soothing environment in which you can rest, relax and feel competely rejuvenated.</strong></p>
<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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy text of the printing and eentially unchanged. </p>
<div class="text-left p-b30">
<img src="assets/images/sign.png" alt="">
</div>
<div>
<a href="#" class="site-button radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
<a href="#" class="site-button-secondry radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">Services</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ABOUT COMPANY SECTION END -->
<!-- PRICING SECTION START -->
<div class="section-full bg-gray p-t100 p-b70">
<div class="container">
<!-- TITLE START-->
<div class="section-head text-center">
<h1><span class="site-text-primary">Our</span> Pricing</h1>
<div class="wt-separator-outer">
<div class="wt-separator style-icon">
<i class="fa fa-leaf text-black"></i>
<span class="separator-left site-bg-primary"></span>
<span class="separator-right site-bg-primary"></span>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit elit turpis, a porttitor tellus sollicitudin at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
<!-- TITLE END-->
<div class="section-content">
<div class="owl-carousel our-pricing-carousel owl-btn-vertical-center owl-btn-hover nav nav-tabs">
<!-- Block 1 -->
<div class="item active-arrow active">
<a data-bs-toggle="tab" href="#pricing-item1" class="tab-block">
<div class="our-pricing-tab radius-sm bdr-1 bdr-gray">
<div class="wt-icon-box-wraper center p-lr10">
<div class="icon-lg m-b5">
<span class="icon-cell text-black"><i class="flaticon-people"></i></span>
</div>
<div class="icon-content">
<span class="wt-tilte text-uppercase p-b10 inline-block font-weight-600">Spa</span>
</div>
</div>
</div>
</a>
</div>
<!-- Block 2 -->
<div class="item">
<a data-bs-toggle="tab" href="#pricing-item2" class="tab-block">
<div class="our-pricing-tab radius-sm bdr-1 bdr-gray">
<div class="wt-icon-box-wraper center p-lr10">
<div class="icon-lg m-b5">
<span class="icon-cell text-black"><i class="flaticon-eye"></i></span>
</div>
<div class="icon-content">
<span class="wt-tilte text-uppercase p-b10 inline-block font-weight-600">Hair Makeup</span>
</div>
</div>
</div>
</a>
</div>
<!-- Block 3 -->
<div class="item">
<a data-bs-toggle="tab" href="#pricing-item3" class="tab-block">
<div class="our-pricing-tab radius-sm bdr-1 bdr-gray">
<div class="wt-icon-box-wraper center p-lr10">
<div class="icon-lg m-b5">
<span class="icon-cell text-black"><i class="flaticon-female-hairs"></i></span>
</div>
<div class="icon-content">
<span class="wt-tilte text-uppercase p-b10 inline-block font-weight-600">Waxing</span>
</div>
</div>
</div>
</a>
</div>
<!-- Block 4 -->
<div class="item">
<a data-bs-toggle="tab" href="#pricing-item4" class="tab-block">
<div class="our-pricing-tab radius-sm bdr-1 bdr-gray">
<div class="wt-icon-box-wraper center p-lr10">
<div class="icon-lg m-b5">
<span class="icon-cell text-black"><i class="flaticon-mirror"></i></span>
</div>
<div class="icon-content">
<span class="wt-tilte text-uppercase p-b10 inline-block font-weight-600">Facial</span>
</div>
</div>
</div>
</a>
</div>
<!-- Block 5 -->
<div class="item">
<a data-bs-toggle="tab" href="#pricing-item5" class="tab-block">
<div class="our-pricing-tab radius-sm bdr-1 bdr-gray">
<div class="wt-icon-box-wraper center p-lr10">
<div class="icon-lg m-b5">
<span class="icon-cell text-black"><i class="flaticon-spray-bottle"></i></span>
</div>
<div class="icon-content">
<span class="wt-tilte text-uppercase p-b10 inline-block font-weight-600">Massage</span>
</div>
</div>
</div>
</a>
</div>
<!-- Block 6 -->
<div class="item">
<a data-bs-toggle="tab" href="#pricing-item6" class="tab-block">
<div class="our-pricing-tab radius-sm bdr-1 bdr-gray">
<div class="wt-icon-box-wraper center p-lr10">
<div class="icon-lg m-b5">
<span class="icon-cell text-black"><i class="flaticon-people"></i></span>
</div>
<div class="icon-content">
<span class="wt-tilte text-uppercase p-b10 inline-block font-weight-600">Spa</span>
</div>
</div>
</div>
</a>
</div>
<!-- Block 7 -->
<div class="item">
<a data-bs-toggle="tab" href="#pricing-item7" class="tab-block">
<div class="our-pricing-tab radius-sm bdr-1 bdr-gray">
<div class="wt-icon-box-wraper center p-lr10">
<div class="icon-lg m-b5">
<span class="icon-cell text-black"><i class="flaticon-eye"></i></span>
</div>
<div class="icon-content">
<span class="wt-tilte text-uppercase p-b10 inline-block font-weight-600">Hair Makeup</span>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="tab-content m-b30">
<!-- Block 1 -->
<div id="pricing-item1" class="pricing-tab-content-block tab-pane active-arrow">
<div class="section-content p-t50">
<!-- TABS DEFAULT NAV LEFT -->
<div class="wt-tabs vertical bg-tabs">
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#pricing-tab1-1">Massage Therapy</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab1-2">Facials </a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab1-3">Pedicures</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab1-4">Manicures</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab1-5">Body Wraps</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab1-6">Waxing & Cosmetics</a></li>
</ul>
<div class="tab-content p-l50">
<div id="pricing-tab1-1" class="tab-pane active">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s1.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Massage Therapy </h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab1-2" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s2.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Facials </h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab1-3" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s3.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Pedicures </h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab1-4" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s4.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Manicures</h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab1-5" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s5.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Body Wraps</h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab1-6" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s6.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Waxing & Cosmetics</h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Block 2 -->
<div id="pricing-item2" class="pricing-tab-content-block tab-pane">
<div class="section-content p-t50">
<!-- TABS DEFAULT NAV LEFT -->
<div class="wt-tabs vertical bg-tabs">
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#pricing-tab2-1">Hair Color</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab2-2">Braids & Twist</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab2-3">Corrective Color</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab2-4">Hair Extension</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab2-5">Hair Cut</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab2-6">Partial Foil</a></li>
</ul>
<div class="tab-content p-l50">
<div id="pricing-tab2-1" class="tab-pane active">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s2.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Hair Color </h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab2-2" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s3.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Braids & Twist </h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab2-3" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s4.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Corrective Color</h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab2-4" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s5.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Hair Extension</h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab2-5" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s6.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Hair Cut</h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab2-6" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s1.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Partial Foil</h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Block 3 -->
<div id="pricing-item3" class="pricing-tab-content-block tab-pane">
<div class="section-content p-t50">
<!-- TABS DEFAULT NAV LEFT -->
<div class="wt-tabs vertical bg-tabs">
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#pricing-tab3-1">Eye Brows </a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab3-2">Lips </a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab3-3">Eye Brow & Lips</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab3-4">Chin & Lips </a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab3-5">Side of Face</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab3-6">Lower Leg</a></li>
</ul>
<div class="tab-content p-l50">
<div id="pricing-tab3-1" class="tab-pane active">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s3.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Eye Brows </h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab3-2" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s4.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Lips </h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab3-3" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s5.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Eye Brow & Lips </h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab3-4" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s6.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Chin & Lips </h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab3-5" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s1.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Side of Face</h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab3-6" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s2.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Lower Leg</h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Block 4 -->
<div id="pricing-item4" class="pricing-tab-content-block tab-pane">
<div class="section-content p-t50">
<!-- TABS DEFAULT NAV LEFT -->
<div class="wt-tabs vertical bg-tabs">
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#pricing-tab4-1">Hand-On Facial </a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab4-2">Electrotherapy </a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab4-3">Clean up</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab4-4">Anti Ageing </a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab4-5">Glow & Radiance</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab4-6">Normal Wash</a></li>
</ul>
<div class="tab-content p-l50">
<div id="pricing-tab4-1" class="tab-pane active">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s4.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Hand-On Facial</h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab4-2" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s5.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Electrotherapy </h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab4-3" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s6.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Clean up</h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab4-4" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s1.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Anti Ageing </h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab4-5" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s2.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Glow & Radiance</h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab4-6" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s3.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Normal Wash</h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Block 5 -->
<div id="pricing-item5" class="pricing-tab-content-block tab-pane">
<div class="section-content p-t50">
<!-- TABS DEFAULT NAV LEFT -->
<div class="wt-tabs vertical bg-tabs">
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#pricing-tab5-1">Head</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab5-2">Back</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab5-3">Foot</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab5-4">Aromatherapy</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab5-5">Scrub</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab5-6">Tissue</a></li>
</ul>
<div class="tab-content p-l50">
<div id="pricing-tab5-1" class="tab-pane active">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s5.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Head</h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab5-2" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s6.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Back </h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab5-3" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s1.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Foot</h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab5-4" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s2.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Aromatherapy</h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab5-5" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s3.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Scrub</h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab5-6" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s4.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Tissue</h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Block 6 -->
<div id="pricing-item6" class="pricing-tab-content-block tab-pane ">
<div class="section-content p-t50">
<!-- TABS DEFAULT NAV LEFT -->
<div class="wt-tabs vertical bg-tabs">
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#pricing-tab6-1">Massage Therapy</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab6-2">Facials </a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab6-3">Pedicures</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab6-4">Manicures</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab6-5">Body Wraps</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab6-6">Waxing & Cosmetics</a></li>
</ul>
<div class="tab-content p-l50">
<div id="pricing-tab6-1" class="tab-pane active">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s6.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Massage Therapy </h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab6-2" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s1.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Facials</h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab6-3" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s2.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Pedicures</h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab6-4" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s4.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Manicures</h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab6-5" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s4.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Body Wraps</h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab6-6" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s5.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Waxing & Cosmetics</h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Block 7 -->
<div id="pricing-item7" class="pricing-tab-content-block tab-pane">
<div class="section-content p-t50">
<!-- TABS DEFAULT NAV LEFT -->
<div class="wt-tabs vertical bg-tabs">
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#pricing-tab7-1">Hair Color</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab7-2">Braids & Twist</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab7-3">Corrective Color</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab7-4">Hair Extension</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab7-5">Hair Cut</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pricing-tab7-6">Partial Foil</a></li>
</ul>
<div class="tab-content p-l50">
<div id="pricing-tab7-1" class="tab-pane active">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s1.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Hair Color</h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab7-2" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s2.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Braids & Twist</h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab7-3" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s3.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Corrective Color</h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab7-4" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s4.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Hair Extension</h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab7-5" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s5.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Hair Cut</h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="pricing-tab7-6" class="tab-pane">
<div class="pricing-tab-inner">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="wt-media">
<img src="assets/images/our-services/large/s6.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="wt-tilte">
<h3 class="font-26 font-weight-400">Partial Foil</h3>
<h4 class="site-text-primary">$40 - $80</h4>
<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,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
remaining essentially unchanged. It was popularised in the with theLorem Ipsum is simply dummy
text of the printing and eentially unchanged.
</p>
<a href="#" class="site-button skew-icon-btn radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">More</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- PRICING SECTION END -->
<!-- WELCOME SECTION START -->
<div class="section-full p-t100 p-b70 bg-bottom-center bg-full-width bg-no-repeat" style="background-image:url(assets/images/background/bg-1.png);">
<div class="container ">
<div class="section-head text-center">
<h2><span class="site-text-primary">Good for </span> your health </h2>
<div class="wt-separator-outer ">
<div class="wt-separator style-icon">
<i class="fa fa-leaf text-black"></i>
<span class="separator-left site-bg-primary"></span>
<span class="separator-right site-bg-primary"></span>
</div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit elit turpis, a porttitor tellus sollicitudin at.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
</div>
<div class="section-content circle-block-outer" data-bs-toggle="tab-hover">
<div class="row nav nav-tab">
<div class="col-lg-4 col-md-12 m-b30">
<div class="nav-item">
<a class="nav-link active wt-icon-box-wraper right p-a10 m-b20" href="#tab1" data-bs-toggle="tab">
<div class="icon-md site-text-primary radius">
<span class="icon-cell site-text-primary"><img src="assets/images/icon/candle-1.png" alt=""></span>
</div>
<div class="icon-content">
<h4 class="wt-tilte text-uppercase">Naturally Spa</h4>
<p>A wonderful serenity has taken possession of my entire soul.</p>
</div>
</a>
</div>
<div class="nav-item">
<a class="nav-link wt-icon-box-wraper right p-a10 m-r30 m-b20" href="#tab2" data-bs-toggle="tab">
<div class="icon-md site-text-primary radius">
<span class="icon-cell site-text-primary"><img src="assets/images/icon/leaves.png" alt=""></span>
</div>
<div class="icon-content">
<h4 class="wt-tilte text-uppercase">Herbal & Natural</h4>
<p>A wonderful serenity has taken possession of my entire.</p>
</div>
</a>
</div>
<div class="nav-item">
<a class="nav-link wt-icon-box-wraper right p-a10 m-b20" href="#tab3" data-bs-toggle="tab">
<div class="icon-md site-text-primary radius">
<span class="icon-cell site-text-primary"><img src="assets/images/icon/lotus-position.png" alt=""></span>
</div>
<div class="icon-content">
<h4 class="wt-tilte text-uppercase">Effective Treatments</h4>
<p>A wonderful serenity has taken possession of my entire soul.</p>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-12 m-b30">
<div class="circle-content-pic tab-content ">
<div id="tab1" class="tab-pane in active">
<div class="wt-box">
<div class="wt-media site-text-primary m-b20 ">
<img src="assets/images/circle-block/1.jpg" class="radius-bx" alt="">
</div>
</div>
</div>
<div id="tab2" class="tab-pane">
<div class="wt-box">
<div class="wt-media site-text-primary m-b20">
<img src="assets/images/circle-block/2.jpg" class="radius-bx" alt="">
</div>
</div>
</div>
<div id="tab3" class="tab-pane">
<div class="wt-box">
<div class="wt-media site-text-primary m-b20">
<img src="assets/images/circle-block/3.jpg" class="radius-bx" alt="">
</div>
</div>
</div>
<div id="tab4" class="tab-pane">
<div class="wt-box">
<div class="wt-media site-text-primary m-b20">
<img src="assets/images/circle-block/4.jpg" class="radius-bx" alt="">
</div>
</div>
</div>
<div id="tab5" class="tab-pane">
<div class="wt-box">
<div class="wt-media site-text-primary m-b20">
<img src="assets/images/circle-block/5.jpg" class="radius-bx" alt="">
</div>
</div>
</div>
<div id="tab6" class="tab-pane">
<div class="wt-box">
<div class="wt-media site-text-primary m-b20">
<img src="assets/images/circle-block/6.jpg" class="radius-bx" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 m-b30">
<div class="nav-item">
<a class="nav-link wt-icon-box-wraper left p-a10 m-b20" href="#tab4" data-bs-toggle="tab">
<div class="icon-md site-text-primary radius">
<span class="icon-cell site-text-primary"><img src="assets/images/icon/bathtub.png" alt=""></span>
</div>
<div class="icon-content">
<h4 class="wt-tilte text-uppercase">Steam Bath</h4>
<p>A wonderful serenity has taken possession of my entire soul.</p>
</div>
</a>
</div>
<div class="nav-item">
<a class="nav-link wt-icon-box-wraper left p-a10 m-l30 m-b20" href="#tab5" data-bs-toggle="tab">
<div class="icon-md site-text-primary radius">
<span class="icon-cell site-text-primary"><img src="assets/images/icon/jacuzzi.png" alt=""></span>
</div>
<div class="icon-content">
<h4 class="wt-tilte text-uppercase">Trained Professionals</h4>
<p>A wonderful serenity has taken possession of my entire.</p>
</div>
</a>
</div>
<div class="nav-item">
<a class="nav-link wt-icon-box-wraper left p-a10 m-b20" href="#tab6" data-bs-toggle="tab">
<div class="icon-md site-text-primary radius">
<span class="icon-cell site-text-primary"><img src="assets/images/icon/massage.png" alt=""></span>
</div>
<div class="icon-content">
<h4 class="wt-tilte text-uppercase">Complete Detoxification</h4>
<p>A wonderful serenity has taken possession of my entire soul.</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- WELCOME COMPANY SECTION END -->
<!-- OUR EXPERTS SECTION START -->
<div class="section-full bg-white p-t100 p-b70">
<div class="container">
<!-- TITLE START-->
<div class="section-head text-center">
<h2><span class="site-text-primary">Our</span> Experts</h2>
<div class="wt-separator-outer ">
<div class="wt-separator style-icon">
<i class="fa fa-leaf text-black"></i>
<span class="separator-left site-bg-primary"></span>
<span class="separator-right site-bg-primary"></span>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit elit turpis, a porttitor tellus sollicitudin at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
<!-- TITLE END-->
<div class="section-content wt-our-team">
<div class="row">
<!-- COLUMNS 1 -->
<div class="col-lg-4 col-md-4 m-b30">
<div class="wt-team-one bg-white">
<div class="wt-team-media">
<a href="#"><img src="assets/images/our-team4/ex1.jpg" class="" alt=""></a>
</div>
<div class="wt-team-info text-center bg-white p-a10">
<h4 class="wt-team-title"><a href="#">Camila</a></h4>
<p>Founder, Beauty Spa</p>
<ul class="social-icons social-square social-dark">
<li><a href="javascript:void(0);" class="fa fa-facebook"></a></li>
<li><a href="javascript:void(0);" class="fa fa-twitter"></a></li>
<li><a href="javascript:void(0);" class="fa fa-linkedin"></a></li>
<li><a href="javascript:void(0);" class="fa fa-rss"></a></li>
<li><a href="javascript:void(0);" class="fa fa-youtube"></a></li>
<li><a href="javascript:void(0);" class="fa fa-instagram"></a></li>
</ul>
</div>
</div>
</div>
<!-- COLUMNS 2 -->
<div class="col-lg-4 col-md-4 m-b30">
<div class="wt-team-one bg-white">
<div class="wt-team-media">
<a href="#"><img src="assets/images/our-team4/ex2.jpg" class="" alt=""></a>
</div>
<div class="wt-team-info text-center bg-white p-a10">
<h4 class="wt-team-title"><a href="#">Milagros</a></h4>
<p>Founder, Beauty Spa</p>
<ul class="social-icons social-square social-dark">
<li><a href="javascript:void(0);" class="fa fa-facebook"></a></li>
<li><a href="javascript:void(0);" class="fa fa-twitter"></a></li>
<li><a href="javascript:void(0);" class="fa fa-linkedin"></a></li>
<li><a href="javascript:void(0);" class="fa fa-rss"></a></li>
<li><a href="javascript:void(0);" class="fa fa-youtube"></a></li>
<li><a href="javascript:void(0);" class="fa fa-instagram"></a></li>
</ul>
</div>
</div>
</div>
<!-- COLUMNS 3 -->
<div class="col-lg-4 col-md-4 m-b30">
<div class="wt-team-one bg-white">
<div class="wt-team-media">
<a href="#"><img src="assets/images/our-team4/ex3.jpg" class="" alt=""></a>
</div>
<div class="wt-team-info text-center bg-white p-a10">
<h4 class="wt-team-title"><a href="#">Agustina.</a></h4>
<p>Founder, Beauty Spa</p>
<ul class="social-icons social-square social-dark">
<li><a href="javascript:void(0);" class="fa fa-facebook"></a></li>
<li><a href="javascript:void(0);" class="fa fa-twitter"></a></li>
<li><a href="javascript:void(0);" class="fa fa-linkedin"></a></li>
<li><a href="javascript:void(0);" class="fa fa-rss"></a></li>
<li><a href="javascript:void(0);" class="fa fa-youtube"></a></li>
<li><a href="javascript:void(0);" class="fa fa-instagram"></a></li>
</ul>
</div>
</div>
</div>
<!-- COLUMNS 4 -->
</div>
</div>
</div>
</div>
<!-- OUR EXPERTS SECTION END -->
<!-- OUR SPECIAL OFFER SECTION start -->
<div class="section-full special-offer-block2 overlay-wraper bg-repeat p-t100 p-b70" style="background-image:url(assets/images/background/bg-6.jpg);">
<div class="overlay-main bg-white opacity-01"></div>
<div class="left-larg-pic">
<div class="wt-media">
<img src="assets/images/stone_flower2.png" alt="">
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-3">
</div>
<div class="col-md-9 col-sm-9 m-b30">
<div class="awesome-counter text-right">
<h3 class="font-24 text-secondry">You Owe Yourself This Moment</h3>
<h2 class="font-60 font-weight-600"><span class="site-text-primary">Our Special Offer </span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a metus pellentesque, scelerisque ex sed, volutpat nisi. Curabitur tortor mi, eleifend ornare lobortis non. Nulla porta purus quis iaculis ultrices. Proin aliquam sem at nibh hendrerit sagittis. Nullam ornare odio eu lacus tincidunt malesuada.</p>
</div>
<div class="pull-right counter-small-1">
<ul class="list-inline">
<li>
<div class="wt-icon-box-wraper left p-a10 text-secondry">
<span class="icon-sm">
<span class="flaticon-happy"></span>
</span>
<div class="icon-content">
<div class="font-20 font-weight-600"><span class="counter">458</span><b>+</b></div>
<span class="text-uppercase">Happy Clients</span>
</div>
</div>
</li>
<li>
<div class="wt-icon-box-wraper left p-a10 text-secondry">
<span class="icon-sm">
<span class="flaticon-trophy"></span>
</span>
<div class="icon-content">
<div class="font-20 font-weight-600"><span class="counter">698</span><b>+</b></div>
<span class="text-uppercase">Win Awards</span>
</div>
</div>
</li>
<li>
<div class="wt-icon-box-wraper left p-a10 text-secondry">
<span class="icon-sm">
<span class="flaticon-female-hairs"></span>
</span>
<div class="icon-content">
<div class="font-20 font-weight-600"><span class="counter">894</span><b>+</b></div>
<span class="text-uppercase">Our Trainer</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- OUR SPECIAL OFFER SECTION END -->
<!-- GALLERY STYLE-2 -->
<div class="section-full p-t100 p-b70 bg-white" id="content1">
<div class="container">
<!-- TITLE START-->
<div class="section-head text-center">
<h2><span class="site-text-primary">Our</span> Gallery</h2>
<div class="wt-separator-outer ">
<div class="wt-separator style-icon">
<i class="fa fa-leaf text-black"></i>
<span class="separator-left site-bg-primary"></span>
<span class="separator-right site-bg-primary"></span>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit elit turpis, a porttitor tellus sollicitudin at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
<!-- TITLE END-->
<!-- PAGINATION START -->
<div class="filter-wrap p-a15 our-gallery m-b30">
<ul class="masonry-filter link-style text-uppercase center-block m-t0">
<li class="active"><a data-filter="*" href="#">All</a></li>
<li><a data-filter=".cat-filter-1" href="#">Hair cut</a></li>
<li><a data-filter=".cat-filter-2" href="#">Foot</a></li>
<li><a data-filter=".cat-filter-3" href="#">Body</a></li>
<li><a data-filter=".cat-filter-4" href="#">Massage</a></li>
<li><a data-filter=".cat-filter-5" href="#">Face massage</a></li>
</ul>
</div>
<!-- PAGINATION END -->
<div class="portfolio-wrap mfp-gallery no-col-gap m-b30">
<div class="row">
<div class="masonry-item cat-filter-1 col-lg-4 col-md-4 col-sm-6 col-xs-6">
<div class="wt-gallery-bx">
<div class="wt-thum-bx wt-img-effect wt-img-overlay7">
<a href="#">
<img src="assets/images/gallery/portrait/pic5.jpg" alt="">
</a>
<div class="overlay-bx">
<div class="overlay-icon">
<a href="#">
<i class="fa fa-link wt-icon-box-xs"></i>
</a>
<a href="assets/images/gallery/portrait/pic5.jpg" class="mfp-link">
<i class="fa fa-picture-o wt-icon-box-xs"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="masonry-item cat-filter-2 col-lg-4 col-md-4 col-sm-6 col-xs-6">
<div class="wt-gallery-bx">
<div class="wt-thum-bx wt-img-effect wt-img-overlay7">
<a href="#">
<img src="assets/images/gallery/portrait-half/pic1.jpg" alt="">
</a>
<div class="overlay-bx">
<div class="overlay-icon">
<a href="#">
<i class="fa fa-link wt-icon-box-xs"></i>
</a>
<a href="assets/images/gallery/portrait-half/pic1.jpg" class="mfp-link">
<i class="fa fa-picture-o wt-icon-box-xs"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="masonry-item cat-filter-3 col-lg-4 col-md-4 col-sm-6 col-xs-6">
<div class="wt-gallery-bx">
<div class="wt-thum-bx wt-img-effect wt-img-overlay7">
<a href="#">
<img src="assets/images/gallery/portrait/pic6.jpg" alt="">
</a>
<div class="overlay-bx">
<div class="overlay-icon">
<a href="#">
<i class="fa fa-link wt-icon-box-xs"></i>
</a>
<a href="assets/images/gallery/portrait/pic6.jpg" class="mfp-link">
<i class="fa fa-picture-o wt-icon-box-xs"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="masonry-item cat-filter-4 col-lg-4 col-md-4 col-sm-6 col-xs-6">
<div class="wt-gallery-bx">
<div class="wt-thum-bx wt-img-effect wt-img-overlay7">
<a href="#">
<img src="assets/images/gallery/portrait-half/pic2.jpg" alt="">
</a>
<div class="overlay-bx">
<div class="overlay-icon">
<a href="#">
<i class="fa fa-link wt-icon-box-xs"></i>
</a>
<a href="assets/images/gallery/portrait-half/pic2.jpg" class="mfp-link">
<i class="fa fa-picture-o wt-icon-box-xs"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="masonry-item cat-filter-5 col-lg-4 col-md-4 col-sm-6 col-xs-6">
<div class="wt-gallery-bx">
<div class="wt-thum-bx wt-img-effect wt-img-overlay7">
<a href="#">
<img src="assets/images/gallery/portrait-half/pic3.jpg" alt="">
</a>
<div class="overlay-bx">
<div class="overlay-icon">
<a href="#">
<i class="fa fa-link wt-icon-box-xs"></i>
</a>
<a href="assets/images/gallery/portrait-half/pic3.jpg" class="mfp-link">
<i class="fa fa-picture-o wt-icon-box-xs"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="masonry-item cat-filter-1 col-lg-8 col-md-8 col-sm-8 col-xs-6">
<div class="wt-gallery-bx">
<div class="wt-thum-bx wt-img-effect wt-img-overlay7">
<a href="#">
<img src="assets/images/gallery/landscape-half/pic1.jpg" alt="">
</a>
<div class="overlay-bx">
<div class="overlay-icon">
<a href="#">
<i class="fa fa-link wt-icon-box-xs"></i>
</a>
<a href="assets/images/gallery/landscape-half/pic1.jpg" class="mfp-link">
<i class="fa fa-picture-o wt-icon-box-xs"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- GALLERY STYLE-2 End -->
<!-- OUR PRICING TABLE SECTION START -->
<div class="section-full overlay-wraper bg-white bg-parallax p-t100 p-b70" data-stellar-background-ratio="0.5" style="background-image:url(assets/images/background/bg-12.jpg);">
<div class="overlay-main bg-white opacity-07"></div>
<div class="container">
<!-- TITLE START-->
<div class="section-head text-center">
<h2><span class="site-text-primary">Our</span> Pricing</h2>
<div class="wt-separator-outer ">
<div class="wt-separator style-icon">
<i class="fa fa-leaf text-black"></i>
<span class="separator-left site-bg-primary"></span>
<span class="separator-right site-bg-primary"></span>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit elit turpis, a porttitor tellus sollicitudin at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
<!-- TITLE END-->
<div class="section-content">
<div class="pricingtable-row">
<div class="row">
<div class="col-lg-4 col-md-4 m-b30">
<div class="pricingtable-wrapper overlay-wraper pricing-table-style-3" >
<div class="pricingtable-inner bg-no-repeat bg-cover" style="background-image:url(assets/images/gallery/portrait/pic1.jpg);">
<div class="pricingtable-title" style="background-color:#42bbc5">
<h3>Basic Plan</h3>
</div>
<div class="pricingtable-price">
<span class="pricingtable-bx text-secondry">$29</span>
<span class="pricingtable-type text-secondry">M</span>
</div>
<ul class="pricingtable-features text-white">
<li><i class="fa fa-check"></i> Phone & Email Support </li>
<li><i class="fa fa-times"></i> 3 Social Account </li>
<li><i class="fa fa-check"></i> Branded Reports </li>
<li><i class="fa fa-check"></i> Unlock rewards</li>
<li><i class="fa fa-times"></i> Support Forum</li>
</ul>
<div class="pricingtable-footer">
<a href="#" class="site-button white text-uppercase radius-sm">Purchase</a>
</div>
<div class="overlay-main gradi-green opacity-07"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 m-b30">
<div class="pricingtable-wrapper overlay-wraper pricing-table-style-3" >
<div class="pricingtable-inner bg-no-repeat bg-cover" style="background-image:url(assets/images/gallery/portrait/pic2.jpg);">
<div class="pricingtable-title" style="background-color:#e273a4">
<h3>Pro Plan</h3>
</div>
<div class="pricingtable-price">
<span class="pricingtable-bx text-secondry">$49</span>
<span class="pricingtable-type text-secondry">M</span>
</div>
<ul class="pricingtable-features text-white">
<li><i class="fa fa-check"></i> Phone & Email Support </li>
<li><i class="fa fa-check"></i> 3 Social Account </li>
<li><i class="fa fa-check"></i> Branded Reports </li>
<li><i class="fa fa-check"></i> Unlock rewards</li>
<li><i class="fa fa-check"></i> Support Forum</li>
</ul>
<div class="pricingtable-footer">
<a href="#" class="site-button white text-uppercase radius-sm">Purchase</a>
</div>
<div class="overlay-main gradi-pink opacity-07"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 m-b30">
<div class="pricingtable-wrapper overlay-wraper pricing-table-style-3" >
<div class="pricingtable-inner bg-no-repeat bg-cover" style="background-image:url(assets/images/gallery/portrait/pic3.jpg);">
<div class="pricingtable-title" style="background-color:#8b4795">
<h3>Premium Plan</h3>
</div>
<div class="pricingtable-price">
<span class="pricingtable-bx text-secondry">$99</span>
<span class="pricingtable-type text-secondry">M</span>
</div>
<ul class="pricingtable-features text-white">
<li><i class="fa fa-check"></i> Phone & Email Support </li>
<li><i class="fa fa-check"></i> 3 Social Account </li>
<li><i class="fa fa-check"></i> Branded Reports </li>
<li><i class="fa fa-check"></i> Unlock rewards</li>
<li><i class="fa fa-check"></i> Support Forum</li>
</ul>
<div class="pricingtable-footer">
<a href="#" class="site-button white text-uppercase radius-sm">Purchase</a>
</div>
<div class="overlay-main gradi-purple opacity-07"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- OUR PRICING TABLEL SECTION END -->
<!-- OUR PRODUCT SECTION START -->
<div class="section-full bg-white p-t100 p-b70 bg-bottom-right bg-no-repeat" style="background-image:url(assets/images/stone-spa.png)">
<div class="container">
<!-- TITLE START-->
<div class="section-head text-center">
<h2><span class="site-text-primary">Our</span> Products</h2>
<div class="wt-separator-outer ">
<div class="wt-separator style-icon">
<i class="fa fa-leaf text-black"></i>
<span class="separator-left site-bg-primary"></span>
<span class="separator-right site-bg-primary"></span>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit elit turpis, a porttitor tellus sollicitudin at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
<!-- TITLE END-->
<div class="section-content">
<div class="row">
<!-- COLUMNS 1 -->
<div class="col-lg-3 col-md-6 col-sm-6 m-b30">
<div class="wt-box bg-white wt-product-box">
<div class="wt-media site-text-primary">
<img src="assets/images/products/pic-8.jpg" alt="">
</div>
<div class="wt-info p-a20 text-center">
<h3>Massage Soap</h3>
<span class="price">
<del>
<span><span class="Price-currencySymbol">£</span>3.00</span>
</del>
<ins>
<span><span class="Price-currencySymbol">£</span>2.00</span>
</ins>
</span>
<div class="rating-bx">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="p-t10">
<a href="#" class="site-button text-uppercase radius-sm font-weight-700 button-md">Add to cart</a>
</div>
</div>
</div>
</div>
<!-- COLUMNS 2 -->
<div class="col-lg-3 col-md-6 col-sm-6 m-b30">
<div class="wt-box bg-white wt-product-box">
<div class="wt-media site-text-primary">
<img src="assets/images/products/pic-2.jpg" alt="">
</div>
<div class="wt-info p-a20 text-center">
<h3>Flower</h3>
<span class="price">
<del>
<span><span class="Price-currencySymbol">£</span>3.00</span>
</del>
<ins>
<span><span class="Price-currencySymbol">£</span>2.00</span>
</ins>
</span>
<div class="rating-bx">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="p-t10">
<a href="#" class="site-button text-uppercase radius-sm font-weight-700 button-md">Add to cart</a>
</div>
</div>
</div>
</div>
<!-- COLUMNS 3 -->
<div class="col-lg-3 col-md-6 col-sm-6 m-b30">
<div class="wt-box bg-white wt-product-box">
<div class="wt-media site-text-primary">
<img src="assets/images/products/pic-9.jpg" alt="">
</div>
<div class="wt-info p-a20 text-center">
<h3>Massage Oil.</h3>
<span class="price">
<del>
<span><span class="Price-currencySymbol">£</span>3.00</span>
</del>
<ins>
<span><span class="Price-currencySymbol">£</span>2.00</span>
</ins>
</span>
<div class="rating-bx">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="p-t10">
<a href="#" class="site-button text-uppercase radius-sm font-weight-700 button-md">Add to cart</a>
</div>
</div>
</div>
</div>
<!-- COLUMNS 4 -->
<div class="col-lg-3 col-md-6 col-sm-6 m-b30">
<div class="wt-box bg-white wt-product-box">
<div class="wt-media site-text-primary ">
<img src="assets/images/products/pic-5.jpg" alt="">
</div>
<div class="wt-info p-a20 text-center">
<h3>Finnish sauna</h3>
<span class="price">
<del>
<span><span class="Price-currencySymbol">£</span>3.00</span>
</del>
<ins>
<span><span class="Price-currencySymbol">£</span>2.00</span>
</ins>
</span>
<div class="rating-bx">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="p-t10">
<a href="#" class="site-button text-uppercase radius-sm font-weight-700 button-md">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- OUR PRODUCT SECTION END -->
<!-- CONTACT US SECTION END -->
<div class="section-full overlay-wraper bg-parallax" data-stellar-background-ratio="0.2" style="background-image:url(assets/images/background/bg-11.jpg);">
<div class="overlay-main bg-white opacity-07"></div>
<div class="container">
<div class="row conntact-home">
<div class="col-lg-5 col-md-5 contact-home4-left">
<div class="section-content p-tb30 overlay-wraper">
<div class="overlay-main site-bg-primary opacity-09"></div>
<div class="p-a30" style="z-index:1; position:relative">
<h3 class="font-weight-400 text-white m-b5">Make an</h3>
<h2 class="text-white m-t0" style="font-family: 'Crete Round', serif;"><i>Appointment</i></h2>
<form class="cons-contact-form2 form-transparent" method="post" action="form-handler2.php">
<div class="form-group">
<input name="username" type="text" required class="form-control" placeholder="Neme">
</div>
<div class="form-group">
<input name="email" type="text" class="form-control" required placeholder="Email">
</div>
<div class="form-group">
<input name="phone" type="text" class="form-control" required placeholder="Phone">
</div>
<div class="form-group">
<textarea name="message" class="form-control" rows="4" placeholder="Message"></textarea>
</div>
<button type="submit" class="site-button-secondry radius-sm">
<span class="font-weight-700 inline-block text-uppercase p-lr15">Submit</span>
</button>
</form>
</div>
</div>
</div>
<div class="col-lg-7 col-md-7 contact-home4-right p-t50 p-b50" >
<div class="section-content">
<div class="opening-block bdr-5 bdr-primary p-a40 text-right">
<a href="#" class="site-bg-primary book-now-btn p-tb5 p-lr15 text-uppercase font-16 font-weight-500">All Services</a>
<h2 class="text-uppercase text-secondry m-tb0">Best Services</h2>
<span class="font-60 font-weight-600 text-uppercase site-text-primary">Open Hours</span>
<p>If you feel tired and stressed after a working day, we are happy to give you an enjoyable and healthy solution to find your balance again.</p>
<div class="clearfix">
<ul class="list-unstyled m-b0">
<li><div class="clearfix"><span class="opening-date">Mon-Fri:</span><span class="opening-time">9 AM - 6 PM</span></div></li>
<li><div class="clearfix"><span class="opening-date">Saturday:</span> <span class="opening-time">9 AM- 6 PM</span></div></li>
<li><div class="clearfix"><span class="opening-date">Sunday:</span> <span class="opening-time">Closed</span></div></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CONTACT US OFFER SECTION END -->
<!-- LATEST BLOG SECTION START -->
<div class="section-full latest-blog bg-gray p-t100 p-b70">
<div class="container">
<!-- TITLE -->
<div class="section-head text-center">
<h2><span class="site-text-primary">Latest </span> News</h2>
<div class="wt-separator-outer ">
<div class="wt-separator style-icon">
<i class="fa fa-leaf text-black"></i>
<span class="separator-left site-bg-primary"></span>
<span class="separator-right site-bg-primary"></span>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit elit turpis, a porttitor tellus sollicitudin at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
<!-- TITLE -->
<div class="section-content ">
<div class="row equal-wraper">
<!-- COLUMNS 1 -->
<div class="col-lg-6 col-md-12 m-b30">
<div class="blog-post latest-blog-3 blog-md date-style-1 clearfix">
<div class="wt-post-media wt-img-effect zoom-slow">
<a href="#"><img src="assets/images/blog/blog-small/pic1.jpg" alt=""></a>
</div>
<div class="wt-post-info">
<div class="wt-post-title ">
<h4 class="post-title font-weight-800"><a href="#">Oil Massage</a></h4>
</div>
<div class="wt-post-meta ">
<ul>
<li class="post-date"> <i class="fa fa-calendar"></i><strong>18 Jan</strong> <span> 2018</span> </li>
<li class="post-author"><i class="fa fa-user"></i><a href="#">By <span>John</span></a> </li>
<li class="post-comment"><i class="fa fa-comments"></i> <a href="#">0</a> </li>
</ul>
</div>
<div class="wt-post-text">
<p>Lorem Ipsum is simply dummy text of printing and typesetting Ipsum has been the industry's dummy</p>
</div>
</div>
</div>
<div class="blog-post latest-blog-3 blog-md date-style-1 clearfix">
<div class="wt-post-media wt-img-effect zoom-slow">
<a href="#"><img src="assets/images/blog/blog-small/pic2.jpg" alt=""></a>
</div>
<div class="wt-post-info">
<div class="wt-post-title ">
<h4 class="post-title font-weight-800"><a href="#">Beauty Treatment</a></h4>
</div>
<div class="wt-post-meta ">
<ul>
<li class="post-date"> <i class="fa fa-calendar"></i><strong>20 Jan</strong> <span> 2018</span> </li>
<li class="post-author"><i class="fa fa-user"></i><a href="#">By <span>John</span></a> </li>
<li class="post-comment"><i class="fa fa-comments"></i> <a href="#">0</a> </li>
</ul>
</div>
<div class="wt-post-text">
<p>Lorem Ipsum is simply dummy text of printing and typesetting Ipsum has been the industry's dummy</p>
</div>
</div>
</div>
<div class="blog-post latest-blog-3 blog-md date-style-1 clearfix">
<div class="wt-post-media wt-img-effect zoom-slow">
<a href="#"><img src="assets/images/blog/blog-small/pic3.jpg" alt=""></a>
</div>
<div class="wt-post-info">
<div class="wt-post-title ">
<h4 class="post-title font-weight-800"><a href="#">Fairness treatment</a></h4>
</div>
<div class="wt-post-meta ">
<ul>
<li class="post-date"> <i class="fa fa-calendar"></i><strong>22 Jan</strong> <span> 2018</span> </li>
<li class="post-author"><i class="fa fa-user"></i><a href="#">By <span>John</span></a> </li>
<li class="post-comment"><i class="fa fa-comments"></i> <a href="#">0</a> </li>
</ul>
</div>
<div class="wt-post-text">
<p>Lorem Ipsum is simply dummy text of printing and typesetting Ipsum has been the industry's dummy</p>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="blog-post latest-blog-3 overlay-wraper post-overlay date-style-1 bg-cover bg-no-repeat bg-top-center" style="background-image:url(assets/images/blog-big.jpg);">
<div class="overlay-main opacity-08 primary-gradi"></div>
<div class="wt-post-info p-a30 text-white">
<div class="post-overlay-position">
<div class="wt-post-title ">
<h3 class="post-title"><a href="#" class="text-white text-capitalize">Relaxation. No longer beyond your budget. </a></h3>
</div>
<div class="wt-post-meta ">
<ul>
<li class="post-date"><i class="fa fa-calendar"></i><strong>6 Jan</strong> <span> 2018</span></li>
<li class="post-author"><i class="fa fa-user"></i>By <a href="#">Admin</a> </li>
<li class="post-comment"><i class="fa fa-comments"></i> <a href="#">2 comment</a> </li>
</ul>
</div>
<div class="wt-post-text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- LATEST BLOG SECTION END -->
<!-- OUR CLIENT SLIDER START -->
<div class="section-full p-t50 p-b10 overlay-wraper site-bg-primary bg-repeat" style="background-image:url(assets/images/background/bg-7.png);">
<div class="container">
<!-- IMAGE CAROUSEL START -->
<div class="section-content">
<div class="owl-carousel client-logo-carousel">
<!-- COLUMNS 1 -->
<div class="item">
<div class="ow-client-logo">
<div class="client-logo wt-img-effect on-color">
<a href="javascript:;"><img src="assets/images/client-logo/logo1.png" alt=""></a>
</div>
</div>
</div>
<!-- COLUMNS 2 -->
<div class="item">
<div class="ow-client-logo">
<div class="client-logo wt-img-effect on-color">
<a href="javascript:;"><img src="assets/images/client-logo/logo2.png" alt=""></a>
</div>
</div>
</div>
<!-- COLUMNS 3 -->
<div class="item">
<div class="ow-client-logo">
<div class="client-logo wt-img-effect on-color">
<a href="javascript:;"><img src="assets/images/client-logo/logo3.png" alt=""></a>
</div>
</div>
</div>
<!-- COLUMNS 4 -->
<div class="item">
<div class="ow-client-logo">
<div class="client-logo wt-img-effect on-color">
<a href="javascript:;"><img src="assets/images/client-logo/logo4.png" alt=""></a>
</div>
</div>
</div>
<!-- COLUMNS 5 -->
<div class="item">
<div class="ow-client-logo">
<div class="client-logo wt-img-effect on-color">
<a href="javascript:;"><img src="assets/images/client-logo/logo5.png" alt=""></a>
</div>
</div>
</div>
<!-- COLUMNS 6 -->
<div class="item">
<div class="ow-client-logo">
<div class="client-logo wt-img-effect on-color">
<a href="javascript:;"><img src="assets/images/client-logo/logo6.png" alt=""></a>
</div>
</div>
</div>
<!-- COLUMNS 7 -->
<div class="item">
<div class="ow-client-logo">
<div class="client-logo wt-img-effect on-color">
<a href="javascript:;"><img src="assets/images/client-logo/logo7.png" alt=""></a>
</div>
</div>
</div>
<!-- COLUMNS 8 -->
<div class="item">
<div class="ow-client-logo">
<div class="client-logo wt-img-effect on-color">
<a href="javascript:;"><img src="assets/images/client-logo/logo8.png" alt=""></a>
</div>
</div>
</div>
<!-- COLUMNS 9 -->
<div class="item">
<div class="ow-client-logo">
<div class="client-logo wt-img-effect on-color">
<a href="javascript:;"><img src="assets/images/client-logo/logo9.png" alt=""></a>
</div>
</div>
</div>
<!-- COLUMNS 10 -->
<div class="item">
<div class="ow-client-logo">
<div class="client-logo wt-img-effect on-color">
<a href="javascript:;"><img src="assets/images/client-logo/logo10.png" alt=""></a>
</div>
</div>
</div>
<!-- COLUMNS 11 -->
<div class="item">
<div class="ow-client-logo">
<div class="client-logo wt-img-effect on-color">
<a href="javascript:;"><img src="assets/images/client-logo/logo11.png" alt=""></a>
</div>
</div>
</div>
<!-- COLUMNS 12 -->
<div class="item">
<div class="ow-client-logo">
<div class="client-logo wt-img-effect on-color">
<a href="javascript:;"><img src="assets/images/client-logo/logo12.png" alt=""></a>
</div>
</div>
</div>
</div>
</div>
<!-- IMAGE CAROUSEL START -->
</div>
</div>
<!-- OUR CLIENT SLIDER END -->
</div>
<!-- CONTENT END -->
<!-- FOOTER START -->
<footer class="site-footer footer-light">
<!-- COLL-TO ACTION START -->
<div class="section-full overlay-wraper site-bg-primary" style="background-image:url(assets/images/background/bg-7.png);">
<div class="section-content ">
<!-- COLL-TO ACTION START -->
<div class="wt-subscribe-box">
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-8">
<div class="call-to-action-left p-tb20 p-r50">
<h4 class="text-uppercase m-b10">We are ready to build your dream tell us more about your project</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor.</p>
</div>
</div>
<div class="col-md-3">
<div class="call-to-action-right p-tb30">
<a href="#" class="site-button-secondry text-uppercase radius-sm font-weight-600">
Contact us
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- FOOTER BLOCKES START -->
<div class="footer-top overlay-wraper">
<div class="overlay-main"></div>
<div class="container">
<div class="row">
<!-- ABOUT COMPANY -->
<div class="col-lg-3 col-md-6">
<div class="widget widget_about">
<h4 class="widget-title">About Company</h4>
<div class="logo-footer clearfix p-b15">
<a href="../fonts/"><img src="assets/images/logo-7.png" width="230" height="67" alt=""></a>
</div>
<p>Thewebmax ipsum dolor sit amet, interior adipiscing elit, sed diam nonummy nibh is euismod tincidunt ut laoreet dolore are agna aliquam erat. wisi enim ad minim veniam, quis tation. sit amet, consectet. ipsum dolor sit amet, consectetuer and item adipiscing. ipsum dolor sit.
</p>
</div>
</div>
<!-- RESENT POST -->
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="widget recent-posts-entry-date">
<h4 class="widget-title">Resent Post</h4>
<div class="widget-post-bx">
<div class="bdr-light-blue widget-post clearfix bdr-b-1 m-b10 p-b10">
<div class="wt-post-date text-center text-uppercase text-white">
<strong>20</strong>
<span>Mar</span>
</div>
<div class="wt-post-info">
<div class="wt-post-header">
<h6 class="post-title"><a href="#">Blog title first </a></h6>
</div>
<div class="wt-post-meta">
<ul>
<li class="post-author"><i class="fa fa-user"></i>By Admin</li>
<li class="post-comment"><i class="fa fa-comments"></i> 28</li>
</ul>
</div>
</div>
</div>
<div class="bdr-light-blue widget-post clearfix bdr-b-1 m-b10 p-b10">
<div class="wt-post-date text-center text-uppercase text-white">
<strong>30</strong>
<span>Mar</span>
</div>
<div class="wt-post-info">
<div class="wt-post-header">
<h6 class="post-title"><a href="#">Blog title first </a></h6>
</div>
<div class="wt-post-meta">
<ul>
<li class="post-author"><i class="fa fa-user"></i>By Admin</li>
<li class="post-comment"><i class="fa fa-comments"></i> 29</li>
</ul>
</div>
</div>
</div>
<div class="bdr-light-blue widget-post clearfix bdr-b-1 m-b10 p-b10">
<div class="wt-post-date text-center text-uppercase text-white">
<strong>31</strong>
<span>Mar</span>
</div>
<div class="wt-post-info">
<div class="wt-post-header">
<h6 class="post-title"><a href="#">Blog title first </a></h6>
</div>
<div class="wt-post-meta">
<ul>
<li class="post-author"><i class="fa fa-user"></i>By Admin</li>
<li class="post-comment"><i class="fa fa-comments"></i> 30</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- USEFUL LINKS -->
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="widget widget_services">
<h4 class="widget-title">Useful links</h4>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Career</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</div>
</div>
<!-- NEWSLETTER -->
<div class="col-lg-3 col-md-6">
<div class="widget widget_newsletter">
<h4 class="widget-title">Newsletter</h4>
<div class="newsletter-bx">
<form role="search" method="post">
<div class="input-group">
<input name="news-letter" class="form-control" placeholder="ENTER YOUR EMAIL" type="text">
<span class="input-group-btn">
<button type="submit" class="site-button"><i class="fa fa-paper-plane-o"></i></button>
</span>
</div>
</form>
</div>
</div>
<!-- SOCIAL LINKS -->
<div class="widget widget_social_inks">
<h4 class="widget-title">Social Links</h4>
<ul class="social-icons social-square social-darkest">
<li><a href="javascript:void(0);" class="fa fa-facebook"></a></li>
<li><a href="javascript:void(0);" class="fa fa-twitter"></a></li>
<li><a href="javascript:void(0);" class="fa fa-linkedin"></a></li>
<li><a href="javascript:void(0);" class="fa fa-rss"></a></li>
<li><a href="javascript:void(0);" class="fa fa-youtube"></a></li>
<li><a href="javascript:void(0);" class="fa fa-instagram"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- FOOTER COPYRIGHT -->
<div class="footer-bottom overlay-wraper">
<div class="overlay-main"></div>
<div class="constrot-strip"></div>
<div class="container p-t30">
<div class="row ftr-btm">
<div class="wt-footer-bot-left">
<span class="copyrights-text">© 2024 Your Company. All Rights Reserved. Jassa.</span>
</div>
<div class="wt-footer-bot-right">
<ul class="copyrights-nav pull-right">
<li><a href="javascript:void(0);">Terms & Condition</a></li>
<li><a href="javascript:void(0);">Privacy Policy</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<!-- FOOTER END -->
<!-- BUTTON TOP START -->
<button class="scroltop"><span class=" iconmoon-house relative" id="btn-vibrate"></span>Top</button>
</div>
<!-- LOADING AREA START ===== -->
<div class="loading-area">
<div class="loading-box"></div>
<div class="loading-pic">
<div class="cssload-container">
<div class="cssload-progress cssload-float cssload-shadow">
<div class="cssload-progress-item"></div>
</div>
</div>
</div>
</div>
<!-- LOADING AREA END ====== -->
<!-- STYLE SWITCHER ======= -->
<div class="styleswitcher">
<div class="switcher-btn-bx">
<a class="switch-btn">
<span class="fa fa-cog fa-spin"></span>
</a>
</div>
<div class="styleswitcher-inner">
<h6 class="switcher-title">Color Skin</h6>
<ul class="color-skins">
<li><a class="theme-skin skin-1" href="?theme=css/skin/skin-1" title="default Theme"></a></li>
<li><a class="theme-skin skin-2" href="?theme=css/skin/skin-2" title="pink Theme"></a></li>
<li><a class="theme-skin skin-3" href="?theme=css/skin/skin-3" title="sky Theme"></a></li>
<li><a class="theme-skin skin-4" href="?theme=css/skin/skin-4" title="green Theme"></a></li>
<li><a class="theme-skin skin-5" href="?theme=css/skin/skin-5" title="red Theme"></a></li>
<li><a class="theme-skin skin-6" href="?theme=css/skin/skin-6" title="orange Theme"></a></li>
<li><a class="theme-skin skin-7" href="?theme=css/skin/skin-7" title="purple Theme"></a></li>
<li><a class="theme-skin skin-8" href="?theme=css/skin/skin-8" title="blue Theme"></a></li>
<li><a class="theme-skin skin-9" href="?theme=css/skin/skin-9" title="gray Theme"></a></li>
<li><a class="theme-skin skin-10" href="?theme=css/skin/skin-10" title="brown Theme"></a></li>
<li><a class="theme-skin skin-11" href="?theme=css/skin/skin-11" title="gray Theme"></a></li>
<li><a class="theme-skin skin-12" href="?theme=css/skin/skin-12" title="golden Theme"></a></li>
</ul>
<h6 class="switcher-title">Nav</h6>
<ul class="nav-view">
<li class="nav-light active">Light</li>
<li class="nav-dark">Dark</li>
</ul>
<h6 class="switcher-title">Nav</h6>
<ul class="nav-width">
<li class="nav-boxed active">Boxed</li>
<li class="nav-wide">Wide</li>
</ul>
<h6 class="switcher-title">Header</h6>
<ul class="header-view">
<li class="header-fixed active">Fixed</li>
<li class="header-static">Static</li>
</ul>
<h6 class="switcher-title">Layout</h6>
<ul class="layout-view">
<li class="wide-layout active">Wide</li>
<li class="boxed">Boxed</li>
</ul>
<h6 class="switcher-title">Background Image</h6>
<ul class="background-switcher">
<li><img src="assets/images/switcher/switcher-bg/thum/bg1.jpg" rel="assets/images/switcher/switcher-bg/large/bg1.jpg" alt=""></li>
<li><img src="assets/images/switcher/switcher-bg/thum/bg2.jpg" rel="assets/images/switcher/switcher-bg/large/bg2.jpg" alt=""></li>
<li><img src="assets/images/switcher/switcher-bg/thum/bg3.jpg" rel="assets/images/switcher/switcher-bg/large/bg3.jpg" alt=""></li>
<li><img src="assets/images/switcher/switcher-bg/thum/bg4.jpg" rel="assets/images/switcher/switcher-bg/large/bg4.jpg" alt=""></li>
</ul>
<h6 class="switcher-title">Background Pattern</h6>
<ul class="pattern-switcher">
<li><img src="assets/images/switcher/switcher-patterns/thum/bg1.jpg" rel="assets/images/switcher/switcher-patterns/large/pt1.jpg" alt=""></li>
<li><img src="assets/images/switcher/switcher-patterns/thum/bg2.jpg" rel="assets/images/switcher/switcher-patterns/large/pt2.jpg" alt=""></li>
<li><img src="assets/images/switcher/switcher-patterns/thum/bg3.jpg" rel="assets/images/switcher/switcher-patterns/large/pt3.jpg" alt=""></li>
<li><img src="assets/images/switcher/switcher-patterns/thum/bg4.jpg" rel="assets/images/switcher/switcher-patterns/large/pt4.jpg" alt=""></li>
<li><img src="assets/images/switcher/switcher-patterns/thum/bg5.jpg" rel="assets/images/switcher/switcher-patterns/large/pt5.jpg" alt=""></li>
<li><img src="assets/images/switcher/switcher-patterns/thum/bg6.jpg" rel="assets/images/switcher/switcher-patterns/large/pt6.jpg" alt=""></li>
<li><img src="assets/images/switcher/switcher-patterns/thum/bg7.jpg" rel="assets/images/switcher/switcher-patterns/large/pt7.jpg" alt=""></li>
<li><img src="assets/images/switcher/switcher-patterns/thum/bg8.jpg" rel="assets/images/switcher/switcher-patterns/large/pt8.jpg" alt=""></li>
<li><img src="assets/images/switcher/switcher-patterns/thum/bg9.jpg" rel="assets/images/switcher/switcher-patterns/large/pt9.jpg" alt=""></li>
<li><img src="assets/images/switcher/switcher-patterns/thum/bg10.jpg" rel="assets/images/switcher/switcher-patterns/large/pt10.jpg" alt=""></li>
<li><img src="assets/images/switcher/switcher-patterns/thum/bg11.jpg" rel="assets/images/switcher/switcher-patterns/large/pt11.jpg" alt=""></li>
<li><img src="assets/images/switcher/switcher-patterns/thum/bg12.jpg" rel="assets/images/switcher/switcher-patterns/large/pt12.jpg" alt=""></li>
</ul>
</div>
</div>
<!-- STYLE SWITCHER END ==== -->
5. Now guys we need to add below into src/app/app.routes.ts to links components to routes:
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
export const routes: Routes = [
{
path: '', title: 'Home Page', component: HomeComponent,
},
];
7. Now guys we need to add below code into our project/src/index.html file for styles and scripts or we can also call this styles/scripts inside angular.json file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="/">
<!-- FAVICONS ICON -->
<link rel="icon" href="images/favicon.ico" type="image/x-icon" >
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.png" >
<!-- PAGE TITLE HERE -->
<title>Spa Template | Home Page 4</title>
<!-- MOBILE SPECIFIC -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css"><!-- BOOTSTRAP STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css"><!-- FONTAWESOME STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="assets/css/flaticon.min.css"><!-- FLATICON STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="assets/css/animate.min.css"><!-- ANIMATE STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="assets/css/owl.carousel.min.css"><!-- OWL CAROUSEL STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap-select.min.css"><!-- BOOTSTRAP SELECT BOX STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="assets/css/magnific-popup.min.css"><!-- MAGNIFIC POPUP STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="assets/css/loader.min.css"><!-- LOADER STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="assets/css/style.css"><!-- MAIN STYLE SHEET -->
<link rel="stylesheet" type="text/css" class="skin" href="assets/css/skin-7.css"><!-- THEME COLOR CHANGE STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="assets/css/switcher.css"><!-- SIDE SWITCHER STYLE SHEET -->
<!-- GOOGLE FONTS -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- REVOLUTION SLIDER CSS -->
<link rel="stylesheet" type="text/css" href="assets/css/settings.css">
<!-- REVOLUTION NAVIGATION STYLE -->
<link rel="stylesheet" type="text/css" href="assets/css/navigation.css">
</head>
<body id="bg">
<app-root></app-root>
<!-- JAVASCRIPT FILES ========================================= -->
<script src="assets/js/jquery-3.6.1.min.js"></script><!-- JQUERY.MIN JS -->
<script src="assets/js/popper.min.js"></script><!-- POPPER.MIN JS -->
<script src="assets/js/bootstrap.min.js"></script><!-- BOOTSTRAP.MIN JS -->
<script src="assets/js/bootstrap-select.min.js"></script><!-- FORM JS -->
<script src="assets/js/jquery.bootstrap-touchspin.min.js"></script><!-- FORM JS -->
<script src="assets/js/magnific-popup.min.js"></script><!-- MAGNIFIC-POPUP JS -->
<script src="assets/js/waypoints.min.js"></script><!-- WAYPOINTS JS -->
<script src="assets/js/counterup.min.js"></script><!-- COUNTERUP JS -->
<script src="assets/js/waypoints-sticky.min.js"></script><!-- COUNTERUP JS -->
<script src="assets/js/isotope.pkgd.min.js"></script><!-- MASONRY -->
<script src="assets/js/imagesloaded.pkgd.min.js"></script><!-- MASONRY -->
<script src="assets/js/owl.carousel.min.js"></script><!-- OWL SLIDER -->
<script src="assets/js/scrolla.min.js"></script><!-- ON SCROLL CONTENT ANIMTE -->
<script src="assets/js/custom.js"></script><!-- CUSTOM FUCTIONS -->
<script src="assets/js/shortcode.js"></script><!-- SHORTCODE FUCTIONS -->
<script src="assets/js/switcher.js"></script><!-- SWITCHER FUCTIONS -->
<script>
$(document).ready(function(){
$('.circle-block-outer .nav-link').hover(function() {
$(this).tab('show');
});
})
</script>
<!-- REVOLUTION JS FILES -->
<script src="assets/js/jquery.themepunch.tools.min.js"></script>
<script src="assets/js/jquery.themepunch.revolution.min.js"></script>
<!-- SLIDER REVOLUTION 5.0 EXTENSIONS (Load Extensions only on Local File Systems ! The following part can be removed on Server for On Demand Loading) -->
<script src="assets/js/revolution-plugin.js"></script>
<!-- REVOLUTION SLIDER FUNCTION ===== -->
<script src="assets/js/rev-script-1.js"></script>
</body>
</html>
8. Now guys here is the github link and from where we will get the all the assets like images, css, js and fonts:
Friends in the end must run ng serve command into your terminal to run the angular 17 project(localhost:4200).
Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.
Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.
I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.
Jassa
Thanks
Recent Comments