<!DOCTYPE html>
<html lang="zxx">
<head>
<title>Blaxcut - Barbershop Website Template</title>
<link rel="icon" href="images/icon.png" type="image/gif" sizes="16x16">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="width=device-width, initial-scale=1.0" name="viewport" >
<meta content="Blaxcut - Barbershop Website Template" name="description" >
<meta content="" name="keywords" >
<meta content="" name="author" >
<!-- CSS Files
================================================== -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" id="bootstrap">
<link href="css/mdb.min.css" rel="stylesheet" type="text/css" id="mdb" >
<link href="css/plugins.css" rel="stylesheet" type="text/css" >
<link href="css/style.css" rel="stylesheet" type="text/css" >
<link href="css/coloring.css" rel="stylesheet" type="text/css" >
<!-- color scheme -->
<link id="colors" href="css/colors/scheme-01.css" rel="stylesheet" type="text/css" >
</head>
<body class="dark-scheme">
<div id="wrapper">
<!-- page preloader begin -->
<div id="de-loader"></div>
<!-- page preloader close -->
<!-- header begin -->
<header class="transparent">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="de-flex sm-pt10">
<div class="de-flex-col">
<div class="de-flex-col">
<!-- logo begin -->
<div id="logo">
<a href="index.html">
<img class="logo-main" src="images/logo.png" alt="" >
<img class="logo-mobile" src="images/logo-mobile.png" alt="" >
</a>
</div>
<!-- logo close -->
</div>
</div>
<div class="de-flex-col header-col-mid">
<ul id="mainmenu">
<li><a class="menu-item" href="index.html">Home</a>
<ul>
<li><a class="menu-item" href="index.html">Home 1</a></li>
<li><a class="menu-item" href="index-2.html">Home 2</a></li>
<li><a class="menu-item" href="index-3.html">Home 3</a></li>
<li><a class="menu-item" href="index-4.html">Home 4</a></li>
</ul>
</li>
<li><a class="menu-item" href="services.html">Services</a>
<ul>
<li><a class="menu-item" href="services.html">All Services</a></li>
<li><a class="menu-item" href="service-single.html">Service Single</a></li>
</ul>
</li>
<li><a class="menu-item" href="about.html">About</a>
<ul>
<li><a class="menu-item" href="about.html">About Us</a></li>
<li><a class="menu-item" href="team.html">Our Team</a></li>
</ul>
</li>
<li><a class="menu-item" href="book.html">Book Now</a></li>
<li><a class="menu-item" href="blog.html">Blog</a></li>
<li><a class="menu-item" href="#">Extras</a>
<ul>
<li><a class="menu-item" href="contact.html">Contact</a></li>
<li><a class="menu-item" href="gallery.html">Gallery</a></li>
<li><a class="menu-item" href="pricing.html">Pricing</a></li>
<li><a class="menu-item" href="testimonials.html">Testimonials</a></li>
</ul>
</li>
</ul>
</div>
<div class="de-flex-col">
<div class="menu_side_area">
<a href="book.html" class="btn-main">Book Now</a>
<span id="menu-btn"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- header close -->
<!-- content begin -->
<div class="no-bottom no-top" id="content">
<div id="top"></div>
<!-- section begin -->
<section id="subheader" class="jarallax">
<img src="images/background/6.jpg" class="jarallax-img" alt="">
<div class="container">
<div class="row">
<div class="col-lg-6 offset-lg-3 text-center">
<h1>Booking</h1>
<div class="de-separator"></div>
</div>
</div>
</div>
<div class="de-gradient-edge-bottom"></div>
</section>
<!-- section close -->
<section id="section-form" class="no-top">
<div class="container">
<div class="row">
<div class="col-md-10 offset-md-1">
<form name="contactForm" id='contact_form' class="form-border" method="post">
<div id="step-1" class="row">
<h3 class="s2">Choose Services</h3>
<div class="row">
<div class="col-xl-3 col-lg-6">
<div class="sc-group">
<h5>Haircuts</h5>
<div class="form-group">
<input type="checkbox" name="Services Haircuts" id="s_a1" value="Regular Haircut">
<label for="s_a1">Regular Haircut</label>
</div>
<div class="form-group">
<input type="checkbox" name="Services Haircuts" id="s_a2" value="Scissors Haircut">
<label for="s_a2">Scissors Haircut</label>
</div>
<div class="form-group">
<input type="checkbox" name="Services Haircuts" id="s_a3" value="Kids Haircut">
<label for="s_a3">Kids Haircut</label>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6">
<div class="sc-group">
<h5>Shave</h5>
<div class="form-group">
<input type="checkbox" name="Services Shave" id="s_b1" value="Head Shave">
<label for="s_b1">Head Shave</label>
</div>
<div class="form-group">
<input type="checkbox" name="Services Shave" id="s_b2" value="Royal Shave">
<label for="s_b2">Royal Shave</label>
</div>
<div class="form-group">
<input type="checkbox" name="Services Shave" id="s_b3" value="Royal Head Shave">
<label for="s_b3">Royal Head Shave</label>
</div>
<div class="form-group">
<input type="checkbox" name="Services Shave" id="s_b4" value="Beard Trim No Shave">
<label for="s_b4">Beard Trim No Shave</label>
</div>
<div class="form-group">
<input type="checkbox" name="Services Shave" id="s_b5" value="Beard Trim Shave">
<label for="s_b5">Beard Trim Shave</label>
</div>
<div class="form-group">
<input type="checkbox" name="Services" id="s_b6" value="Beard Shave Up">
<label for="s_b6">Beard Shave Up</label>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6">
<div class="sc-group">
<h5>Facial</h5>
<div class="form-group">
<input type="checkbox" name="Services Facial" id="s_c1" value="Deep Pore Cleansing">
<label for="s_c1">Deep Pore Cleansing</label>
</div>
<div class="form-group">
<input type="checkbox" name="Services Facial" id="s_c2" value="Aromatherapy Facial">
<label for="s_c2">Aromatherapy Facial</label>
</div>
<div class="form-group">
<input type="checkbox" name="Services Facial" id="s_c3" value="Acne Problem Facial">
<label for="s_c3">Acne Problem Facial</label>
</div>
<div class="form-group">
<input type="checkbox" name="Services Facial" id="s_c4" value="European Facial">
<label for="s_c4">European Facial</label>
</div>
<div class="form-group">
<input type="checkbox" name="Services Facial" id="s_c5" value="Glycolic Peel Facial">
<label for="s_c5">Glycolic Peel Facial</label>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6">
<div class="sc-group">
<h5>Package</h5>
<div class="form-group">
<input type="checkbox" name="Services Package" id="s_d1" value="Haircut + Shave">
<label for="s_d1">Haircut + Shave</label>
</div>
<div class="form-group">
<input type="checkbox" name="Services Package" id="s_d2" value="Haircut + Beard Trim">
<label for="s_d2">Haircut + Beard Trim</label>
</div>
<div class="form-group">
<input type="checkbox" name="Services Package" id="s_d3" value="Haircut + Beard Trim Shave">
<label for="s_d3">Haircut + Beard Trim Shave</label>
</div>
<div class="form-group">
<input type="checkbox" name="Services Package" id="s_d4" value="Haircut + Beard Shape Up">
<label for="s_d4">Haircut + Beard Shape Up</label>
</div>
</div>
</div>
</div>
<div class="spacer-single"></div>
<!-- step 2 -->
<div class="row">
<div class="col-lg-6 mb-sm-30">
<h3 class="s2">Choose Staff</h3>
<div class="de_form de_radio">
<div class="radio-img">
<input id="radio-1a" name="Staff" type="radio" value="Steven" checked="checked">
<label for="radio-1a"><img src="images/team/1.jpg" alt="">Steven</label>
</div>
<div class="radio-img">
<input id="radio-1b" name="Staff" type="radio" value="Huey">
<label for="radio-1b"><img src="images/team/2.jpg" alt="">Huey</label>
</div>
<div class="radio-img">
<input id="radio-1c" name="Staff" type="radio" value="Harry">
<label for="radio-1c"><img src="images/team/3.jpg" alt="">Harry</label>
</div>
<div class="radio-img">
<input id="radio-1d" name="Staff" type="radio" value="Axe">
<label for="radio-1d"><img src="images/team/4.jpg" alt="">Axe</label>
</div>
</div>
</div>
<div class="col-lg-6">
<h3 class="s2">Select Date</h3>
<input type="date" name="date" id="date" class="form-control" min="1997-01-01" required />
<div class="spacer-single"></div>
<h3 class="s2">Select Time</h3>
<div class="custom_radio">
<div class="radio-opt">
<input type="radio" id="choose_8AM" value="8:00 AM" name="select_time" checked><label for="choose_8AM">8:00 AM</label>
</div>
<div class="radio-opt">
<input type="radio" id="choose_9AM" value="9:00 AM" name="select_time"><label for="choose_9AM">9:00 AM</label>
</div>
<div class="radio-opt">
<input type="radio" id="choose_10AM" value="10:00 AM" name="select_time"><label for="choose_10AM">10:00 AM</label>
</div>
<div class="radio-opt">
<input type="radio" id="choose_11AM" value="11:00 AM" name="select_time"><label for="choose_11AM">11:00 AM</label>
</div>
<div class="radio-opt">
<input type="radio" id="choose_12AM" value="12:00 AM" name="select_time"><label for="choose_12AM">12:00 AM</label>
</div>
<div class="radio-opt">
<input type="radio" id="choose_1PM" value="1:00 PM" name="select_time"><label for="choose_1PM">1:00 PM</label>
</div>
<div class="radio-opt">
<input type="radio" id="choose_2PM" value="2:00 PM" name="select_time"><label for="choose_2PM">2:00 PM</label>
</div>
<div class="radio-opt">
<input type="radio" id="choose_3PM" value="2:00 PM" name="select_time"><label for="choose_3PM">2:00 PM</label>
</div>
<div class="radio-opt">
<input type="radio" id="choose_4PM" value="3:00 PM" name="select_time"><label for="choose_4PM">3:00 PM</label>
</div>
<div class="radio-opt">
<input type="radio" id="choose_5PM" value="4:00 PM" name="select_time"><label for="choose_5PM">4:00 PM</label>
</div>
<div class="radio-opt">
<input type="radio" id="choose_6PM" value="5:00 PM" name="select_time"><label for="choose_6PM">5:00 PM</label>
</div>
<div class="radio-opt">
<input type="radio" id="choose_7PM" value="6:00 PM" name="select_time"><label for="choose_7PM">6:00 PM</label>
</div>
<div class="radio-opt">
<input type="radio" id="choose_8PM" value="7:00 PM" name="select_time"><label for="choose_8PM">7:00 PM</label>
</div>
<div class="radio-opt">
<input type="radio" id="choose_9PM" value="8:00 PM" name="select_time"><label for="choose_9PM">8:00 PM</label>
</div>
</div>
</div>
</div>
<div class="spacer-single"></div>
<div class="row">
<h3 class="s2">Your details</h3>
<div class="col-lg-6">
<div id='name_error' class='error'>Please enter your name.</div>
<div class="mb25">
<input type='text' name='Name' id='name' class="form-control" placeholder="Your Name" required>
</div>
<div id='email_error' class='error'>Please enter your valid E-mail ID.</div>
<div class="mb25">
<input type='email' name='Email' id='email' class="form-control" placeholder="Your Email" required>
</div>
<div id='phone_error' class='error'>Please enter your phone number.</div>
<div class="mb25">
<input type='text' name='phone' id='phone' class="form-control" placeholder="Your Phone" required>
</div>
</div>
<div class="col-lg-6">
<div id='message_error' class='error'>Please enter your message.</div>
<div>
<textarea name='message' id='message' class="form-control" placeholder="Your Message"></textarea>
</div>
</div>
<div class="col-lg-12">
<div class="g-recaptcha" data-sitekey="copy-your-site-key-here"></div>
<p id='submit' class="mt20">
<input type='submit' id='send_message' value='Submit Form' class="btn-main">
</p>
</div>
</div>
</div>
</form>
<div id="success_message" class='success'>
Your message has been sent successfully. Refresh this page if you want to send more messages.
</div>
<div id="error_message" class='error'>
Sorry there was an error sending your form.
</div>
</div>
</div>
</div>
</section>
</div>
<!-- content close -->
<a href="#" id="back-to-top"></a>
<!-- footer begin -->
<footer>
<div class="container">
<div class="row g-4">
<div class="col-lg-4 text-lg-start text-center">
<div class="social-icons">
<a href="#"><i class="fa fa-facebook fa-lg"></i></a>
<a href="#"><i class="fa fa-twitter fa-lg"></i></a>
<a href="#"><i class="fa fa-linkedin fa-lg"></i></a>
<a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
<a href="#"><i class="fa fa-rss fa-lg"></i></a>
</div>
</div>
<div class="col-lg-4 text-lg-center text-center">
<img src="images/logo.png" class="" alt="">
</div>
<div class="col-lg-4 text-lg-end text-center">
Copyright 2023 - Blaxcut by Designesia
</div>
</div>
</div>
</footer>
<!-- footer close -->
</div>
<!-- Javascript Files
================================================== -->
<script src="js/plugins.js"></script>
<script src="js/designesia.js"></script>
<script src='https://www.google.com/recaptcha/api.js' async defer></script>
<script src="form.js"></script>
</body>
</html>