<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Latest Project</title>
<%- include('./partials/csslinks') %>
</head>
<body>
<%- include('./partials/header') %>
<section class="portfolio-section">
<div class="container d-flex flex-column justify-content-center align-items-center" data-aos="fade-up" data-aos-duration="3200" data-aos-easing="ease-in-sine">
<!-- NO 8 Subscription WORKS STARTS HERE -->
<div class="weekavail_width_setting subscription-section business-reg-form">
<div class="text-center">
<h2 class="fw-bold">Select <strong>Subscription</strong></h2>
<p class="note-companyemail mb-5"> <span class="fw-bold">Note:</span> You’ll get FREE SUBSCRIPTION
for
first 30 Days on
any PLAN.!</p>
</div>
<div class="row w-80">
<div class="col-lg-4 col-md-6 ">
<label class="sub-categories" data-pkg="Essential Access" data-price="199">
<div class="sub-categories-name">
<h5 class=" d-flex align-items-center ">Essential <span> Access</span></h5>
<div class="bg-color">
<h5 class="m-0 fw-bold text-white p-0">$199</h5>
<span class="company-loc text-white">Per Year</span>
</div>
</div>
<div class="sub-categories-details">
<div>
<i class="bi bi-check-all"></i>
<span>Business with 1-4 Employees</span>
</div>
<div>
<i class="bi bi-check-all"></i>
<span>Monthly</span>
</div>
</div>
</label>
</div>
<div class="col-lg-4 col-md-6">
<label class="sub-categories" data-pkg="Premium Plus" data-price="399">
<div class="sub-categories-name ">
<h5 class=" d-flex align-items-center ">Premium <span> Plus</span></h5>
<div class="bg-color">
<h5 class="m-0 fw-bold text-white p-0">$399</h5>
<span class="company-loc text-white">Per Year</span>
</div>
</div>
<div class="sub-categories-details">
<div>
<i class="bi bi-check-all"></i>
<span>Business with 1-4 Employees</span>
</div>
<div>
<i class="bi bi-check-all"></i>
<span>Monthly</span>
</div>
</div>
</label>
</div>
<div class="col-lg-4 col-md-6">
<label class="sub-categories" data-pkg="Deluxe Membership" data-price="399">
<div class="sub-categories-name ">
<h5 class=" d-flex align-items-center ">Deluxe <span> Membership</span></h5>
<div class="bg-color">
<h5 class="m-0 fw-bold text-white p-0">$399</h5>
<span class="company-loc text-white">Per Year</span>
</div>
</div>
<div class="sub-categories-details">
<div>
<i class="bi bi-check-all"></i>
<span>Business with 1-4 Employees</span>
</div>
<div>
<i class="bi bi-check-all"></i>
<span>Monthly</span>
</div>
</div>
</label>
</div>
<div class="col-lg-4 col-md-6">
<label class="sub-categories" data-pkg="Ultimate Experience" data-price="999">
<div class="sub-categories-name ">
<h5 class=" d-flex align-items-center ">Ultimate <span> Experience</span></h5>
<div class="bg-color">
<h5 class="m-0 fw-bold text-white p-0">$999</h5>
<span class="company-loc text-white">Per Year</span>
</div>
</div>
<div class="sub-categories-details">
<div>
<i class="bi bi-check-all"></i>
<span>Business with 1-4 Employees</span>
</div>
<div>
<i class="bi bi-check-all"></i>
<span>Monthly</span>
</div>
</div>
</label>
</div>
<div class="col-lg-4 col-md-6">
<label class="sub-categories" data-pkg="Elite Access Pass" data-price="1999">
<div class="sub-categories-name ">
<h5 class=" d-flex align-items-center ">Elite Access <span> Pass</span></h5>
<div class="bg-color">
<h5 class="m-0 fw-bold text-white p-0">$1,999</h5>
<span class="company-loc text-white">Per Year</span>
</div>
</div>
<div class="sub-categories-details">
<div>
<i class="bi bi-check-all"></i>
<span>Business with 1-4 Employees</span>
</div>
<div>
<i class="bi bi-check-all"></i>
<span>Monthly</span>
</div>
</div>
</label>
</div>
<div class="col-lg-4 col-md-6">
<label class="sub-categories" data-pkg="VIP Exclusive" data-price="1999">
<div class="sub-categories-name ">
<h5 class=" d-flex align-items-center ">VIP <span> Exclusive</span></h5>
<div class="bg-color">
<h5 class="m-0 fw-bold text-white p-0">$1,999</h5>
<span class="company-loc text-white">Per Year</span>
</div>
</div>
<div class="sub-categories-details">
<div>
<i class="bi bi-check-all"></i>
<span>Business with 1-4 Employees</span>
</div>
<div>
<i class="bi bi-check-all"></i>
<span>Monthly</span>
</div>
</div>
</label>
</div>
<div class="col-lg-4 col-12">
</div>
<div class="col-lg-4 col-md-6">
<label class="sub-categories" data-pkg="Platinum Privilege" data-price="3999">
<div class="sub-categories-name ">
<h5 class=" d-flex align-items-center ">Platinum <span> Privilege</span></h5>
<div class="bg-color">
<h5 class="m-0 fw-bold text-white p-0">$3,999</h5>
<span class="company-loc text-white">Per Year</span>
</div>
</div>
<div class="sub-categories-details">
<div>
<i class="bi bi-check-all"></i>
<span>Business with 1-4 Employees</span>
</div>
<div>
<i class="bi bi-check-all"></i>
<span>Monthly</span>
</div>
</div>
</label>
</div>
<div class="col-lg-4 col-12">
</div>
</div>
<!-- <button type="submit" class="next-btn py-3 w-15 btn-business-reg" data-next-class="carddetails-section">NEXT</button> -->
</div>
<!-- NO 8 Subscription WORKS ENDS HERE -->
<!-- NO 9 CARD DETAILS WORKS STARTS HERE -->
<div class="portfolio_width_setting carddetails-section business-reg-form display-none">
<div class="text-center">
<h2 class="fw-bold">Enter Details</h2>
</div>
<form class="business-form row">
<div class="col-md-6 portfolio-form-design">
<label for="fname" class="form-label">Enter Name On Card</label>
<input type="name" class="form-control" id="inputEmail4" placeholder="Enter Name...">
</div>
<div class="col-md-6 portfolio-form-design">
<label for="date" class="form-label">Enter Date Of Birth</label>
<input type="date" class="form-control" id="address" placeholder="Enter Password...">
</div>
<div class="col-md-6 portfolio-form-design">
<label for="Bank" class="form-label">Select Bank</label>
<select id="Bank" class="form-select">
<option selected>Select</option>
<option>...</option>
</select>
</div>
<div class="col-md-6 portfolio-form-design">
<label for="CardNumber" class="form-label">Enter Card Number</label>
<input type="number" class="form-control" id="CardNumber" placeholder="8564 5586 2566 8354">
</div>
<div class="col-md-4 portfolio-form-design ">
<label for="Bank" class="form-label">Select Card</label>
<select id="Bank" class="form-select">
<option selected>Select</option>
<option>...</option>
</select>
</div>
<div class="col-md-4 portfolio-form-design">
<label for="date" class="form-label">Enter Card Expiry</label>
<input type="date" class="form-control" id="address" placeholder="Enter Password...">
</div>
<div class="col-md-4 portfolio-form-design">
<label for="CVV" class="form-label">Enter CVV</label>
<input type="number" class="form-control" id="CVV" placeholder="ENTER CVV">
</div>
<div class="d-flex justify-content-center mt-5">
<button type="submit" class="submit-btn-portfolio btn-business-reg" data-next-class="regcompletebusiness-section">SUBMIT</button>
</div>
</form>
</div>
<!-- CARD DETAILS WORKS ENDS HERE -->
<!-- NO 10 REGISTRATION COMPLETED WORKS STARTS HERE -->
<div class="weekavail_width_setting regcompletebusiness-section business-reg-form display-none">
<div class="text-center reg-icon">
<i class="bi bi-patch-check"></i>
<h1 class="mx-3 mb-5">Registration Completed</h1>
<h6 class="fw-bold mb-3 ">Check Your Email / Phone For Verification</h6>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.
</p>
</div>
<button type="submit" class="next-btn py-3">NEXT</button>
</div>
<!--REGISTRATION COMPLETED WORKS ENDS HERE -->
<!-- NO 8 REGISTRATION COMPLETED WORKS STARTS HERE -->
<div class="weekavail_width_setting error-sec portfolio-form display-none">
<div class="text-center reg-icon">
<i style="color: red" class="bi bi-patch-exclamation"></i>
<h1 class="mx-3 mb-5">Registration Failed</h1>
<h6 class="fw-bold mb-3" id="error-message">Check Your Email / Phone For Verification</h6>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.
</p>
</div>
<button type="button" class="next-btn go-back py-3">Go Back</button>
</div>
<!--REGISTRATION COMPLETED WORKS ENDS HERE -->
</div>
</section>
<%- include('./partials/query') %>
<%- include('./partials/footer') %>
<%- include('./partials/scriptlinks') %>
<script>
$(document).ready(function() {
$(".sub-categories").click(function(){
$(".carddetails-section").removeClass('display-none')
$(".subscription-section").addClass('display-none')
})
})
$('.go-back').click(function() {
formsWrapper.forEach((form) => {
form.classList.add("display-none")
document.querySelector(`.business-reg-form`).classList.remove("display-none")
})
})
</script>
</body>
</html>