mirror of
https://github.com/istiyakaminsanto/tailShape.git
synced 2025-12-23 10:57:02 +00:00
148 lines
10 KiB
HTML
148 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="">
|
|
<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">
|
|
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
|
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
|
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
|
<title>Pricing</title>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
|
d
|
|
</button>
|
|
|
|
<!-- pricing 1 start -->
|
|
<section class="section_divider" id="pricing_1">
|
|
<div>
|
|
Pricing 1
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="dark:bg-gray-800">
|
|
|
|
<div class="text-center transform scale-75 " >
|
|
<div class="xl:p-18 xl:m-auto ">
|
|
<div class="grid xl:grid-cols-3">
|
|
<div class="z-10 pb-20 mt-20 bg-white dark:bg-gray-800 border-2 rounded-lg shadow-xl xl:p-20 xl:ml-1 hover:shadow-2xl">
|
|
<div class="w-2/6 p-4 m-auto mt-12 border-4 border-purple-400 rounded-full xl:mt-0">
|
|
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 213.485 213.485"
|
|
style="enable-background:new 0 0 213.485 213.485;" xml:space="preserve">
|
|
<path
|
|
d="M213.476,86.779c-0.005,0.081-0.056,0.819-0.231,1.995c-2.921,21.747-13.64,44.973-34.97,44.973
|
|
c-25.05,0-62.748-17.839-71.532-22.171c-8.784,4.332-46.482,22.171-71.532,22.171c-21.33,0-32.049-23.226-34.97-44.972
|
|
c-0.176-1.177-0.227-1.915-0.232-1.996c-0.142-2.184,1.498-4.077,3.68-4.248c2.165-0.169,4.096,1.444,4.295,3.624
|
|
c0.004,0.04,0.055,0.577,0.178,1.494c0.934,6.179,4.835,20.462,20.875,20.462c10.768,0,18.494-6.938,26.674-14.285
|
|
c7.712-6.927,15.687-14.089,26.179-14.089c13.162,0,20.803,9.241,24.854,16.792c4.051-7.551,11.692-16.792,24.853-16.792
|
|
c10.491,0,18.467,7.162,26.179,14.089c8.181,7.347,15.907,14.285,26.675,14.285c16.04,0,19.94-14.284,20.874-20.463
|
|
c0.123-0.917,0.174-1.453,0.178-1.496c0.202-2.179,2.119-3.782,4.298-3.619C211.981,82.706,213.618,84.597,213.476,86.779z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-8 text-4xl font-bold">Free</h3>
|
|
<h3 class="mt-6 mb-6 text-4xl font-semibold text-purple-400">$0 / Month</h3>
|
|
<ul class="space-y-6 text-xl">
|
|
<li class="dark:hover:text-purple-400 transition-color duration-300">30-Day Trial</li>
|
|
<li class="dark:hover:text-purple-400 transition-color duration-300">500GB Bandwidth</li>
|
|
<li class="dark:hover:text-purple-400 transition-color duration-300">200H DiskSpaces™</li>
|
|
<li class="dark:hover:text-purple-400 transition-color duration-300">5 Course Submissions</li>
|
|
</ul>
|
|
<button
|
|
class="w-5/6 h-16 mt-12 text-xl font-semibold text-white bg-purple-400 rounded xl:mb-6">Order</button>
|
|
</div>
|
|
<div
|
|
class="z-10 pb-20 mt-20 transform scale-110 bg-white dark:bg-gray-800 border-2 rounded-lg shadow-xl xl:p-20 xl:ml-1 hover:shadow-2xl">
|
|
<div class="w-2/6 p-4 m-auto mt-12 border-4 border-purple-400 rounded-full xl:mt-0">
|
|
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 213.485 213.485"
|
|
style="enable-background:new 0 0 213.485 213.485;" xml:space="preserve">
|
|
<path
|
|
d="M213.476,86.779c-0.005,0.081-0.056,0.819-0.231,1.995c-2.921,21.747-13.64,44.973-34.97,44.973
|
|
c-25.05,0-62.748-17.839-71.532-22.171c-8.784,4.332-46.482,22.171-71.532,22.171c-21.33,0-32.049-23.226-34.97-44.972
|
|
c-0.176-1.177-0.227-1.915-0.232-1.996c-0.142-2.184,1.498-4.077,3.68-4.248c2.165-0.169,4.096,1.444,4.295,3.624
|
|
c0.004,0.04,0.055,0.577,0.178,1.494c0.934,6.179,4.835,20.462,20.875,20.462c10.768,0,18.494-6.938,26.674-14.285
|
|
c7.712-6.927,15.687-14.089,26.179-14.089c13.162,0,20.803,9.241,24.854,16.792c4.051-7.551,11.692-16.792,24.853-16.792
|
|
c10.491,0,18.467,7.162,26.179,14.089c8.181,7.347,15.907,14.285,26.675,14.285c16.04,0,19.94-14.284,20.874-20.463
|
|
c0.123-0.917,0.174-1.453,0.178-1.496c0.202-2.179,2.119-3.782,4.298-3.619C211.981,82.706,213.618,84.597,213.476,86.779z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-8 text-3xl font-bold">Medium</h3>
|
|
<h3 class="mt-6 mb-6 text-4xl font-semibold text-purple-400">$25 / Month</h3>
|
|
<ul class="space-y-6 text-xl">
|
|
<li class="dark:hover:text-purple-400 transition-color duration-300">Incl. Free package</li>
|
|
<li class="dark:hover:text-purple-400 transition-color duration-300">1TB Bandwidth</li>
|
|
<li class="dark:hover:text-purple-400 transition-color duration-300">1TB DiskSpaces™</li>
|
|
<li class="dark:hover:text-purple-400 transition-color duration-300">15 Course Submissions</li>
|
|
</ul>
|
|
<button class="w-5/6 h-16 mt-12 text-xl font-semibold text-white bg-purple-400 rounded xl:mb-6">Order
|
|
Now</button>
|
|
</div>
|
|
<div class="pb-20 mt-20 bg-white dark:bg-gray-800 border-2 rounded-lg shadow-xl xl:p-20 xl:ml-1 hover:shadow-2xl">
|
|
<div class="w-2/6 p-4 m-auto mt-12 border-4 border-purple-400 rounded-full xl:mt-0">
|
|
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 213.485 213.485"
|
|
style="enable-background:new 0 0 213.485 213.485;" xml:space="preserve">
|
|
<path
|
|
d="M213.476,86.779c-0.005,0.081-0.056,0.819-0.231,1.995c-2.921,21.747-13.64,44.973-34.97,44.973
|
|
c-25.05,0-62.748-17.839-71.532-22.171c-8.784,4.332-46.482,22.171-71.532,22.171c-21.33,0-32.049-23.226-34.97-44.972
|
|
c-0.176-1.177-0.227-1.915-0.232-1.996c-0.142-2.184,1.498-4.077,3.68-4.248c2.165-0.169,4.096,1.444,4.295,3.624
|
|
c0.004,0.04,0.055,0.577,0.178,1.494c0.934,6.179,4.835,20.462,20.875,20.462c10.768,0,18.494-6.938,26.674-14.285
|
|
c7.712-6.927,15.687-14.089,26.179-14.089c13.162,0,20.803,9.241,24.854,16.792c4.051-7.551,11.692-16.792,24.853-16.792
|
|
c10.491,0,18.467,7.162,26.179,14.089c8.181,7.347,15.907,14.285,26.675,14.285c16.04,0,19.94-14.284,20.874-20.463
|
|
c0.123-0.917,0.174-1.453,0.178-1.496c0.202-2.179,2.119-3.782,4.298-3.619C211.981,82.706,213.618,84.597,213.476,86.779z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-8 text-3xl font-bold">Large</h3>
|
|
<h3 class="mt-6 mb-6 text-4xl font-semibold text-purple-400 ">$50 / Month</h3>
|
|
<ul class="space-y-6 text-xl ">
|
|
<li class="dark:hover:text-purple-400 transition-color duration-300">Incl. Medium package</li>
|
|
<li class="dark:hover:text-purple-400 transition-color duration-300">Unlimited Bandwidth</li>
|
|
<li class="dark:hover:text-purple-400 transition-color duration-300">2.4TB DiskSpaces™</li>
|
|
<li class="dark:hover:text-purple-400 transition-color duration-300">Unlimited Submissions</li>
|
|
</ul>
|
|
<button
|
|
class="w-5/6 h-16 mt-12 text-xl font-semibold text-white bg-purple-400 rounded xl:mb-6">Order</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<!-- pricing 1 end -->
|
|
|
|
|
|
|
|
<!-- start of script section -->
|
|
<script type="text/javascript">
|
|
let toogler = document.getElementById("dark_mood_toogler");
|
|
let doc_html_el = document.getElementsByTagName('html')[0];
|
|
|
|
doc_html_el.addEventListener('keyup',(e)=>{
|
|
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
|
if(e.ctrlKey && e.keyCode =='220'){
|
|
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
|
|
|
}
|
|
})
|
|
doc_html_el.addEventListener('keyup',(e)=>{
|
|
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
|
if(e.ctrlKey && e.keyCode =='191'){
|
|
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
|
|
|
}
|
|
})
|
|
toogler.addEventListener('click',()=>{
|
|
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
|
console.log(doc_html_el.className);
|
|
})
|
|
</script>
|
|
<!-- end of script section -->
|
|
|
|
</body>
|
|
</html> |