| Server IP : 172.67.201.108 / Your IP : 216.73.216.11 Web Server : Apache/2.4.68 (Amazon Linux) OpenSSL/3.5.5 System : Linux ip-172-31-69-123.ec2.internal 6.1.176-223.369.amzn2023.x86_64 #1 SMP PREEMPT_DYNAMIC Fri Jul 24 13:34:27 UTC 2026 x86_64 User : ec2-user ( 1000) PHP Version : 8.4.23 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /home/home2/domains/nycyouth/Package-HTML/Canvas 7 Files/ |
Upload File : |
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="author" content="SemiColonWeb">
<meta name="description" content="Get Canvas to build powerful websites easily with the Highly Customizable & Best Selling Bootstrap Template, today.">
<!-- Font Imports -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato&family=Merriweather:wght@400;700&display=swap" rel="stylesheet">
<!-- Core Style -->
<link rel="stylesheet" href="style.css">
<!-- Font Icons -->
<link rel="stylesheet" href="css/font-icons.css">
<link rel="stylesheet" href="one-page/css/et-line.css">
<link rel="stylesheet" href="demos/spa/css/fonts/spa-icons.css">
<!-- SLIDER REVOLUTION 5.x CSS SETTINGS -->
<link rel="stylesheet" href="include/rs-plugin/css/settings.css" media="screen">
<link rel="stylesheet" href="include/rs-plugin/css/layers.css">
<link rel="stylesheet" href="include/rs-plugin/css/navigation.css">
<!-- Niche Demos -->
<link rel="stylesheet" href="demos/beauty/beauty.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Document Title
============================================= -->
<title>Beauty Demo | Canvas</title>
<style>
.tiny_bullet_slider .tp-bullet:before{content:" "; position:absolute; width:100%; height:25px; top:-12px; left:0px; background:transparent}
#rev_slider_139_1 .uranus.tparrows{width:50px; height:50px; background:rgba(255,255,255,0)}#rev_slider_139_1 .uranus.tparrows:before{width:50px; height:50px; line-height:50px; font-size:40px; transition:all 0.3s;-webkit-transition:all 0.3s}#rev_slider_139_1 .uranus.tparrows:hover:before{opacity:0.75}.bullet-bar.tp-bullets{}.bullet-bar.tp-bullets:before{content:" ";position:absolute;width:100%;height:100%;background:transparent;padding:10px;margin-left:-10px;margin-top:-10px;box-sizing:content-box}.bullet-bar .tp-bullet{width:60px;height:3px;position:absolute;background:#aaa; background:rgba(255,255,255,0.6);cursor:pointer;box-sizing:content-box}.bullet-bar .tp-bullet:hover,.bullet-bar .tp-bullet.selected{background:rgba(255,255,255,1)}
</style>
</head>
<body class="stretched side-header" data-animation-in="bounce">
<!-- Document Wrapper
============================================= -->
<div id="wrapper">
<div class="modal-on-load" data-target="#myModal1"></div>
<!-- Modal -->
<div class="modal1 mfp-hide" id="myModal1">
<div class="block mx-auto" style="background-color: #FFF; max-width: 700px;">
<div class="row m-0 align-items-center">
<div class="col-sm-6" data-height-xl="456" data-height-lg="456" data-height-md="456" data-height-sm="358" data-height-xs="0" style="background-image: url('demos/beauty/images/others/banner2.jpg'); background-size: cover;"></div>
<div class="col-sm-6 p-4 p-md-5 align-self-center">
<div>
<h4>Sign Up for more offers</h4>
<div class="widget subscribe-widget mt-2">
<p class="mb-4"><strong>Subscribe</strong> to Our Newsletter to get Important News, Amazing Offers & Inside Scoops:</p>
<div class="widget-subscribe-form-result"></div>
<form id="widget-subscribe-form" action="include/subscribe.php" method="post" class="mt-1 mb-0">
<input type="email" id="widget-subscribe-form-email" name="widget-subscribe-form-email" class="form-control form-control required email" placeholder="Enter your Email Address">
<button class="button w-100 text-transform-none fw-normal ms-0 mt-2" type="submit">Subscribe Now</button>
</form>
</div>
<p class="mb-0"><small class="fw-normal text-black-50"><em>We hate spam & we respect your privacy*</em></small></p>
</div>
</div>
</div>
</div>
</div>
<!-- Header
============================================= -->
<header id="header">
<div id="header-wrap">
<div class="container">
<div class="header-row justify-content-between">
<!-- Logo
============================================= -->
<div id="logo" class="me-0 me-lg-auto order-2 order-lg-1">
<a href="index.html">
<img class="logo-default" srcset="demos/beauty/images/logo.png, demos/beauty/images/[email protected] 2x" src="demos/beauty/images/[email protected]" alt="Canvas Logo">
</a>
</div><!-- #logo end -->
<div class="primary-menu-trigger order-1 order-lg-2"><i class="bi-list"></i></div>
<div class="header-misc order-3 order-lg-last">
<div class="d-flex mb-lg-5">
<a href="#" class="social-icon si-small rounded-circle text-light border-0 bg-facebook">
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-facebook-f"></i>
</a>
<a href="#" class="social-icon si-small rounded-circle text-light border-0 bg-twitter">
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-twitter"></i>
</a>
<a href="#" class="social-icon si-small rounded-circle text-light border-0 bg-pinterest">
<i class="fa-brands fa-pinterest-p"></i>
<i class="fa-brands fa-pinterest-p"></i>
</a>
</div>
</div>
<!-- Primary Navigation
============================================= -->
<nav class="primary-menu order-last order-lg-2">
<ul class="menu-container one-page-menu" data-easing="easeInOutExpo" data-speed="1250" data-offset="0">
<li class="menu-item"><a class="menu-link" href="#" data-href="#slider"><div>Home</div></a></li>
<li class="menu-item"><a class="menu-link" href="#" data-href="#about"><div>About</div></a></li>
<li class="menu-item"><a class="menu-link" href="#" data-href="#price" data-offset="85"><div>Price</div></a></li>
<li class="menu-item"><a class="menu-link" href="#" data-href="#services"><div>Services</div></a></li>
<li class="menu-item"><a class="menu-link" href="#" data-href="#promotions"><div>Promotions</div></a></li>
<li class="menu-item"><a class="menu-link" href="#" data-href="#footer"><div>Contact</div></a></li>
</ul>
</nav><!-- #primary-menu end -->
</div>
</div>
</div>
<div class="header-wrap-clone"></div>
</header><!-- #header end -->
<!-- Slider
============================================= -->
<section id="slider" class="slider-element page-section revslider-wrap min-vh-60 min-vh-md-100">
<div class="slider-inner">
<div id="welcome_wrapper" class="rev_slider_wrapper fullscreen-container" data-alias="reveal-add-on39" data-source="gallery" style="background:#FFF;padding:0px; width: 100% !important;">
<!-- START REVOLUTION SLIDER 5.4.8 fullscreen mode -->
<div id="rev_slider_139_1" class="rev_slider fullscreenbanner" style="display:none;" data-version="5.4.8">
<ul>
<!-- SLIDE -->
<li data-index="rs-353" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="300" data-thumb="demos/beauty/images/slider/100x50_181c1-1.jpg" data-rotate="0" data-saveperformance="off" data-title="Slide" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
<!-- MAIN IMAGE -->
<img src="demos/beauty/images/slider/181c1-1.jpg" alt="Image" data-bgposition="left center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="off" class="rev-slidebg" data-no-retina>
<!-- LAYERS -->
<!-- LAYER NR. 4 -->
<a href="#" class="tp-caption button button-circle rev-btn ls-1 button-large button-dark button-black text-white tp-resizeme"
id="slide-353-layer-4"
data-x="['left','left','left','left']" data-hoffset="['96','90','70','70']"
data-y="['middle','middle','middle','middle']" data-voffset="['85','120','120','120']"
data-color="['rgb(0,0,0)','rgba(255,255,255,1)','rgba(255,255,255,1)','rgba(255,255,255,1)']"
data-letterspacing="['1','2','2','2']"
data-width="none"
data-height="none"
data-whitespace="nowrap"
data-lineheight="['52','60','52','52']"
data-type="button"
data-responsive_offset="on"
data-frames='[{"delay":500,"speed":1000,"sfxcolor":"#FFF","sfx_effect":"blockfromleft","frame":"0","from":"z:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#FFF","sfx_effect":"blocktoleft","frame":"999","to":"z:0;","ease":"Power4.easeOut"},{"frame":"hover","speed":"0","ease":"Linear.easeNone","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgb(255,255,255);bg:rgb(10,10,10);bw:1px 1px 1px 1px;"}]'
data-textAlign="['inherit','inherit','inherit','inherit']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[30,30,30,30]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[30,30,30,30]"
data-scrollto="#about"
data-offset="0"
data-easing="easeInOutExpo"
data-speed="1250"
style="z-index: 5; line-height: 52px; background-color: rgba(0,0,0,0.2); ">About Us</a>
<!-- LAYER NR. 5 -->
<div class="tp-caption text-uppercase tp-resizeme"
id="slide-353-layer-3"
data-x="['left','left','left','left']" data-hoffset="['84','70','70','70']"
data-y="['middle','middle','middle','middle']" data-voffset="['-180','-160','-170','-160']"
data-color="['rgb(0,0,0)','rgb(0,0,0)','rgb(0,0,0)','rgb(0,0,0)']"
data-letterspacing="['5','10','10','10']"
data-width="none"
data-height="none"
data-whitespace="normal"
data-type="text"
data-responsive_offset="on"
data-frames='[{"delay":300,"speed":750,"sfxcolor":"#FFF","sfx_effect":"blockfromleft","frame":"0","from":"z:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#FFF","sfx_effect":"blocktoleft","frame":"999","to":"z:0;","ease":"Power4.easeOut"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[10,10,10,10]"
data-paddingright="[20,20,20,20]"
data-paddingbottom="[10,10,10,10]"
data-paddingleft="[20,20,20,20]"
style="z-index: 7; white-space: normal; font-size: 20px; line-height: 20px; font-weight: 400; color: #000000; letter-spacing: 5px;font-family:var(--cnvs-body-font);">Artist</div>
<!-- LAYER NR. 6 -->
<div class="tp-caption tp-resizeme"
id="slide-353-layer-2"
data-x="['left','left','left','left']" data-hoffset="['78','70','70','70']"
data-y="['middle','middle','middle','middle']" data-voffset="['-52','-30','-30','-30']"
data-fontsize="['58','58','58','50']"
data-lineheight="['78','70','70','60']"
data-color="['rgb(0,0,0)','rgb(0,0,0)','rgb(0,0,0)','rgb(0,0,0)']"
data-width="['650','650','620','380']"
data-height="none"
data-whitespace="normal"
data-type="text"
data-responsive_offset="on"
data-frames='[{"delay":200,"speed":750,"sfxcolor":"#FFF","sfx_effect":"blockfromleft","frame":"0","from":"z:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#FFF","sfx_effect":"blocktoleft","frame":"999","to":"z:0;","ease":"Power4.easeOut"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[20,20,20,20]"
data-paddingright="[20,20,20,20]"
data-paddingbottom="[30,30,30,30]"
data-paddingleft="[20,20,20,20]"
style="z-index: 8; min-width: 650px; max-width: 650px; white-space: normal; font-size: 58px; line-height: 76px; font-weight: 400; color: #000000; letter-spacing: -2px;font-family:var(--cnvs-primary-font);">Hairstylists Bring Out The Beauty In You.</div>
</li>
<!-- SLIDE -->
<li data-index="rs-354" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="300" data-thumb="demos/beauty/images/slider/100x50_5258d-2.jpg" data-rotate="0" data-saveperformance="off" data-title="Slide" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
<!-- MAIN IMAGE -->
<img src="demos/beauty/images/slider/5258d-2.jpg" alt="Image" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="off" class="rev-slidebg" data-no-retina>
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<a href="#" class="tp-caption button button-circle rev-btn ls-1 button-large button-white button-light tp-resizeme"
id="slide-354-layer-4"
data-x="['left','left','left','left']" data-hoffset="['96','90','70','70']"
data-y="['middle','middle','middle','middle']" data-voffset="['90','90','120','150']"
data-letterspacing="['1','2','2','2']"
data-width="auto"
data-height="none"
data-whitespace="nowrap"
data-lineheight="['52','60','52','50']"
data-type="button"
data-responsive_offset="on"
data-frames='[{"delay":500,"speed":750,"sfxcolor":"#FFF","sfx_effect":"blockfromright","frame":"0","from":"z:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#FFF","sfx_effect":"blocktoright","frame":"999","to":"z:0;","ease":"Power4.easeOut"},{"frame":"hover","speed":"0","ease":"Linear.easeNone","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgb(0,0,0);bg:rgb(255,255,255);"}]'
data-textAlign="['inherit','inherit','inherit','inherit']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[30,30,30,30]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[30,30,30,30]"
data-scrollto="#price"
data-easing="easeInOutExpo"
data-speed="1250"
data-offset="85"
style="z-index: 5; line-height: 52px; background-color: rgba(255,255,255,0.4); ">Price List</a>
<!-- LAYER NR. 2 -->
<div class="tp-caption text-uppercase tp-resizeme"
id="slide-354-layer-3"
data-x="['left','left','left','left']" data-hoffset="['78','70','70','70']"
data-y="['middle','middle','middle','middle']" data-voffset="['-184','-150','-150','-200']"
data-width="none"
data-height="none"
data-whitespace="normal"
data-type="text"
data-responsive_offset="on"
data-frames='[{"delay":400,"speed":750,"sfxcolor":"#FFF","sfx_effect":"blockfromright","frame":"0","from":"z:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#FFF","sfx_effect":"blocktoright","frame":"999","to":"z:0;","ease":"Power4.easeOut"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[10,10,10,10]"
data-paddingright="[20,20,20,20]"
data-paddingbottom="[10,10,10,10]"
data-paddingleft="[20,20,20,20]"
style="z-index: 6; white-space: normal; font-size: 20px; line-height: 20px; font-weight: 400; color: #FFF; letter-spacing: 10px;font-family:var(--cnvs-body-font);">Salon </div>
<!-- LAYER NR. 3 -->
<div class="tp-caption text-start tp-resizeme"
id="slide-354-layer-2"
data-x="['left','left','left','left']" data-hoffset="['78','70','70','70']"
data-y="['middle','middle','middle','middle']" data-voffset="['-52','-30','-30','-30']"
data-fontsize="['58','58','58','50']"
data-lineheight="['84','70','70','60']"
data-width="['650','650','620','380']"
data-height="none"
data-whitespace="normal"
data-type="text"
data-responsive_offset="on"
data-frames='[{"delay":300,"speed":750,"sfxcolor":"#FFF","sfx_effect":"blockfromright","frame":"0","from":"z:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#FFF","sfx_effect":"blocktoright","frame":"999","to":"z:0;","ease":"Power4.easeOut"}]'
data-textAlign="['right','right','right','right']"
data-paddingtop="[20,20,20,20]"
data-paddingright="[20,20,20,20]"
data-paddingbottom="[30,30,30,30]"
data-paddingleft="[20,20,20,20]"
style="z-index: 7; min-width: 650px; max-width: 650px; white-space: normal; font-size: 58px; line-height: 84px; font-weight: 400; color: #FFF; letter-spacing: -2px;font-family:var(--cnvs-primary-font);">The beauty of nature is hidden in details. </div>
</li>
<!-- SLIDE -->
<li data-index="rs-355" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="300" data-thumb="demos/beauty/images/slider/100x50_7f864-3.jpg" data-rotate="0" data-saveperformance="off" data-title="Slide" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
<!-- MAIN IMAGE -->
<img src="demos/beauty/images/slider/7f864-3.jpg" alt="Image" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="off" class="rev-slidebg" data-no-retina>
<!-- LAYERS -->
<!-- LAYER NR. 7 -->
<div class="tp-caption tp-resizeme"
id="slide-355-layer-2"
data-x="['left','left','center','center']" data-hoffset="['74','70','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['-52','-30','-30','-30']"
data-fontsize="['58','58','58','50']"
data-lineheight="['70','70','70','50']"
data-width="['650','650','620','380']"
data-height="none"
data-whitespace="normal"
data-type="text"
data-responsive_offset="on"
data-frames='[{"delay":200,"speed":750,"sfxcolor":"#FFF","sfx_effect":"blockfromtop","frame":"0","from":"z:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#FFF","sfx_effect":"blocktotop","frame":"999","to":"z:0;","ease":"Power4.easeOut"}]'
data-textAlign="['left','left','center','center']"
data-paddingtop="[20,20,20,20]"
data-paddingright="[20,20,20,20]"
data-paddingbottom="[30,30,30,30]"
data-paddingleft="[20,20,20,20]"
style="z-index: 6; min-width: 650px; max-width: 650px; white-space: normal; font-size: 58px; line-height: 70px; font-weight: 400; color: #FFF; letter-spacing: -2px;font-family:var(--cnvs-primary-font);">Beauty begins the moment you decide to be Yourself</div>
<!-- LAYER NR. 8 -->
<div class="tp-caption text-uppercase tp-resizeme"
id="slide-355-layer-3"
data-x="['left','left','center','center']" data-hoffset="['78','70','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['-200','-180','-200','-170']"
data-width="none"
data-height="none"
data-whitespace="normal"
data-type="text"
data-responsive_offset="on"
data-frames='[{"delay":300,"speed":750,"sfxcolor":"#FFF","sfx_effect":"blockfromtop","frame":"0","from":"z:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#FFF","sfx_effect":"blocktotop","frame":"999","to":"z:0;","ease":"Power4.easeOut"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[10,10,10,10]"
data-paddingright="[20,20,20,20]"
data-paddingbottom="[10,10,10,10]"
data-paddingleft="[20,20,20,20]"
style="z-index: 7; white-space: normal; font-size: 20px; line-height: 20px; font-weight: 400; color: #FFF; letter-spacing: 10px;font-family:var(--cnvs-body-font)">MakeUp</div>
<!-- LAYER NR. 9 -->
<div class="tp-caption button button-circle rev-btn ls-1 button-large button-light button-white tp-resizeme"
id="slide-355-layer-4"
data-x="['left','left','center','center']" data-hoffset="['86','86','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['122','140','170','130']"
data-width="none"
data-height="none"
data-whitespace="nowrap"
data-lineheight="['52','60','52','52']"
data-type="button"
data-responsive_offset="on"
data-frames='[{"delay":400,"speed":750,"sfxcolor":"#FFF","sfx_effect":"blockfromtop","frame":"0","from":"z:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#FFF","sfx_effect":"blocktotop","frame":"999","to":"z:0;","ease":"Power4.easeOut"},{"frame":"hover","speed":"0","ease":"Linear.easeNone","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgb(0,0,0);bg:rgb(255,255,255);bw:1px 1px 1px 1px;"}]'
data-textAlign="['inherit','inherit','inherit','inherit']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[30,30,30,30]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[30,30,30,30]"
style="z-index: 8;line-height: 52px; background-color: rgba(255,255,255,0.4);">Buy Now </div>
</li>
</ul>
<div class="tp-static-layers">
<!-- LAYER NR. 3 -->
<div class="tp-caption tp-static-layer"
id="slider-4-layer-5"
data-x="['right','right','right','right']" data-hoffset="['80','80','80','80']"
data-y="['top','top','top','top']" data-voffset="['40','40','40','40']"
data-width="none"
data-height="none"
data-whitespace="nowrap"
data-visibility="['on','on','off','off']"
data-transform_idle="o:1;"
data-transform_in="opacity:0;s:300;e:Power2.easeInOut;"
data-transform_out="opacity:0;s:300;"
data-start="500"
data-splitin="none"
data-splitout="none"
data-basealign="slide"
data-responsive_offset="off"
data-responsive="off"
data-startslide="0"
data-textAlign="center"
data-endslide="2"
style="z-index: 7; white-space: nowrap; font-size: 15px; font-weight: 700; color: #FFF;font-family: var(--cnvs-primary-font);"><a href="#" class="text-white"><span style="font-family: var(--cnvs-body-font);">+</span> (1) 123 456 789</a></div>
</div>
<div class="tp-bannertimer" style="height: 6px; background: rgba(255,255,255,0.35);"></div>
</div>
</div><!-- END REVOLUTION SLIDER -->
</div>
</section>
<!-- Content
============================================= -->
<section id="content">
<div class="content-wrap py-0">
<!-- Section About
============================================= -->
<div id="about" class="section m-0 page-section" style="background: url('demos/beauty/images/others/3.jpg') no-repeat center bottom; background-size: cover; padding: 100px 0">
<div class="container">
<!-- Heading -->
<div class="heading-block border-bottom-0 mb-4">
<div class="before-heading ls-1 color" style="font-style: normal">Our Services</div>
<h2 class="text-transform-none ls-1 fw-bold" style="font-size: 34px">What we do?</h2>
</div>
<div class="row mb-5">
<div class="col-xl-6 col-md-7 mb-5 mb-md-0">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio veritatis qui asperiores, quae beatae autem repudiandae praesentium reiciendis illum minus fugiat animi molestiae nobis! Harum atque quod, similique maiores itaque dolorum sequi, expedita. Omnis, ex!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio veritatis qui asperiores, quae beatae autem repudiandae praesentium reiciendis illum minus fugiat animi molestiae nobis! Harum atque quod, similique maiores itaque dolorum sequi, expedita. Omnis, ex!</p>
<a href="#" data-scrollto="#price" class="button button-circle text-transform-none fw-normal" data-offset="85" data-easing="easeInOutExpo" data-speed="1250">Price <i class="bi-caret-right-fill m-0"></i></a>
</div>
<div class="col-xl-3 col-sm-5 d-md-none d-xl-block mb-5 mb-sm-0">
<div class="masonry-thumbs masonry-gap-lg row row-cols-2 grid-container" data-lightbox="gallery">
<a class="grid-item" href="demos/beauty/images/others/2.jpg" data-lightbox="gallery-item"><img src="demos/beauty/images/others/2.jpg" alt="Gallery Thumb 1"></a>
<a class="grid-item" href="demos/beauty/images/others/5.jpg" data-lightbox="gallery-item"><img src="demos/beauty/images/others/5.jpg" alt="Gallery Thumb 2"></a>
<a class="grid-item" href="demos/beauty/images/others/6.jpg" data-lightbox="gallery-item"><img src="demos/beauty/images/others/6.jpg" alt="Gallery Thumb 3"></a>
<a class="grid-item" href="demos/beauty/images/others/7.jpg" data-lightbox="gallery-item"><img src="demos/beauty/images/others/7.jpg" alt="Gallery Thumb 4"></a>
</div>
</div>
<div class="col-xl-3 col-md-5 col-sm-7">
<ul class="iconlist m-0">
<li><img src="demos/beauty/images/checked.svg" width="20" height="20" alt="Image" class="me-2">Assertively Fabricate.</li>
<li class="pt-3"><img src="demos/beauty/images/checked.svg" width="20" height="20" alt="Image" class="me-2">Distinctively disseminate.</li>
<li class="pt-3"><img src="demos/beauty/images/checked.svg" width="20" height="20" alt="Image" class="me-2">Appropriately predominate.</li>
<li class="pt-3"><img src="demos/beauty/images/checked.svg" width="20" height="20" alt="Image" class="me-2">Assertively Fabricate.</li>
<li class="pt-3"><img src="demos/beauty/images/checked.svg" width="20" height="20" alt="Image" class="me-2">Distinctively disseminate.</li>
<li class="pt-3"><img src="demos/beauty/images/checked.svg" width="20" height="20" alt="Image" class="me-2">Assertively Fabricate.</li>
<li class="pt-3"><img src="demos/beauty/images/checked.svg" width="20" height="20" alt="Image" class="me-2">Distinctively disseminate.</li>
<li class="pt-3"><img src="demos/beauty/images/checked.svg" width="20" height="20" alt="Image" class="me-2">Authoritatively scale Web</li>
</ul>
</div>
</div>
<div class="clear"></div>
<!-- Masonry Thums
============================================= -->
<div class="row mt-5 dark min-vh-50">
<a href="#" class="col-md-3 shadow col-sm-6 min-vh-40 border-right" style="background: url('demos/beauty/images/categories/1.jpg') no-repeat center center; background-size: cover;">
<div class="bg-overlay">
<div class="bg-overlay-content text-overlay-mask dark align-items-center justify-content-between p-4">
<h4 class="mb-0 fw-normal text-white">Hair Styling</h4>
<span class="overlay-trigger-icon size-sm bg-light text-dark mx-0"><i class="bi-arrow-right"></i></span>
</div>
</div>
</a>
<a href="#" class="col-md-3 shadow col-sm-6 min-vh-40 p-0 border-right" style="background: url('demos/beauty/images/categories/2.jpg') no-repeat center center / cover;">
<div class="bg-overlay">
<div class="bg-overlay-content text-overlay-mask dark align-items-center justify-content-between p-4">
<h4 class="mb-0 fw-normal text-white">Makeup</h4>
<span class="overlay-trigger-icon size-sm bg-light text-dark mx-0"><i class="bi-arrow-right"></i></span>
</div>
</div>
</a>
<a href="#" class="col-md-3 shadow col-sm-6 min-vh-40 border-end p-0" style="background: url('demos/beauty/images/categories/3.jpg') no-repeat center center / cover;">
<div class="bg-overlay">
<div class="bg-overlay-content text-overlay-mask dark align-items-center justify-content-between p-4">
<h4 class="mb-0 fw-normal text-white">Nail Art</h4>
<span class="overlay-trigger-icon size-sm bg-light text-dark mx-0"><i class="bi-arrow-right"></i></span>
</div>
</div>
</a>
<a href="#" class="col-md-3 shadow col-sm-6 min-vh-40 p-0" style="background: url('demos/beauty/images/categories/4.jpg') no-repeat center center / cover;">
<div class="bg-overlay">
<div class="bg-overlay-content text-overlay-mask dark align-items-center justify-content-between p-4">
<h4 class="mb-0 fw-normal text-white">Spa & Scrub</h4>
<span class="overlay-trigger-icon size-sm bg-light text-dark mx-0"><i class="bi-arrow-right"></i></span>
</div>
</div>
</a>
</div>
</div>
</div>
<!-- Section Price
============================================= -->
<div id="price" class="section page-section dark pt-3" style="background: url('demos/beauty/images/others/4.jpg') no-repeat top center / cover; padding-bottom: 90px; margin-top: -1px">
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="heading-block border-bottom-0 mb-4">
<h2 class="text-transform-none ls-1 fw-bold">Featured Pricing</h2>
</div>
<table class="table table-hover table-dark bg-transparent">
<thead>
<tr>
<th scope="col" class="fw-bold text-uppercase ls-2">Description</th>
<th scope="col" class="fw-bold text-uppercase ls-2">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hair Cut & Blowdry</td>
<td>$13</td>
</tr>
<tr>
<td>Hair Color Service</td>
<td>$15</td>
</tr>
<tr>
<td>Bridal makeup</td>
<td>$23</td>
</tr>
<tr>
<td>Full Body Relaxation</td>
<td>$59</td>
</tr>
<tr>
<td>Nails Art</td>
<td>$09</td>
</tr>
<tr>
<td>Party MakeUp</td>
<td>$11</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-5">
<div class="heading-block border-bottom-0 mb-4">
<h4 class="text-transform-none ls-1 fw-bold mb-1">View Full Menu</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur laboriosam consequatur incidunt quod excepturi dignissimos illum, aut, doloremque, possimus suscipit, unde sapiente.</p>
</div>
<div class="masonry-thumbs masonry-gap-lg grid-container row row-cols-3" data-lightbox="gallery">
<a class="grid-item" href="demos/beauty/images/menu/1.jpg" data-lightbox="gallery-item"><img src="demos/beauty/images/menu/thumb-1.jpg" alt="Gallery Thumb 1"></a>
<a class="grid-item" href="demos/beauty/images/menu/2.jpg" data-lightbox="gallery-item"><img src="demos/beauty/images/menu/thumb-2.jpg" alt="Gallery Thumb 2"></a>
<a class="grid-item" href="demos/beauty/images/menu/3.jpg" data-lightbox="gallery-item"><img src="demos/beauty/images/menu/thumb-3.jpg" alt="Gallery Thumb 3"></a>
<a class="grid-item" href="demos/beauty/images/menu/4.jpg" data-lightbox="gallery-item"><img src="demos/beauty/images/menu/thumb-4.jpg" alt="Gallery Thumb 4"></a>
<a class="grid-item" href="demos/beauty/images/menu/5.jpg" data-lightbox="gallery-item"><img src="demos/beauty/images/menu/thumb-5.jpg" alt="Gallery Thumb 5"></a>
<a class="grid-item" href="demos/beauty/images/menu/6.jpg" data-lightbox="gallery-item"><img src="demos/beauty/images/menu/thumb-6.jpg" alt="Gallery Thumb 6"></a>
</div>
<h6 class="fw-normal mt-2 fst-italic text-white-50 fw-normal">* Members will get more 10% Off</h6>
</div>
</div>
</div>
</div>
<!-- Section Services
============================================= -->
<div id="services" class="section page-section bg-transparent">
<div class="container">
<div class="row">
<div class="col-md-3 mb-5 mb-md-0">
<div class="feature-box media-box color1">
<div class="fbox-media">
<a href="#"><i class="spa-hair-cut"></i></a>
</div>
<div class="fbox-content px-0">
<h3 class="text-transform-none ls-0">Hair Cut & Stylish.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi rem, facilis nobis voluptatum est.</p>
</div>
</div>
</div>
<div class="col-md-3 mb-5 mb-md-0">
<div class="feature-box media-box color2">
<div class="fbox-media">
<a href="#"><i class="spa-facial"></i></a>
</div>
<div class="fbox-content px-0">
<h3 class="text-transform-none ls-0">Facial & Makeup</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi rem, facilis nobis voluptatum est.</p>
</div>
</div>
</div>
<div class="col-md-3 mb-5 mb-md-0">
<div class="feature-box media-box color3">
<div class="fbox-media">
<a href="#"><i class="spa-nail-polish"></i></a>
</div>
<div class="fbox-content px-0">
<h3 class="text-transform-none ls-0">Manicure & Nail Art</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi rem, facilis nobis voluptatum est.</p>
</div>
</div>
</div>
<div class="col-md-3 mb-5 mb-md-0">
<div class="feature-box media-box color4">
<div class="fbox-media">
<a href="#"><i class="spa-walkway"></i></a>
</div>
<div class="fbox-content px-0">
<h3 class="text-transform-none ls-0">Spa & Massage</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi rem, facilis nobis voluptatum est.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Before - After
============================================= -->
<div class="section mb-0 dark">
<div class="container">
<div class="row">
<div class="col-xl-7 col-md-6">
<div class="twentytwenty-container">
<img src="demos/beauty/images/others/before.jpg" alt="Image 1">
<img src="demos/beauty/images/others/after.jpg" alt="Image 2">
</div>
</div>
<div class="col-xl-4 col-md-6 ps-md-5 ps-3 mt-4 mt-md-0">
<div class="heading-block border-bottom-0 mb-4">
<div class="before-heading ls-1 text-white-50" style="font-style: normal">Difference</div>
<h2 class="text-transform-none ls-1 fw-bold mt-2" style="font-size: 46px">Before & After</h2>
<p class="text-white-50 fw-normal mt-3" style="font-size: 16px;">Incidunt reprehenderit itaque dicta pariatur ipsam officiis nobis quo deleniti optio ducimus, aliquid, impedit tempore neque dolorum. Ea vitae iure magni rem. Synergistically extend future-proof meta-services whereas resource sucking e-services. Dramatically supply next-generation.</p>
</div>
<a href="#" class="button button-circle text-dark button-light bg-white text-transform-none fw-normal">learn more</a>
</div>
</div>
</div>
</div>
<!-- Section Promotions
============================================= -->
<div id="promotions" class="section bg-transparent mb-0 mt-5 page-section">
<div class="container">
<div class="row justify-content-between mb-5">
<div class="col-xl-4 col-md-5">
<a href="demos/beauty/images/others/banner.jpg" data-lightbox="image"><img src="demos/beauty/images/others/banner.jpg" alt="offer image"></a>
</div>
<div class="col-xl-8 col-md-7 ps-md-5 ps-3 mt-4 mt-md-0">
<div class="heading-block border-bottom-0">
<h2 class="text-transform-none fw-bold mt-2" style="font-size: 28px; color: #111">Special Promotions</h2>
<p class="fw-normal mt-3 lead">Rapidiously empower multidisciplinary niches with ubiquitous e-commerce. Professionally productize superior vortals without business scenarios.</p>
</div>
<div id="countdown-ex1" class="countdown mb-5" data-year="2025"></div>
<a href="#" data-scrollto="#footer" class="button button-circle button-large text-transform-none fw-normal ms-0">Book a Chair Now <i class="bi-arrow-right"></i></a>
</div>
</div>
</div>
<!-- Background Image -->
<img src="demos/beauty/images/others/nailpolish.png" alt="Image" style="position: absolute; right: 20px; bottom: -80px; width: 270px; height: auto; opacity: 1; ">
</div>
</div>
</section><!-- #content end -->
<!-- Footer
============================================= -->
<footer id="footer" class="border-0 page-section" style="background: url('demos/beauty/images/others/footer-bg2.jpg') center top / cover;">
<div class="container">
<!-- Footer Widgets
============================================= -->
<div class="footer-widgets-wrap">
<div class="row justify-content-between">
<div class="col-md-5">
<img src="demos/beauty/images/[email protected]" alt="Image" width="180">
<p class="fw-normal" style="font-size: 13px; line-height: 23px; font-family: var(--cnvs-primary-font);">Monotonectally re-engineer optimal architectures without principle-centered markets. Continually synergize B2B channels before ethical.</p>
<div class="line line-sm dark"></div>
<div class="row justify-content-between">
<div class="col-6">
<h5>Address:</h5>
<address class="mb-3" style="line-height: 1.7; font-family: var(--cnvs-primary-font);">
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
</address>
<h5 class="color fst-italic m-0">Sundays Closed.</h5>
</div>
<div class="col-6">
<div class="fr">
<div class="footer-big-contacts">
<span>Call Us:</span>
(1) 22 55412474
</div>
<div class="footer-big-contacts mt-3">
<span>Send an Email:</span>
[email protected]
</div>
</div>
</div>
</div>
</div>
<div class="col-md-5 mt-5 mt-md-4">
<div id="q-contact" class="widget quick-contact-widget form-widget">
<h4 class="text-transform-none ls-0">Quick Contact</h4>
<div class="form-result"></div>
<form id="quick-contact-form" name="quick-contact-form" action="include/form.php" method="post" class="quick-contact-form mb-0">
<div class="form-process">
<div class="css3-spinner">
<div class="css3-spinner-scaler"></div>
</div>
</div>
<input type="text" class="required form-control mb-2" id="quick-contact-form-name" name="quick-contact-form-name" value="" placeholder="Full Name">
<input type="text" class="required form-control email mb-2" id="quick-contact-form-email" name="quick-contact-form-email" value="" placeholder="Email Address">
<textarea class="required form-control mb-2 short-textarea" id="quick-contact-form-message" name="quick-contact-form-message" rows="4" cols="30" placeholder="Message"></textarea>
<input type="text" class="d-none" id="quick-contact-form-botcheck" name="quick-contact-form-botcheck" value="">
<input type="hidden" name="prefix" value="quick-contact-form-">
<button type="submit" id="quick-contact-form-submit" name="quick-contact-form-submit" class="button button-circle button-small text-transform-none fw-normal ms-0" value="submit">send email</button>
</form>
</div>
</div>
</div>
</div>
</div>
</footer><!-- #footer end -->
</div><!-- #wrapper end -->
<!-- Go To Top
============================================= -->
<div id="gotoTop" class="uil uil-angle-up rounded-circle"></div>
<!-- JavaScripts
============================================= -->
<script src="js/jquery.js"></script>
<script src="js/functions.js"></script>
<!-- SLIDER REVOLUTION 5.x SCRIPTS
============================================= -->
<script src="include/rs-plugin/js/jquery.themepunch.tools.min.js"></script>
<script src="include/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<script src="js/components/event.move.js"></script>
<script src="js/components/image-changer.js"></script>
<script>
var revapi139,
tpj;
(function() {
if (!/loaded|interactive|complete/.test(document.readyState)) document.addEventListener("DOMContentLoaded",onLoad); else onLoad();
function onLoad() {
if (tpj===undefined) { tpj = jQuery; if("off" == "on") tpj.noConflict();}
if(tpj("#rev_slider_139_1").revolution == undefined){
revslider_showDoubleJqueryError("#rev_slider_139_1");
}else{
revapi139 = tpj("#rev_slider_139_1").show().revolution({
sliderType:"standard",
jsFileLocation:"include/rs-plugin/js/",
sliderLayout:"fullscreen",
dottedOverlay:"none",
delay:9000,
navigation: {
keyboardNavigation:"off",
keyboard_direction: "horizontal",
mouseScrollNavigation:"off",
mouseScrollReverse:"default",
onHoverStop:"off",
touch:{
touchenabled:"on",
touchOnDesktop:"off",
swipe_threshold: 75,
swipe_min_touches: 1,
swipe_direction: "horizontal",
drag_block_vertical: false
}
,
arrows: {
style:"uranus",
enable:true,
hide_onmobile:false,
hide_under:0,
hide_onleave:false,
tmp:'',
left: {
h_align:"left",
v_align:"center",
h_offset:15,
v_offset:0
},
right: {
h_align:"right",
v_align:"center",
h_offset:15,
v_offset:0
}
}
,
bullets: {
enable:true,
hide_onmobile:false,
style:"bullet-bar",
hide_onleave:false,
direction:"horizontal",
h_align:"center",
v_align:"bottom",
h_offset:0,
v_offset:30,
space:5,
tmp:''
}
},
responsiveLevels:[1240,1024,778,480],
visibilityLevels:[1240,1024,778,480],
gridwidth:[1240,1024,778,480],
gridheight:[868,768,960,720],
lazyType:"none",
shadow:0,
spinner:"off",
stopLoop:"off",
stopAfterLoops:-1,
stopAtSlide:-1,
shuffle:"off",
autoHeight:"off",
fullScreenAutoWidth:"on",
fullScreenAlignForce:"on",
fullScreenOffsetContainer: "",
fullScreenOffset: "0px",
hideThumbsOnMobile:"off",
hideSliderAtLimit:0,
hideCaptionAtLimit:0,
hideAllCaptionAtLilmit:0,
debugMode:false,
fallbacks: {
simplifyAll:"off",
nextSlideOnWindowFocus:"off",
disableFocusListener:false,
}
});
revapi139.on("revolution.slide.onloaded",function (e) {
revapi139.addClass("tiny_bullet_slider");
});
}; /* END OF revapi call */
}; /* END OF ON LOAD FUNCTION */
}()); /* END OF WRAPPING FUNCTION */
jQuery(window).on( 'load', function(){
jQuery(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.5});
});
</script>
</body>
</html>