897 lines
50 KiB
HTML
897 lines
50 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html class="no-js" lang="en">
|
|||
|
|
<head>
|
|||
|
|
<title>Crafto - The Multipurpose HTML5 Template</title>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|||
|
|
<meta name="author" content="ThemeZaa">
|
|||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
|||
|
|
<meta name="description" content="Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 52+ ready demos.">
|
|||
|
|
|
|||
|
|
<link rel="shortcut icon" href="images/favicon.png">
|
|||
|
|
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
|
|||
|
|
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
|
|||
|
|
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
|||
|
|
|
|||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
|
|||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|||
|
|
|
|||
|
|
<link rel="stylesheet" href="css/vendors.min.css" />
|
|||
|
|
<link rel="stylesheet" href="css/icon.min.css" />
|
|||
|
|
<link rel="stylesheet" href="css/style.min.css" />
|
|||
|
|
<link rel="stylesheet" href="css/responsive.min.css" />
|
|||
|
|
<link rel="stylesheet" href="demos/barber/barber.css" />
|
|||
|
|
</head>
|
|||
|
|
<body data-mobile-nav-style="classic">
|
|||
|
|
|
|||
|
|
<header>
|
|||
|
|
|
|||
|
|
<nav class="navbar navbar-expand-lg header-transparent bg-transparent center-logo disable-fixed">
|
|||
|
|
<div class="container-fluid">
|
|||
|
|
<div class="col-auto col-lg-2 menu-logo">
|
|||
|
|
<div class="d-none d-lg-block">
|
|||
|
|
<div class="fs-18 lg-fs-16"><a href="tel:1800222000" class="widget-text text-white-hover"><i class="feather icon-feather-phone-call icon-small me-10px lg-me-5px"></i>1 800 222 000</a></div>
|
|||
|
|
</div>
|
|||
|
|
<a class="navbar-brand" href="demo-barber.html">
|
|||
|
|
<img src="images/demo-barber-logo-black.png" data-at2x="images/demo-barber-logo-black@2x.png" alt class="default-logo">
|
|||
|
|
<img src="images/demo-barber-logo-black.png" data-at2x="images/demo-barber-logo-black@2x.png" alt class="alt-logo">
|
|||
|
|
<img src="images/demo-barber-logo-black.png" data-at2x="images/demo-barber-logo-black@2x.png" alt class="mobile-logo">
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-auto col-lg-8 menu-order">
|
|||
|
|
<button class="navbar-toggler float-end" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
|
|||
|
|
<span class="navbar-toggler-line"></span>
|
|||
|
|
<span class="navbar-toggler-line"></span>
|
|||
|
|
<span class="navbar-toggler-line"></span>
|
|||
|
|
<span class="navbar-toggler-line"></span>
|
|||
|
|
</button>
|
|||
|
|
<div class="collapse navbar-collapse justify-content-between" id="navbarNav">
|
|||
|
|
<ul class="navbar-nav navbar-left justify-content-end">
|
|||
|
|
<li class="nav-item"><a href="demo-barber.html#home" class="nav-link inner-link">Home</a></li>
|
|||
|
|
<li class="nav-item"><a href="demo-barber.html#about" class="nav-link inner-link">About</a></li>
|
|||
|
|
<li class="nav-item"><a href="demo-barber.html#services" class="nav-link inner-link">Services</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul class="navbar-nav navbar-right justify-content-start">
|
|||
|
|
<li class="nav-item"><a href="demo-barber.html#pricing" class="nav-link inner-link">Pricing</a></li>
|
|||
|
|
<li class="nav-item"><a href="demo-barber.html#barbers" class="nav-link inner-link">Barbers</a></li>
|
|||
|
|
<li class="nav-item"><a href="demo-barber.html#contact" class="nav-link inner-link">Contact</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-auto col-lg-2 text-end">
|
|||
|
|
<div class="header-icon">
|
|||
|
|
<div class="header-social-icon icon">
|
|||
|
|
<a href="https://www.facebook.com" target="_blank"><i class="fa-brands fa-facebook-f"></i></a>
|
|||
|
|
<a href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i></a>
|
|||
|
|
<a href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section id="home" class="full-screen bg-dark-gray ipad-top-space-margin position-relative md-h-600px sm-h-500px" data-parallax-background-ratio="0.5" style="background-image: url('images/demo-barber-home-bg.jpg')">
|
|||
|
|
<div class="container h-100">
|
|||
|
|
<div class="row align-items-center justify-content-center h-100">
|
|||
|
|
<div class="col-lg-9 col-md-12 text-center" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|||
|
|
<span class="fs-16 text-white text-uppercase text-shadow-double-large ls-3px d-block mb-25px sm-mb-15px">London popular barber</span>
|
|||
|
|
<h1 class="fs-90 md-fs-80 ls-minus-4px alt-font text-white mb-35px md-mb-20px text-shadow-double-large xs-fs-60 xs-ls-minus-2px">Talented men's barber studio</h1>
|
|||
|
|
<a href="demo-barber.html#appointment" class="btn btn-extra-large btn-round-edge btn-box-shadow btn-switch-text btn-white left-icon section-link">
|
|||
|
|
<span>
|
|||
|
|
<span><i class="feather icon-feather-calendar"></i></span>
|
|||
|
|
<span class="btn-double-text" data-text="Online appointment">Online appointment</span>
|
|||
|
|
</span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="text-center position-absolute left-0px bottom-50px md-bottom-30px w-100 animation-float">
|
|||
|
|
<a href="demo-barber.html#about" class="d-block text-white section-link">
|
|||
|
|
<i class="bi bi-mouse icon-extra-medium lh-0px"></i>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section id="about" class="bg-very-light-yellow position-relative pb-8">
|
|||
|
|
<div class="fs-200 lg-fs-150 alt-font text-base-color position-absolute left-0px top-90px sm-top-50px pe-5 ps-5 ls-minus-10px" data-anime="{ "translateX": [-50, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">2023<span class="h-1px w-100 bg-base-color position-absolute top-50 start-0 d-block opacity-4"></span></div>
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row align-items-center mb-50px sm-mb-40px">
|
|||
|
|
<div class="col-xl-5 col-lg-6 align-self-end mt-15 xl-mt-18 md-mt-22 xs-mt-30" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|||
|
|
<h2 class="fs-60 alt-font fw-400 ls-minus-2px text-dark-gray mb-15px shadow-none" data-shadow-animation="true" data-animation-delay="700">Award <span class="text-highlight">winning<span class="bg-base-color h-2px bottom-8px separator-animation"></span></span> barber studio.</h2>
|
|||
|
|
<p class="w-90 xl-w-100 mb-30px sm-mb-25px">Our barbers are carefully hand-picked to ensure the finest service in our barbershops around London the UK and the world. We’re well trusted to deliver excellence with over 5000+ customer reviews.</p>
|
|||
|
|
<div class="d-inline-block">
|
|||
|
|
<a href="demo-barber.html#services" class="btn btn-large btn-round-edge btn-box-shadow btn-switch-text btn-dark-gray left-icon section-link me-20px">
|
|||
|
|
<span>
|
|||
|
|
<span><i class="bi bi-scissors"></i></span>
|
|||
|
|
<span class="btn-double-text" data-text="Explore services">Explore services</span>
|
|||
|
|
</span>
|
|||
|
|
</a>
|
|||
|
|
<a href="demo-barber.html#barbers" class="btn btn-link btn-extra-large btn-hover-animation-switch text-dark-gray section-link">
|
|||
|
|
<span>
|
|||
|
|
<span class="btn-text">Our barbers</span>
|
|||
|
|
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
|
|||
|
|
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
|
|||
|
|
</span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-lg-6 offset-xl-1 position-relative md-mt-45px md-mb-50px">
|
|||
|
|
<div class="position-relative w-70 md-w-60" data-animation-delay="100" data-shadow-animation="true" data-bottom-top="transform: translateY(50px)" data-top-bottom="transform: translateY(-50px)">
|
|||
|
|
<img src="images/demo-barber-home-01.jpg" class="border-radius-6px" alt>
|
|||
|
|
<div class="position-absolute right-minus-150px md-right-minus-120px top-30px xs-top-20px text-end">
|
|||
|
|
<span class="fs-28 alt-font text-dark-gray d-block ls-minus-1px me-10px">since</span>
|
|||
|
|
<span class="fs-90 alt-font text-base-color d-block ls-minus-5px">1998</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="position-absolute right-15px bottom-minus-60px border-radius-6px lg-w-65 md-w-50 overflow-hidden" data-shadow-animation="true" data-animation-delay="400" data-bottom-top="transform: translateY(-15px)" data-top-bottom="transform: translateY(15px)">
|
|||
|
|
<img src="images/demo-barber-home-02.jpg" class="box-shadow-quadruple-large" alt>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section id="services" class="bg-medium-yellow position-relative overlap-height pt-4">
|
|||
|
|
<div class="position-absolute left-0px top-minus-50px md-top-minus-30px sm-top-minus-25px xs-top-minus-15px background-position-left-top w-100 h-100px md-h-50px background-size-100 background-no-repeat" style="background-image: url('images/demo-barber-home-bg-up.png')"></div>
|
|||
|
|
<div class="position-absolute left-0px top-minus-130px lg-top-minus-90px d-none d-md-block"><img src="images/demo-barber-home-03.png" data-bottom-top="transform: translateY(50px)" data-top-bottom="transform: translateY(-50px)" alt /></div>
|
|||
|
|
<div class="container overlap-gap-section">
|
|||
|
|
<div class="row mb-3">
|
|||
|
|
<div class="col-12 text-center" data-anime="{ "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|||
|
|
<h2 class="alt-font ls-minus-2px text-dark-gray shadow-none" data-shadow-animation="true" data-animation-delay="700">Barbershop <span class="text-highlight">services<span class="bg-base-color h-2px bottom-8px separator-animation"></span></span></h2>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row row-cols-1 row-cols-lg-4 row-cols-md-2 row-cols-sm-2 g-0 align-items-center mb-5 md-mb-7" data-anime="{ "el": "childs", "translateX": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|||
|
|
|
|||
|
|
<div class="col services-box-style-07 text-center last-paragraph-no-margin border-end border-color-transparent-dark-very-light md-mb-50px xs-border-end-0">
|
|||
|
|
<div class="pe-50px ps-50px pb-40px lg-p-30px lg-pt-0">
|
|||
|
|
<div class="position-relative ms-auto me-auto mb-25px">
|
|||
|
|
<img src="images/demo-barber-icon-01.svg" class="h-70px position-relative z-index-1 mt-35px" alt>
|
|||
|
|
<div class="h-85px w-85px rounded-circle bg-very-light-yellow position-absolute top-0 start-50 translate-middle-x"></div>
|
|||
|
|
</div>
|
|||
|
|
<span class="fs-20 fw-700 text-dark-gray d-block mb-5px">Haircutting</span>
|
|||
|
|
<p class="lh-28">Your choice of hairstyle is pivotal in the way. </p>
|
|||
|
|
</div>
|
|||
|
|
<div class="d-flex flex-column overflow-hidden w-100 justify-content-center position-relative">
|
|||
|
|
<div class="fs-14 fw-700 text-uppercase text-dark-gray border-top border-bottom border-color-transparent-dark-very-light pt-10px pb-10px "><span class="text-down d-block">Starting from $35</span></div>
|
|||
|
|
<div class="btn-hover d-flex align-items-center justify-content-center bg-dark-gray">
|
|||
|
|
<a href="demo-barber.html#appointment" class="inner-link btn btn-link btn-hover-animation-switch btn-large text-white">
|
|||
|
|
<span>
|
|||
|
|
<span class="btn-text">Request an appointment</span>
|
|||
|
|
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
|
|||
|
|
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
|
|||
|
|
</span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col services-box-style-07 text-center last-paragraph-no-margin border-end md-border-end-0 border-color-transparent-dark-very-light md-mb-50px">
|
|||
|
|
<div class="pe-50px ps-50px pb-40px lg-p-30px lg-pt-0">
|
|||
|
|
<div class="position-relative ms-auto me-auto mb-25px">
|
|||
|
|
<img src="images/demo-barber-icon-02.svg" class="h-70px position-relative z-index-1 mt-35px" alt>
|
|||
|
|
<div class="h-85px w-85px rounded-circle bg-very-light-yellow position-absolute top-0 start-50 translate-middle-x"></div>
|
|||
|
|
</div>
|
|||
|
|
<span class="fs-20 fw-700 text-dark-gray d-block mb-5px">Shaving</span>
|
|||
|
|
<p class="lh-28">Your choice of hairstyle is pivotal in the way. </p>
|
|||
|
|
</div>
|
|||
|
|
<div class="d-flex flex-column overflow-hidden w-100 justify-content-center position-relative">
|
|||
|
|
<div class="fs-14 fw-700 text-uppercase text-dark-gray border-top border-bottom border-color-transparent-dark-very-light pt-10px pb-10px "><span class="text-down d-block">Starting from $25</span></div>
|
|||
|
|
<div class="btn-hover d-flex align-items-center justify-content-center bg-dark-gray">
|
|||
|
|
<a href="demo-barber.html#appointment" class="inner-link btn btn-link btn-hover-animation-switch btn-large text-white">
|
|||
|
|
<span>
|
|||
|
|
<span class="btn-text">Request an appointment</span>
|
|||
|
|
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
|
|||
|
|
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
|
|||
|
|
</span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col services-box-style-07 text-center last-paragraph-no-margin border-end border-color-transparent-dark-very-light xs-border-end-0 xs-mb-40px">
|
|||
|
|
<div class="pe-50px ps-50px pb-40px lg-p-30px lg-pt-0">
|
|||
|
|
<div class="position-relative ms-auto me-auto mb-25px">
|
|||
|
|
<img src="images/demo-barber-icon-03.svg" class="h-70px position-relative z-index-1 mt-35px" alt>
|
|||
|
|
<div class="h-85px w-85px rounded-circle bg-very-light-yellow position-absolute top-0 start-50 translate-middle-x"></div>
|
|||
|
|
</div>
|
|||
|
|
<span class="fs-20 fw-700 text-dark-gray d-block mb-5px">Styling</span>
|
|||
|
|
<p class="lh-28">Your choice of hairstyle is pivotal in the way. </p>
|
|||
|
|
</div>
|
|||
|
|
<div class="d-flex flex-column overflow-hidden w-100 justify-content-center position-relative">
|
|||
|
|
<div class="fs-14 fw-700 text-uppercase text-dark-gray border-top border-bottom border-color-transparent-dark-very-light pt-10px pb-10px "><span class="text-down d-block">Starting from $40</span></div>
|
|||
|
|
<div class="btn-hover d-flex align-items-center justify-content-center bg-dark-gray">
|
|||
|
|
<a href="demo-barber.html#appointment" class="inner-link btn btn-link btn-hover-animation-switch btn-large text-white">
|
|||
|
|
<span>
|
|||
|
|
<span class="btn-text">Request an appointment</span>
|
|||
|
|
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
|
|||
|
|
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
|
|||
|
|
</span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col services-box-style-07 text-center last-paragraph-no-margin">
|
|||
|
|
<div class="pe-50px ps-50px pb-40px lg-p-30px lg-pt-0">
|
|||
|
|
<div class="position-relative ms-auto me-auto mb-25px">
|
|||
|
|
<img src="images/demo-barber-icon-04.svg" class="h-70px position-relative z-index-1 mt-35px" alt>
|
|||
|
|
<div class="h-85px w-85px rounded-circle bg-very-light-yellow position-absolute top-0 start-50 translate-middle-x"></div>
|
|||
|
|
</div>
|
|||
|
|
<span class="fs-20 fw-700 text-dark-gray d-block mb-5px">Trimming</span>
|
|||
|
|
<p class="lh-28">Your choice of hairstyle is pivotal in the way. </p>
|
|||
|
|
</div>
|
|||
|
|
<div class="d-flex flex-column overflow-hidden w-100 justify-content-center position-relative">
|
|||
|
|
<div class="fs-14 fw-700 text-uppercase text-dark-gray border-top border-bottom border-color-transparent-dark-very-light pt-10px pb-10px "><span class="text-down d-block">Starting from $15</span></div>
|
|||
|
|
<div class="btn-hover d-flex align-items-center justify-content-center bg-dark-gray">
|
|||
|
|
<a href="demo-barber.html#appointment" class="inner-link btn btn-link btn-hover-animation-switch btn-large text-white">
|
|||
|
|
<span>
|
|||
|
|
<span class="btn-text">Request an appointment</span>
|
|||
|
|
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
|
|||
|
|
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
|
|||
|
|
</span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="row justify-content-center">
|
|||
|
|
<div class="col-auto text-center last-paragraph-no-margin">
|
|||
|
|
<div class="d-inline-block align-middle me-5px">
|
|||
|
|
<img src="images/demo-barber-icon-05.png" class="h-20px" alt>
|
|||
|
|
</div>
|
|||
|
|
<div class="fs-20 ls-minus-05px text-dark-gray d-inline-block align-middle">We're dedicated to empowering men to look and feel fantastic.</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section class="bg-very-light-gray p-0">
|
|||
|
|
<div class="container-fluid p-0">
|
|||
|
|
<div class="row g-0 position-relative overlap-section">
|
|||
|
|
<div class="col-md-12">
|
|||
|
|
<div class="swiper image-gallery-style-01 swiper-width-auto" data-slider-options="{ "slidesPerView": "auto", "spaceBetween": 25, "loop": true, "pagination": { "el": ".slider-four-slide-pagination", "clickable": true }, "autoplay": { "delay": 3000, "disableOnInteraction": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "effect": "slide" }" data-gallery-box="true">
|
|||
|
|
<div class="swiper-wrapper">
|
|||
|
|
|
|||
|
|
<div class="swiper-slide transition-inner-all">
|
|||
|
|
<div class="gallery-box">
|
|||
|
|
<a href="images/demo-barber-home-04.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
|||
|
|
<div class="position-relative gallery-image bg-dark-gray overflow-hidden border-radius-6px">
|
|||
|
|
<img src="images/demo-barber-home-04.jpg" class="h-480px sm-h-250px" alt />
|
|||
|
|
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
|||
|
|
<div class="d-flex align-items-center justify-content-center w-80px h-80px rounded-circle bg-white">
|
|||
|
|
<i class="feather icon-feather-zoom-in text-dark-gray icon-extra-medium"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide transition-inner-all">
|
|||
|
|
<div class="gallery-box">
|
|||
|
|
<a href="images/demo-barber-home-05.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
|||
|
|
<div class="position-relative gallery-image bg-dark-gray overflow-hidden border-radius-6px">
|
|||
|
|
<img src="images/demo-barber-home-05.jpg" class="h-480px sm-h-250px" alt />
|
|||
|
|
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
|||
|
|
<div class="d-flex align-items-center justify-content-center w-80px h-80px rounded-circle bg-white">
|
|||
|
|
<i class="feather icon-feather-zoom-in text-dark-gray icon-extra-medium"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide transition-inner-all">
|
|||
|
|
<div class="gallery-box">
|
|||
|
|
<a href="images/demo-barber-home-06.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
|||
|
|
<div class="position-relative gallery-image bg-dark-gray overflow-hidden border-radius-6px">
|
|||
|
|
<img src="images/demo-barber-home-06.jpg" class="h-480px sm-h-250px" alt />
|
|||
|
|
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
|||
|
|
<div class="d-flex align-items-center justify-content-center w-80px h-80px rounded-circle bg-white">
|
|||
|
|
<i class="feather icon-feather-zoom-in text-dark-gray icon-extra-medium"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide transition-inner-all">
|
|||
|
|
<div class="gallery-box">
|
|||
|
|
<a href="images/demo-barber-home-07.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
|||
|
|
<div class="position-relative gallery-image bg-dark-gray overflow-hidden border-radius-6px">
|
|||
|
|
<img src="images/demo-barber-home-07.jpg" class="h-480px sm-h-250px" alt />
|
|||
|
|
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
|||
|
|
<div class="d-flex align-items-center justify-content-center w-80px h-80px rounded-circle bg-white">
|
|||
|
|
<i class="feather icon-feather-zoom-in text-dark-gray icon-extra-medium"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide transition-inner-all">
|
|||
|
|
<div class="gallery-box">
|
|||
|
|
<a href="images/demo-barber-home-08.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
|||
|
|
<div class="position-relative gallery-image bg-dark-gray overflow-hidden border-radius-6px">
|
|||
|
|
<img src="images/demo-barber-home-08.jpg" class="h-480px sm-h-250px" alt />
|
|||
|
|
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
|||
|
|
<div class="d-flex align-items-center justify-content-center w-80px h-80px rounded-circle bg-white">
|
|||
|
|
<i class="feather icon-feather-zoom-in text-dark-gray icon-extra-medium"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide transition-inner-all">
|
|||
|
|
<div class="gallery-box">
|
|||
|
|
<a href="images/demo-barber-home-05.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
|||
|
|
<div class="position-relative gallery-image bg-dark-gray overflow-hidden border-radius-6px">
|
|||
|
|
<img src="images/demo-barber-home-05.jpg" class="h-480px sm-h-250px" alt />
|
|||
|
|
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
|||
|
|
<div class="d-flex align-items-center justify-content-center w-80px h-80px rounded-circle bg-white">
|
|||
|
|
<i class="feather icon-feather-zoom-in text-dark-gray icon-extra-medium"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide transition-inner-all">
|
|||
|
|
<div class="gallery-box">
|
|||
|
|
<a href="images/demo-barber-home-06.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
|||
|
|
<div class="position-relative gallery-image bg-dark-gray overflow-hidden border-radius-6px">
|
|||
|
|
<img src="images/demo-barber-home-06.jpg" class="h-480px sm-h-250px" alt />
|
|||
|
|
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
|||
|
|
<div class="d-flex align-items-center justify-content-center w-80px h-80px rounded-circle bg-white">
|
|||
|
|
<i class="feather icon-feather-zoom-in text-dark-gray icon-extra-medium"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide transition-inner-all">
|
|||
|
|
<div class="gallery-box">
|
|||
|
|
<a href="images/demo-barber-home-07.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
|||
|
|
<div class="position-relative gallery-image bg-dark-gray overflow-hidden border-radius-6px">
|
|||
|
|
<img src="images/demo-barber-home-07.jpg" class="h-480px sm-h-250px" alt />
|
|||
|
|
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
|||
|
|
<div class="d-flex align-items-center justify-content-center w-80px h-80px rounded-circle bg-white">
|
|||
|
|
<i class="feather icon-feather-zoom-in text-dark-gray icon-extra-medium"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section id="pricing" class="bg-very-light-yellow overlap-height">
|
|||
|
|
<div class="container overlap-gap-section">
|
|||
|
|
<div class="row mb-1">
|
|||
|
|
<div class="col-12 text-center" data-anime="{ "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue":200, "easing": "easeOutQuad" }">
|
|||
|
|
<h2 class="alt-font ls-minus-2px text-dark-gray shadow-none" data-shadow-animation="true" data-animation-delay="700">Flexible <span class="text-highlight">pricing<span class="bg-base-color h-2px bottom-8px separator-animation"></span></span></h2>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row row-cols-1 row-cols-lg-2 row-cols-md-1 sm-mb-10px xs-mb-0">
|
|||
|
|
<div class="col">
|
|||
|
|
<ul class="pricing-table-style-13" data-anime="{ "el": "childs", "translateX": [-30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 200, "easing": "easeOutQuad" }">
|
|||
|
|
<li class="flex-column last-paragraph-no-margin overflow-hidden p-0">
|
|||
|
|
<div class="w-100 ps-35px pe-35px pt-15px pb-15px xs-pe-15px xs-ps-15px">
|
|||
|
|
<div class="fs-19 ls-05px d-flex align-items-baseline w-100">
|
|||
|
|
<span class="fw-700 text-dark-gray ls-minus-05px">Traditional hair styling</span>
|
|||
|
|
<div class="text-dark-gray ms-auto flex-shrink-0">$10.00</div>
|
|||
|
|
</div>
|
|||
|
|
<p>Lorem ipsum has been the industry.</p>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="flex-column last-paragraph-no-margin overflow-hidden border border-color-light-yellow border-radius-4px p-0 mt-20px mb-20px">
|
|||
|
|
<div class="fs-13 text-uppercase lh-38 fw-700 w-100 bg-light-yellow text-dark-gray ps-30px pe-30px xs-ps-15px xs-pe-15px">Barber specials</div>
|
|||
|
|
<div class="w-100 ps-35px pe-35px pt-25px pb-25px xs-pe-15px xs-ps-15px">
|
|||
|
|
<div class="fs-19 ls-05px d-flex align-items-baseline w-100">
|
|||
|
|
<span class="fw-700 text-dark-gray ls-minus-05px">Classic haircut and washing</span>
|
|||
|
|
<div class="text-dark-gray ms-auto flex-shrink-0">$10.00</div>
|
|||
|
|
</div>
|
|||
|
|
<p>Lorem ipsum has been the industry.</p>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="flex-column last-paragraph-no-margin overflow-hidden p-0">
|
|||
|
|
<div class="w-100 ps-35px pe-35px pt-15px pb-15px xs-pe-15px xs-ps-15px">
|
|||
|
|
<div class="fs-19 ls-05px d-flex align-items-baseline w-100">
|
|||
|
|
<span class="fw-700 text-dark-gray ls-minus-05px">Arranging long beard</span>
|
|||
|
|
<div class="text-dark-gray ms-auto flex-shrink-0">$08.00</div>
|
|||
|
|
</div>
|
|||
|
|
<p>Lorem ipsum has been the industry.</p>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="col">
|
|||
|
|
<ul class="pricing-table-style-13" data-anime="{ "el": "childs", "translateX": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 200, "easing": "easeOutQuad" }">
|
|||
|
|
<li class="flex-column last-paragraph-no-margin overflow-hidden p-0">
|
|||
|
|
<div class="w-100 ps-35px pe-35px pt-15px pb-15px xs-pe-15px xs-ps-15px">
|
|||
|
|
<div class="fs-19 ls-05px d-flex align-items-baseline w-100">
|
|||
|
|
<span class="fw-700 text-dark-gray ls-minus-05px">Stylization beard</span>
|
|||
|
|
<div class="text-dark-gray ms-auto flex-shrink-0">$12.00</div>
|
|||
|
|
</div>
|
|||
|
|
<p>Lorem ipsum has been the industry.</p>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="flex-column last-paragraph-no-margin overflow-hidden border border-color-light-yellow border-radius-4px p-0 mt-20px mb-20px">
|
|||
|
|
<div class="fs-13 text-uppercase lh-38 fw-700 w-100 bg-light-yellow text-dark-gray ps-30px pe-30px xs-ps-15px xs-pe-15px">Barber specials</div>
|
|||
|
|
<div class="w-100 ps-35px pe-35px pt-25px pb-25px xs-pe-15px xs-ps-15px">
|
|||
|
|
<div class="fs-19 ls-05px d-flex align-items-baseline w-100">
|
|||
|
|
<span class="fw-700 text-dark-gray ls-minus-05px">Trimming long beard</span>
|
|||
|
|
<div class="text-dark-gray ms-auto flex-shrink-0">$11.00</div>
|
|||
|
|
</div>
|
|||
|
|
<p>Lorem ipsum has been the industry.</p>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="flex-column last-paragraph-no-margin overflow-hidden p-0">
|
|||
|
|
<div class="w-100 ps-35px pe-35px pt-15px pb-15px xs-pe-15px xs-ps-15px">
|
|||
|
|
<div class="fs-19 ls-05px d-flex align-items-baseline w-100">
|
|||
|
|
<span class="fw-700 text-dark-gray ls-minus-05px">Beard and hair washing</span>
|
|||
|
|
<div class="text-dark-gray ms-auto flex-shrink-0">$10.00</div>
|
|||
|
|
</div>
|
|||
|
|
<p>Lorem ipsum has been the industry.</p>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section class="bg-medium-yellow position-relative xs-pb-15px">
|
|||
|
|
<div class="position-absolute left-0px top-minus-50px md-top-minus-30px sm-top-minus-25px xs-top-minus-15px background-position-left-top w-100 h-100px md-h-50px background-size-100 background-no-repeat" style="background-image: url('images/demo-barber-home-bg-up.png')"></div>
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row justify-content-center overlap-section mb-5 overflow-hidden">
|
|||
|
|
<div class="col-12" data-atropos>
|
|||
|
|
<div class="position-absolute top-0px left-0px w-100 h-100 z-index-2" data-atropos-offset="2">
|
|||
|
|
<a href="https://www.youtube.com/watch?v=cfXHhfNy7tU" class="absolute-middle-center text-center border border-1 border-color-transparent-white-very-light rounded-circle video-icon-box video-icon-extra-large popup-youtube">
|
|||
|
|
<span>
|
|||
|
|
<span class="video-icon text-white text-uppercase ls-1px">Play</span>
|
|||
|
|
</span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="atropos-scale">
|
|||
|
|
<div class="atropos-rotate">
|
|||
|
|
<div class="atropos-inner">
|
|||
|
|
<div class="border-radius-6px h-650px md-h-450px sm-h-350px d-flex align-items-end justify-content-center overflow-hidden cover-background" style="background-image: url('images/demo-barber-home-09.jpg')" data-atropos-offset="-2">
|
|||
|
|
<div class="opacity-very-light bg-dark-gray"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row justify-content-center mb-5 xs-mb-0">
|
|||
|
|
<div class="col-auto text-center last-paragraph-no-margin">
|
|||
|
|
<div class="d-inline-block align-middle me-5px">
|
|||
|
|
<i class="bi bi-heart-fill d-flex text-red icon-extra-medium"></i>
|
|||
|
|
</div>
|
|||
|
|
<div class="fs-22 ls-minus-05px text-dark-gray d-inline-block align-middle">We've worked with the world most <span class="fs-26 alt-font text-decoration-line-bottom border-color-base-color ls-minus-1px">iconic premium brands.</span></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row row-cols-1 row-cols-lg-4 row-cols-md-4 row-cols-sm-2 clients-style-04" data-anime="{ "el": "childs", "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 200, "easing": "easeOutQuad" }">
|
|||
|
|
|
|||
|
|
<div class="col text-center border-end xs-border-end-0 border-bottom sm-border-right border-color-transparent-dark-very-light transition-inner-all pt-40px pb-40px sm-pt-30px sm-pb-30px">
|
|||
|
|
<div class="client-box">
|
|||
|
|
<a href="demo-barber.html#"><img src="images/demo-barber-home-client-01.png" alt /></a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col text-center border-end border-bottom border-color-transparent-dark-very-light sm-border-end-0 transition-inner-all pt-40px pb-40px sm-pt-30px sm-pb-30px">
|
|||
|
|
<div class="client-box">
|
|||
|
|
<a href="demo-barber.html#"><img src="images/demo-barber-home-client-02.png" alt /></a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col text-center border-end xs-border-end-0 border-bottom sm-border-right border-color-transparent-dark-very-light transition-inner-all pt-40px pb-40px sm-pt-30px sm-pb-30px">
|
|||
|
|
<div class="client-box">
|
|||
|
|
<a href="demo-barber.html#"><img src="images/demo-barber-home-client-03.png" alt /></a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col text-center border-bottom border-color-transparent-dark-very-light sm-border-end-0 transition-inner-all pt-40px pb-40px sm-pt-30px sm-pb-30px">
|
|||
|
|
<div class="client-box">
|
|||
|
|
<a href="demo-barber.html#"><img src="images/demo-barber-home-client-04.png" alt /></a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col text-center border-end xs-border-end-0 border-color-transparent-dark-very-light sm-border-right sm-border-bottom transition-inner-all pt-40px pb-40px sm-pt-30px sm-pb-30px">
|
|||
|
|
<div class="client-box">
|
|||
|
|
<a href="demo-barber.html#"><img src="images/demo-barber-home-client-05.png" alt /></a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col text-center border-end border-color-transparent-dark-very-light sm-border-end-0 sm-border-bottom transition-inner-all pt-40px pb-40px sm-pt-30px sm-pb-30px">
|
|||
|
|
<div class="client-box">
|
|||
|
|
<a href="demo-barber.html#"><img src="images/demo-barber-home-client-06.png" alt /></a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col text-center border-end xs-border-end-0 border-color-transparent-dark-very-light sm-border-right sm-border-bottom sm-border-bottom-0 transition-inner-all pt-40px pb-40px sm-pt-30px sm-pb-30px">
|
|||
|
|
<div class="client-box">
|
|||
|
|
<a href="demo-barber.html#"><img src="images/demo-barber-home-client-07.png" alt /></a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col text-center transition-inner-all pt-40px pb-40px sm-border-bottom xs-border-top sm-border-bottom-0 border-color-transparent-dark-very-light sm-pt-30px sm-pb-30px">
|
|||
|
|
<div class="client-box">
|
|||
|
|
<a href="demo-barber.html#"><img src="images/demo-barber-home-client-08.png" alt /></a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section id="barbers" class="bg-very-light-yellow overlap-height position-relative">
|
|||
|
|
<div class="position-absolute left-0px top-minus-50px lg-top-minus-10px background-position-left-top w-100 h-100px background-size-100 background-no-repeat" style="background-image: url('images/demo-barber-home-bg-down.png')"></div>
|
|||
|
|
<div class="container overlap-gap-section">
|
|||
|
|
<div class="row mb-3" data-anime="{ "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue":200, "easing": "easeOutQuad" }">
|
|||
|
|
<div class="col-12 text-center">
|
|||
|
|
<h2 class="alt-font ls-minus-2px text-dark-gray shadow-none" data-shadow-animation="true" data-animation-delay="700">Talented <span class="text-highlight">barbers<span class="bg-base-color h-2px bottom-8px separator-animation"></span></span></h2>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row row-cols-1 row-cols-lg-4 row-cols-md-3 row-cols-sm-2 justify-content-center mb-5" data-anime="{ "el": "childs", "translateY": [15, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 200, "easing": "easeOutQuad" }">
|
|||
|
|
|
|||
|
|
<div class="col team-style-08 border-radius-6px md-mb-30px">
|
|||
|
|
<figure class="mb-0 position-relative">
|
|||
|
|
<img class="border-radius-6px" src="images/demo-barber-home-team-01.jpg" alt />
|
|||
|
|
<figcaption class="w-100 h-100 d-flex align-items-end p-12 lg-p-8 bg-gradient-base-transparent border-radius-6px">
|
|||
|
|
<div class="w-100">
|
|||
|
|
<span class="team-member-name fs-18 text-white d-block">Michal ruheen</span>
|
|||
|
|
<span class="member-designation lh-20 text-white d-block">Hair stylist</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="social-icon d-flex flex-column flex-shrink-1">
|
|||
|
|
<a href="https://www.instagram.com/" target="_blank" class="text-white"><i class="fa-brands fa-instagram icon-small"></i></a>
|
|||
|
|
</div>
|
|||
|
|
</figcaption>
|
|||
|
|
</figure>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col team-style-08 border-radius-6px md-mb-30px">
|
|||
|
|
<figure class="mb-0 position-relative">
|
|||
|
|
<img class="border-radius-6px" src="images/demo-barber-home-team-02.jpg" alt />
|
|||
|
|
<figcaption class="w-100 h-100 d-flex align-items-end p-12 lg-p-8 bg-gradient-base-transparent border-radius-6px">
|
|||
|
|
<div class="w-100">
|
|||
|
|
<span class="team-member-name fs-18 text-white d-block">Jessica dover</span>
|
|||
|
|
<span class="member-designation lh-20 text-white d-block">Hair stylist</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="social-icon d-flex flex-column flex-shrink-1">
|
|||
|
|
<a href="https://www.facebook.com/" target="_blank" class="text-white"><i class="fa-brands fa-facebook-f icon-small"></i></a>
|
|||
|
|
</div>
|
|||
|
|
</figcaption>
|
|||
|
|
</figure>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col team-style-08 xs-mb-30px">
|
|||
|
|
<figure class="mb-0 position-relative">
|
|||
|
|
<img class="border-radius-6px" src="images/demo-barber-home-team-03.jpg" alt />
|
|||
|
|
<figcaption class="w-100 h-100 d-flex align-items-end p-12 lg-p-8 bg-gradient-base-transparent border-radius-6px">
|
|||
|
|
<div class="w-100">
|
|||
|
|
<span class="team-member-name fs-18 text-white d-block">Johncy parker</span>
|
|||
|
|
<span class="member-designation lh-20 text-white d-block">Beard stylist</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="social-icon d-flex flex-column flex-shrink-1">
|
|||
|
|
<a href="https://www.twitter.com" target="_blank" class="text-white"><i class="fa-brands fa-twitter icon-small"></i><span></span></a>
|
|||
|
|
</div>
|
|||
|
|
</figcaption>
|
|||
|
|
</figure>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col team-style-08">
|
|||
|
|
<figure class="mb-0 position-relative">
|
|||
|
|
<img class="border-radius-6px" src="images/demo-barber-home-team-04.jpg" alt />
|
|||
|
|
<figcaption class="w-100 h-100 d-flex align-items-end p-12 lg-p-8 bg-gradient-base-transparent border-radius-6px">
|
|||
|
|
<div class="w-100">
|
|||
|
|
<span class="team-member-name fs-18 text-white d-block">Jemmy watson</span>
|
|||
|
|
<span class="member-designation lh-20 text-white d-block">Hair washer</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="social-icon d-flex flex-column flex-shrink-1">
|
|||
|
|
<a href="https://www.instagram.com/" target="_blank" class="text-white"><i class="fa-brands fa-instagram icon-small"></i></a>
|
|||
|
|
</div>
|
|||
|
|
</figcaption>
|
|||
|
|
</figure>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="row justify-content-center" data-anime="{ "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue":200, "easing": "easeOutQuad" }">
|
|||
|
|
<div class="col-auto text-center last-paragraph-no-margin sm-mb-20px xs-mb-0">
|
|||
|
|
<div class="d-inline-block align-middle me-5px">
|
|||
|
|
<img src="images/demo-barber-icon-05.png" class="h-20px" alt>
|
|||
|
|
</div>
|
|||
|
|
<div class="fs-20 ls-minus-05px text-dark-gray d-inline-block align-middle">Our nearly 80 committed talented barbers are ready to help.</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section class="bg-medium-yellow position-relative">
|
|||
|
|
<div class="position-absolute left-0px top-minus-50px md-top-minus-30px sm-top-minus-25px xs-top-minus-15px background-position-left-top w-100 h-100px background-size-100 background-no-repeat" style="background-image: url('images/demo-barber-home-bg-up.png')"></div>
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row row-cols-1 row-cols-md-2 mb-9 md-mb-10 overlap-section xs-mb-40px" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 300, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|||
|
|
|
|||
|
|
<div class="col interactive-banner-style-08 sm-mb-30px">
|
|||
|
|
<figure class="m-0 hover-box overflow-hidden position-relative border-radius-6px">
|
|||
|
|
<a class="stretched-link" href="demo-barber.html#">
|
|||
|
|
<img src="images/demo-barber-home-10.jpg" alt />
|
|||
|
|
</a>
|
|||
|
|
<figcaption class="d-flex flex-column align-items-start justify-content-end position-absolute left-0px top-0px w-100 h-100 p-55px md-p-6">
|
|||
|
|
<span class="fs-13 lh-34 text-uppercase text-white border-radius-4px border border-color-transparent-white-light position-absolute right-25px top-25px ps-15px pe-15px md-right-15px md-top-15px">Flat 50% off</span>
|
|||
|
|
<div class="d-flex flex-column w-100 align-items-center">
|
|||
|
|
<h3 class="alt-font text-white mb-0 ls-minus-1px md-fs-40">Classic beard</h3>
|
|||
|
|
<span class="text-white opacity-6">Traditional men's beard</span>
|
|||
|
|
</div>
|
|||
|
|
</figcaption>
|
|||
|
|
</figure>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col interactive-banner-style-08">
|
|||
|
|
<figure class="m-0 hover-box overflow-hidden position-relative border-radius-6px">
|
|||
|
|
<a class="stretched-link" href="demo-barber.html#">
|
|||
|
|
<img src="images/demo-barber-home-11.jpg" alt />
|
|||
|
|
</a>
|
|||
|
|
<figcaption class="d-flex flex-column align-items-start justify-content-end position-absolute left-0px top-0px w-100 h-100 p-55px md-p-6">
|
|||
|
|
<span class="fs-13 lh-34 text-uppercase text-white border-radius-4px border border-color-transparent-white-light position-absolute right-25px top-25px ps-15px pe-15px md-right-15px md-top-15px">Flat 60% off</span>
|
|||
|
|
<div class="d-flex flex-column w-100 align-items-center">
|
|||
|
|
<h3 class="alt-font text-white mb-0 ls-minus-1px md-fs-40">Hair styling</h3>
|
|||
|
|
<span class="text-white opacity-6">Importance of a haircut</span>
|
|||
|
|
</div>
|
|||
|
|
</figcaption>
|
|||
|
|
</figure>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="row justify-content-center mb-1" data-anime="{ "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue":200, "easing": "easeOutQuad" }">
|
|||
|
|
<div class="col-12 text-center">
|
|||
|
|
<h2 class="alt-font ls-minus-2px text-dark-gray shadow-none" data-shadow-animation="true" data-animation-delay="700">Satisfied <span class="text-highlight">customers<span class="bg-base-color h-2px bottom-8px separator-animation"></span></span></h2>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row justify-content-center mb-6 sm-mb-12">
|
|||
|
|
<div class="col-xl-11 testimonials-style-11 position-relative ps-18 pe-18 sm-ps-0 sm-pe-0 text-center text-md-start">
|
|||
|
|
<div class="swiper magic-cursor slider-custom-text" data-slider-options="{ "loop": true, "keyboard": { "enabled": true, "onlyInViewport": true }, "autoplay": { "delay": 400000, "disableOnInteraction": false }, "navigation": { "nextEl": ".swiper-button-next-nav", "prevEl": ".swiper-button-previous-nav", "effect": "fade" } }">
|
|||
|
|
<div class="swiper-wrapper">
|
|||
|
|
|
|||
|
|
<div class="swiper-slide text-center">
|
|||
|
|
<span class="fs-20 lh-32 ls-minus-05px d-block mb-10px">The Barbers is an affordable, convenient and good quality place to get my hair cut. It is a friendly, laid back environment with great professionals. It is also friendly for all ages from kids to adults!</span>
|
|||
|
|
<span class="fs-19 fw-700 text-dark-gray">Herman miller - Switzerland</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide text-center">
|
|||
|
|
<span class="fs-20 lh-32 ls-minus-05px d-block mb-10px">Great barber shop. Walked in and they took me immediately without an appointment. Quick haircut, great service and reasonable price. I didn't have to wait at all when I got to the barbershop.</span>
|
|||
|
|
<span class="fs-19 fw-700 text-dark-gray">Matthew taylor - New York</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide text-center">
|
|||
|
|
<span class="fs-20 lh-32 ls-minus-05px d-block mb-10px">Barber was friendly and professional. He asked me what kind of hairstyle I want/used to have and he gave me his input on what he thinks would look good with my head shape. Cheers guys!</span>
|
|||
|
|
<span class="fs-19 fw-700 text-dark-gray">Leonel mooney - London</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="swiper-button-previous-nav swiper-button-prev slider-custom-text-prev sm-border-end-0 fs-14 text-uppercase ls-1px fw-600 border-color-transparent-dark-very-light">prev</div>
|
|||
|
|
<div class="swiper-button-next-nav swiper-button-next slider-custom-text-next fs-14 text-uppercase ls-1px fw-600 border-color-transparent-dark-very-light">next</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row row-cols-1 row-cols-md-4 row-cols-sm-2 counter-style-04" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 500, "delay": 300, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|||
|
|
|
|||
|
|
<div class="col last-paragraph-no-margin sm-mb-30px text-center">
|
|||
|
|
<h2 class="alt-font ls-minus-4px md-ls-minus-2px text-dark-gray vertical-counter d-inline-flex text-corduroy-green mb-0" data-text="+" data-to="437"></h2>
|
|||
|
|
<span class="lh-22 text-dark-gray d-block">Haircuts per week</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col last-paragraph-no-margin sm-mb-30px text-center">
|
|||
|
|
<h2 class="alt-font ls-minus-4px md-ls-minus-2px text-dark-gray vertical-counter d-inline-flex text-corduroy-green mb-0" data-text="+" data-to="864"></h2>
|
|||
|
|
<span class="lh-22 text-dark-gray d-block">Shaved per week</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col last-paragraph-no-margin xs-mb-30px text-center">
|
|||
|
|
<h2 class="alt-font ls-minus-4px md-ls-minus-2px text-dark-gray vertical-counter d-inline-flex text-corduroy-green mb-0" data-text="+" data-to="334"></h2>
|
|||
|
|
<span class="lh-22 text-dark-gray d-block">Stylization per week</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col last-paragraph-no-margin text-center">
|
|||
|
|
<h2 class="alt-font ls-minus-4px md-ls-minus-2px text-dark-gray vertical-counter d-inline-flex text-corduroy-green mb-0" data-text="+" data-to="453"></h2>
|
|||
|
|
<span class="lh-22 text-dark-gray d-block">Washing per week</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section id="contact" class="p-0 h-550px lg-h-auto position-relative">
|
|||
|
|
<div id="map" class="map w-100 position-absolute lg-position-relative z-index-1" data-map-options="{ "lat": -37.817240, "lng": 144.955820, "style": "Retro", "marker": { "type": "image", "class": "marker01", "src": "images/demo-barber-logo-black.png" }, "popup": { "defaultOpen": false, "html": "<div class=infowindow><strong class=\"mb-3 d-inline-block\">Crafto Barber Studio</strong><p>16122 Collins street, Melbourne, Australia</p></div><div class=\"google-maps-link\"> <a aria-label=\"View larger map\" target=\"_blank\" jstcache=\"31\" href=\"https://maps.google.com/maps?ll=-37.805688,144.962312&z=17&t=m&hl=en-US&gl=IN&mapclient=embed&cid=13153204942596594449\" jsaction=\"mouseup:placeCard.largerMap\">VIEW LARGER MAP</a></div>" } }"></div>
|
|||
|
|
<div class="container h-100 position-relative lg-top-20px">
|
|||
|
|
<div class="row h-100 align-items-center justify-content-center justify-content-xl-end">
|
|||
|
|
<div class="col-xl-auto col-12" data-anime="{ "el": "childs", "translateX": [100, 0], "opacity": [0,1], "duration": 800, "delay": 200, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|||
|
|
<div class="bg-dark-gray box-shadow-extra-large position-relative z-index-2 w-400px lg-w-100 border-radius-6px text-center text-xl-start">
|
|||
|
|
<div class="ps-60px pe-60px pt-50px pb-40px md-p-35px">
|
|||
|
|
<h4 class="alt-font text-white mb-15px">Contact us</h4>
|
|||
|
|
<span class="text-white">Crafto barber studio</span>
|
|||
|
|
<p class="w-80 mb-10px lh-28 lg-w-100">401 Broadway, 24th Floor New York, NY 10013</p>
|
|||
|
|
<div class="w-100 d-block">
|
|||
|
|
<span class="d-block"><span class="text-white">Phone:</span> <a href="tel:1800222000" class="text-white-hover">1-800-222-000</a></span>
|
|||
|
|
<span class="d-block"><span class="text-white">Email:</span> <a href="cdn-cgi/l/email-protection.html#e980878f86a990869c9b8d8684888087c78a8684" class="text-white text-decoration-line-bottom fw-500"><span class="__cf_email__" data-cfemail="533a3d353c132a3c2621373c3e323a3d7d303c3e">[email protected]</span></a></span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="text-center pt-15px pb-15px border-top border-color-transparent-white-light">
|
|||
|
|
<a href="https://maps.google.com/maps?ll=-37.805688,144.962312&z=17&t=m&hl=en-US&gl=IN&mapclient=embed&cid=13153204942596594449" target="_blank" class="btn btn-link btn-hover-animation-switch btn-extra-large text-white text-uppercase btn-icon-left fw-400 p-0">
|
|||
|
|
<span>
|
|||
|
|
<span class="btn-text">Show on google maps</span>
|
|||
|
|
<span class="btn-icon"><i class="feather icon-feather-map-pin"></i></span>
|
|||
|
|
<span class="btn-icon"><i class="feather icon-feather-map-pin"></i></span>
|
|||
|
|
</span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section class="bg-very-light-yellow" id="appointment">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-xl-4 col-lg-5 md-mb-50px">
|
|||
|
|
<h3 class="alt-font ls-minus-2px text-dark-gray mb-20px shadow-none" data-shadow-animation="true" data-animation-delay="700">Request an <span class="text-highlight">appointment<span class="bg-base-color h-2px bottom-8px separator-animation"></span></span></h3>
|
|||
|
|
<p class="mb-30px">Your information will be forwarded to a scheduling specialist who will contact you.</p>
|
|||
|
|
<div class="icon-with-text-style-01 feature-box feature-box-left-icon-middle bg-medium-yellow p-25px border-radius-6px last-paragraph-no-margin w-95 md-w-100 text-start">
|
|||
|
|
<div class="feature-box-icon me-15px">
|
|||
|
|
<img src="images/demo-barber-home-13.jpg" class="h-60px" alt>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-box-content">
|
|||
|
|
<p class="lh-26 mb-0">Phone appointment</p>
|
|||
|
|
<a href="tel:12345678910" class="fs-22 ls-minus-1px fw-600 ls-minus-05px text-dark-gray">+1 234 567 8910</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-8 col-lg-7">
|
|||
|
|
<div class="contact-form-style-05">
|
|||
|
|
|
|||
|
|
<form action="email-templates/contact-form.php" method="post">
|
|||
|
|
<div class="row justify-content-center">
|
|||
|
|
<div class="col-md-6 sm-mb-20px">
|
|||
|
|
<input class="mb-20px border-color-transparent-dark-very-light form-control bg-transparent required" type="text" name="name" placeholder="Your name*" />
|
|||
|
|
<input class="mb-20px border-color-transparent-dark-very-light form-control bg-transparent required" type="email" name="email" placeholder="Your email address*" />
|
|||
|
|
<div class="date-time row gutter-very-small">
|
|||
|
|
<div class="date-icon col-xl-6 lg-mb-25px">
|
|||
|
|
<input class="form-control border-color-transparent-dark-very-light bg-transparent" type="date" name="date" value="2023-01-01" min="2023-01-01" max="2099-12-31" />
|
|||
|
|
</div>
|
|||
|
|
<div class="time-icon col-xl-6">
|
|||
|
|
<input class="form-control border-color-transparent-dark-very-light bg-transparent" type="time" name="time" value="09:12" min="09:00" max="12:00" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-6">
|
|||
|
|
<div class="mb-20px select">
|
|||
|
|
<select class="form-control border-color-transparent-dark-very-light bg-transparent" name="select">
|
|||
|
|
<option value>Select barber service</option>
|
|||
|
|
<option value="Haircut">Haircut</option>
|
|||
|
|
<option value="Hair styling">Hair styling</option>
|
|||
|
|
<option value="Shaving">Shaving</option>
|
|||
|
|
<option value="Beard sculpting">Beard sculpting</option>
|
|||
|
|
<option value="Kids haircut">Kids haircut</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<textarea class="form-control border-color-transparent-dark-very-light bg-transparent h-140px" cols="20" rows="4" name="comment" placeholder="Your message"></textarea>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-6 mt-30px sm-mt-20px">
|
|||
|
|
<p class="fs-14 lh-22 opacity-7 text-center text-md-start mb-0">We are committed to protecting your privacy. We will never collect information about you.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-6 text-center text-md-end mt-30px sm-mt-20px">
|
|||
|
|
<input class="bg-transparent" type="hidden" name="redirect" value>
|
|||
|
|
<button class="btn btn-large btn-round-edge btn-box-shadow btn-switch-text btn-dark-gray left-icon submit w-100" type="submit">
|
|||
|
|
<span>
|
|||
|
|
<span><i class="feather icon-feather-calendar"></i></span>
|
|||
|
|
<span class="btn-double-text" data-text="Book appointment">Book appointment</span>
|
|||
|
|
</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-12">
|
|||
|
|
<div class="form-results d-none text-center mt-15px ps-15px pe-15px"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<footer class="footer-light position-relative cover-background" style="background-image: url('images/demo-barber-home-footer-bg.jpg')">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row justify-content-center align-items-center">
|
|||
|
|
<div class="col-md-10 text-center">
|
|||
|
|
<a href="demo-barber.html" class="footer-logo position-relative z-index-1 d-inline-block">
|
|||
|
|
<img src="images/demo-barber-logo-black.png" data-at2x="images/demo-barber-logo-black@2x.png" alt>
|
|||
|
|
</a>
|
|||
|
|
<span class="fs-90 xs-fs-60 alt-font text-base-color opacity-4 d-block mt-minus-50px mb-30px ls-minus-4px xs-ls-minus-2px">Award winning barber studio</span>
|
|||
|
|
<div class="col-12 text-center elements-social social-icon-style-09 mb-30px">
|
|||
|
|
<ul class="large-icon light">
|
|||
|
|
<li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i><span></span></a></li>
|
|||
|
|
<li><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i><span></span></a></li>
|
|||
|
|
<li><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i><span></span></a></li>
|
|||
|
|
<li><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i><span></span></a></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<p class="mb-0 fs-16">© 2024 Crafto is proudly powered by <a href="https://www.themezaa.com/" target="_blank" class="text-decoration-line-bottom text-white">ThemeZaa</a></p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="scroll-progress d-none d-xxl-block">
|
|||
|
|
<a href="demo-barber.html#" class="scroll-top" aria-label="scroll">
|
|||
|
|
<span class="scroll-text">Scroll</span><span class="scroll-line"><span class="scroll-point"></span></span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<script data-cfasync="false" src="cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="text/javascript" src="js/jquery.js"></script>
|
|||
|
|
<script type="text/javascript" src="js/vendors.min.js"></script>
|
|||
|
|
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCA56KqSJ11nQUw_tXgXyNMiPmQeM7EaSA&callback=initMap"></script>
|
|||
|
|
<script type="text/javascript" src="js/main.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|