<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>The Pricing Table</title>
<link href=
rel="stylesheet">
</head>
<body class="bg-gray-100">
<div class="container mx-auto py-12">
<h2 class="text-3xl font-bold
text-center text-blue-900 mb-6">
Select Your Plan
</h2>
<h3 class="text-xl text-center text-blue-900 mb-8">
C Programming Course: Beginner to Advance
</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div
class="price-col border border-gray-200
rounded-lg p-8 flex flex-col items-center
justify-center text-center shadow-lg transform
hover:scale-105 transition-transform duration-300">
<p class="text-lg text-blue-500 font-semibold mb-4">
Basic
</p>
<hr class="w-12 border border-blue-500 mb-6">
<h3 class="text-3xl font-bold text-blue-900 mb-6">
₹ 500/<span class="text-lg">month</span>
</h3>
<ul class="text-lg text-blue-900 mb-6">
<li>Live Online Classes</li>
<li>Hands on Project</li>
<li>Live Doubt Session</li>
<li>Certificate on Completion</li>
</ul>
<button
class="buy-btn bg-blue-500 hover:bg-blue-600
text-white font-semibold py-2 px-6 rounded-lg
transition duration-300 ease-in-out">Buy Now
</button>
</div>
<div
class="price-col border border-yellow-400
rounded-lg p-8 flex flex-col items-center
justify-center text-center shadow-lg transform
hover:scale-105 transition-transform duration-300">
<p class="text-lg text-yellow-400 font-semibold mb-4">
Standard*
</p>
<hr class="w-12 border border-yellow-400 mb-6">
<h3 class="text-3xl font-bold text-yellow-400 mb-6">
₹ 1000/<span class="text-lg">month</span>
</h3>
<ul class="text-lg text-yellow-400 mb-6">
<li>All Basic Features</li>
<li>Data Structure and Algorithms</li>
<li>Memory Management in C</li>
<li>Limit upto 2 users</li>
</ul>
<button
class="buy-btn bg-yellow-400 hover:bg-yellow-500
text-blue-900 font-semibold py-2 px-6 rounded-lg
transition duration-300 ease-in-out">Buy Now
</button>
</div>
<div
class="price-col border border-green-500 rounded-lg p-8
flex flex-col items-center justify-center text-center
shadow-lg transform hover:scale-105
transition-transform duration-300">
<p class="text-lg text-green-500 font-semibold mb-4">
Premium
</p>
<hr class="w-12 border border-green-500 mb-6">
<h3 class="text-3xl font-bold text-green-500 mb-6">
₹ 1600/<span class="text-lg">month</span>
</h3>
<ul class="text-lg text-green-500 mb-6">
<li>All standard Features</li>
<li>Recorded Lectures</li>
<li>Placement Assistance</li>
<li>Limit upto 4 users</li>
</ul>
<button
class="buy-btn bg-green-500 hover:bg-green-600
text-white font-semibold py-2 px-6 rounded-lg
transition duration-300 ease-in-out">Buy Now
</button>
</div>
</div>
</div>
<div id="message" class="hidden fixed bottom-0 left-0 right-0
bg-green-500 text-white text-center py-4">
Plan purchased successfully!
</div>
<script>
const buttons = document.querySelectorAll('.buy-btn');
const message = document.getElementById('message');
buttons.forEach(button => {
button.addEventListener('click', () => {
message.classList.remove('hidden');
setTimeout(() => {
message.classList.add('hidden');
}, 3000);
});
});
</script>
</body>
</html>