payment-page

master
Suvodip Ghosh 2023-02-28 21:42:16 +05:30
parent fb1c2efdc3
commit 7f5b73d82d
3 changed files with 18 additions and 7 deletions

View File

@ -29,13 +29,14 @@
</section> </section>
<section class="container mx-auto px-4 xl:px-24 my-16"> <section class="container mx-auto px-4 xl:px-24 my-16">
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 place-items-center my-4 gap-6"> <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 place-items-center my-4 gap-6">
<div class="grid grid-rows-2 w-full "> <div class="grid grid-rows-2 w-full h-full">
<div class="grid background place-items-center rounded-lg py-8"> <div class="grid background place-items-center rounded-lg py-8">
<h1 class="text-3xl text-white ">Monthly</h1> <h1 class="text-3xl text-white ">Monthly</h1>
</div> </div>
<div class="grid shadow-2xl rounded-b-xl"> <div class="grid shadow-2xl rounded-b-xl place-items-center">
<h1 class="text-4xl p-1 text-center">&#36;100</h1> <h1 class="text-4xl p-1 text-center">&#36;100</h1>
<h1 class="text-color-1 text-center">(inclusive of all costs)</h1> <h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
<a href="/payment" class="py-2"><button class="shadow-2xl rounded-lg background text-white p-2 px-4 text-lg w-fit">Subscribe Now</button></a>
</div> </div>
</div> </div>
<div class="grid grid-rows-2 w-full"> <div class="grid grid-rows-2 w-full">
@ -46,6 +47,7 @@
<h1 class="text-4xl p-1"><span class="line-through text-slate-400">&#36;600</span>&nbsp;&nbsp;&#36;540 </h1> <h1 class="text-4xl p-1"><span class="line-through text-slate-400">&#36;600</span>&nbsp;&nbsp;&#36;540 </h1>
<span class="text-lg text-color-2">(10% Discount)</span> <span class="text-lg text-color-2">(10% Discount)</span>
<h1 class="text-color-1 text-center">(inclusive of all costs)</h1> <h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
<a href="/payment" class="py-2"><button class="shadow-2xl rounded-lg background text-white p-2 px-4 text-lg w-fit">Subscribe Now</button></a>
</div> </div>
</div> </div>
<div class="grid grid-rows-2 w-full"> <div class="grid grid-rows-2 w-full">
@ -56,10 +58,11 @@
<h1 class="text-4xl p-1"><span class="line-through text-slate-400">&#36;1200</span>&nbsp;&nbsp;&#36;1020 </h1> <h1 class="text-4xl p-1"><span class="line-through text-slate-400">&#36;1200</span>&nbsp;&nbsp;&#36;1020 </h1>
<span class="text-lg text-color-2">(15% Discount)</span> <span class="text-lg text-color-2">(15% Discount)</span>
<h1 class="text-color-1 text-center">(inclusive of all costs)</h1> <h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
<a href="/payment" class="py-2"><button class="shadow-2xl rounded-lg background text-white p-2 px-4 text-lg w-fit">Subscribe Now</button></a>
</div> </div>
</div> </div>
</div> </div>
<div class="flex justify-center my-16"><button class="background text-white p-3 px-6 text-lg rounded-tl-xl rounded-br-xl">Subscribe Now</button></div> <!-- <div class="flex justify-center my-16"><button class="background text-white p-3 px-6 text-lg rounded-tl-xl rounded-br-xl">Subscribe Now</button></div> -->
</section> </section>
<section class="container mx-auto my-16 px-4"> <section class="container mx-auto my-16 px-4">
<div class="flex flex-col lg:flex-row place-items-center justify-center xl:px-56"> <div class="flex flex-col lg:flex-row place-items-center justify-center xl:px-56">

View File

