pricing.html

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Pricing</title>

	<link rel="stylesheet" type="text/css" href="css/pricing.css" />

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
		integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
		crossorigin="anonymous" referrerpolicy="no-referrer"></script>

	<script type="text/javascript" src="js/base.js"></script>


</head>

<body>

	<header id="header" class="App-header base-header">
	</header>

	<main>
		<div class="head-bg bg-dark">
			<!-- <img src="media/headWall.svg" class="head-bg" alt="shapes-background" width="1024px" height="300px"> -->
			<h1>Pricing</h1>
		</div>

		<div class="heading my-5 mx-3 py-4">
			<h1>The Power of Sharing</h1>
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum nobis, maiores veritatis tempore autem modi.
			</p>
		</div>

		<!-- PLAN CARDS -->
		<section class="main-section" id="pricing-cards">
			<div class="mt-5 pt-5 flex w-100">
				<div class="pre-loader"></div>
			</div>
			<!-- <span class="text-center disabled-text">refresh page if content is not visible</span> -->

			<div
				class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 justify-content-center gy-5 mx-2 mx-md-5 px-1 px-md-5 mb-5">
				<div class="card-container col">
					<div class="card free-card">
						<div class="card-header">
							<img class="head-img" src="./media/sparkle.svg" height="30" alt="Free-Plan">
						</div>
						<div class="card-body pre-content">
							<div class="card-title">FREE</div>
							<div class="card-text">
								<p class="invisible">Starting At</p>
								<div class='plan-price'>
									<span class='symbol'>&#8377;</span>
									<span class='value'>0</span>
									<span class='period'>/month</span>
								</div>
								<ul class="list-group list-group-flush">
									<li class="list-group-item d-flex justify-content-between">
										<span>Users</span>
										<strong>3</strong>
									</li>
									<li class="list-group-item d-flex justify-content-between">
										<span>Test Results</span>
										<strong>500</strong>
									</li>
								</ul>
								<a class="btn plan-btn my-4 rounded-pill">Sign Up Free</a>
								<ul class="check-bullet list-unstyled text-start">
									<h6>Everything you get with Free:</h6>
									<li class="list-group-item border-0">Parallelization</li>
									<li class="list-group-item border-0">Load Balancing</li>
									<li class="list-group-item border-0">Integrations</li>
									<li class="list-group-item border-0">Community Support</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="card-container col">
					<div class="card premium-card">
						<div class="card-header">
							<img class="head-img" src="./media/bestseller.svg" height="30" alt="Premium-plan">
						</div>
						<div class="card-body pre-content">
							<div class="card-title">PREMIUM</div>
							<div class="card-text">
								<p>Starting At</p>
								<div class='plan-price'>
									<span class='symbol'>&#8377;</span>
									<span class='value'>101</span>
									<span class='period'>/month</span>
								</div>
								<ul class="list-group list-group-flush">
									<li class="list-group-item d-flex justify-content-between">
										<span>Users</span>
										<strong>3</strong>
									</li>
									<li class="list-group-item d-flex justify-content-between">
										<span>Test Results</span>
										<strong>500</strong>
									</li>
								</ul>
								<a class="btn plan-btn my-4 rounded-pill">Get Started</a>
								<ul class="list-unstyled text-start">
									<li class="list-group-item border-0"><strong>Everything in Free, plus:</strong></li>
									<li class="list-group-item border-0"><i class="fas fa-check"></i>&nbsp;
										Parallelization</li>
									<li class="list-group-item border-0"><i class="fas fa-check"></i>&nbsp; Load
										Balancing</li>
									<li class="list-group-item border-0"><i class="fas fa-check"></i>&nbsp; Analytics
									</li>
									<li class="list-group-item border-0"><i class="fas fa-check"></i>&nbsp; Integrations
									</li>
									<li class="list-group-item border-0"><i class="fas fa-check"></i>&nbsp; Community
										Support</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="card-container col">
					<div class="card enterprise-card">
						<div class="card-header">
							<img class="head-img" src="./media/business.svg" height="30" alt="Business-Plan">
						</div>
						<div class="card-body pre-content">
							<div class="card-title">ENTERPRISE</div>
							<div class="card-text">
								<p class="invisible">Starting At</p>
								<div class='plan-price invisible'>
									<span class='symbol'>&#8377;</span>
									<span class='value'>0</span>
									<span class='period'>/month</span>
								</div>
								<ul class="list-group list-group-flush">
									<li class="list-group-item d-flex justify-content-between">
										<span>Users</span>
										<strong>3</strong>
									</li>
									<li class="list-group-item d-flex justify-content-between">
										<span>Test Results</span>
										<strong>500</strong>
									</li>
								</ul>
								<a class="btn plan-btn my-4 rounded-pill">Contact Us</a>
								<ul class="list-unstyled text-start">
									<li class="list-group-item border-0"><strong>Everything in Team, plus:</strong></li>
									<li class="list-group-item border-0"><i class="fas fa-check"></i>&nbsp;
										Parallelization</li>
									<li class="list-group-item border-0"><i class="fas fa-check"></i>&nbsp; Load
										Balancing</li>
									<li class="list-group-item border-0"><i class="fas fa-check"></i>&nbsp; Debugging
									</li>
									<li class="list-group-item border-0"><i class="fas fa-check"></i>&nbsp; Analytics
									</li>
									<li class="list-group-item border-0"><i class="fas fa-check"></i>&nbsp; Integrations
									</li>
									<li class="list-group-item border-0"><i class="fas fa-check"></i>&nbsp; Community
										Support</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

		<!-- PLAN TABLE -->
		<section class="main-section my-5 py-5">
			<h3 class="mb-5">Choose the plan that’s right for you.</h3>
			<div class="container rounded">
				<div class="table-responsive shadow">
					<table class="table table-borderless table-hover" id='price-table' style="min-width: 900px;">
					</table>
				</div>
			</div>
		</section>
	</main>

	<footer></footer>


	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"
		integrity="sha512-c3Nl8+7g4LMSTdrm621y7kf9v3SDPnhxLNhcjFJbKECVnmZHTdo+IRO05sNLTH/D3vA6u1X32ehoLC7WFVdheg=="
		crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->

	<!-- <script src="https://cdn.jsdelivr.net/npm/yaml@1.10.2/dist/index.js" integrity="sha256-xfPT46jBixl4dswTsQJUA12go9XrTRCtwWXoaoFLfU0=" crossorigin="anonymous"></script> -->

	<!-- <script src="js/YamlParser/parse-cts.js"></script> -->
	<!-- <script src="js/YamlParser/index.js"></script> -->
	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js" integrity="sha512-CSBhVREyzHAjAFfBlIBakjoRUKp5h7VSweP0InR/pAJyptH7peuhCsqAI/snV+TwZmXZqoUklpXp6R6wMnYf5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->

	<!-- <script type="module" src="https://cdn.jsdelivr.net/npm/yaml@2.0.0-7/browser/index.js"></script> -->

	<script src="js/pricing.js"></script>

</body>

</html>