@ -26,13 +26,14 @@
</section> </section>
<section class="container mx-auto my-16 px-4 xl:px-24"> <section class="container mx-auto my-16 px-4 xl:px-24">
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 place-items-center my-4 gap-x-16 gap-y-6"> <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 place-items-center my-4 gap-x-16 gap-y-6">
<div class="grid grid-rows-2 w-full "> <div class="grid grid-rows-2 w-full h-full">
<div class="grid background place-items-center rounded-lg py-8"> <div class="grid background place-items-center rounded-lg py-8">
<h1 class="text-3xl text-white ">Monthly</h1> <h1 class="text-3xl text-white ">Monthly</h1>
</div> </div>
<div class="grid shadow-2xl rounded-b-xl"> <div class="grid shadow-2xl rounded-b-lg place-items-center">
<h1 class="text-4xl p-1 text-center">&#36;100</h1> <h1 class="text-4xl p-1 text-center">&#36;100</h1>
<h1 class="text-color-1 text-center">(inclusive of all costs)</h1> <h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
<a href="/payment" class="py-2"><button class="shadow-2xl rounded-lg background text-white p-2 px-4 text-lg w-fit">Subscribe Now</button></a>
</div> </div>
</div> </div>
<div class="grid grid-rows-2 w-full"> <div class="grid grid-rows-2 w-full">
@ -43,20 +44,22 @@
<h1 class="text-4xl p-1"><span class="line-through text-slate-400">&#36;600</span>&nbsp;&nbsp;&#36;540 </h1> <h1 class="text-4xl p-1"><span class="line-through text-slate-400">&#36;600</span>&nbsp;&nbsp;&#36;540 </h1>
<span class="text-lg text-color-2">(10% Discount)</span> <span class="text-lg text-color-2">(10% Discount)</span>
<h1 class="text-color-1 text-center">(inclusive of all costs)</h1> <h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
<a href="/payment" class="py-2"><button class="shadow-2xl rounded-lg background text-white p-2 px-4 text-lg w-fit">Subscribe Now</button></a>
</div> </div>
</div> </div>
<div class="grid grid-rows-2 w-full"> <div class="grid grid-rows-2 w-full">
<div class="grid background place-items-center rounded-lg"> <div class="grid background place-items-center rounded-lg">
<h1 class="text-3xl text-white ">Yearly</h1> <h1 class="text-3xl text-white h-fit">Yearly</h1>
</div> </div>
<div class="grid shadow-2xl rounded-b-xl place-items-center"> <div class="grid shadow-2xl rounded-b-xl place-items-center">
<h1 class="text-4xl p-1"><span class="line-through text-slate-400">&#36;1200</span>&nbsp;&nbsp;&#36;1020 </h1> <h1 class="text-4xl p-1"><span class="line-through text-slate-400">&#36;1200</span>&nbsp;&nbsp;&#36;1020 </h1>
<span class="text-lg text-color-2">(15% Discount)</span> <span class="text-lg text-color-2">(15% Discount)</span>
<h1 class="text-color-1 text-center">(inclusive of all costs)</h1> <h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
<a href="/payment" class="py-2"><button class="shadow-2xl rounded-lg background text-white p-2 px-4 text-lg w-fit">Subscribe Now</button></a>
</div> </div>
</div> </div>
</div> </div>
<div class="flex justify-center my-16"><button class="background text-white p-3 px-6 text-lg rounded-tl-xl rounded-br-xl">Subscribe Now</button></div> <!-- <div class="flex justify-center my-16"><button class="background text-white p-3 px-6 text-lg rounded-tl-xl rounded-br-xl">Subscribe Now</button></div> -->
</section> </section>
<section class="container mx-auto my-16 px-4"> <section class="container mx-auto my-16 px-4">
<div class="flex flex-col lg:flex-row place-items-center justify-center xl:px-56"> <div class="flex flex-col lg:flex-row place-items-center justify-center xl:px-56">

5
src/pages/payment.astro Normal file
View File

@ -0,0 +1,5 @@
<main>
<div>
<section></section>
</div>
</main>