Jinsi ya Kutengeneza Interactive Pricing Cards Animation

Interactive pricing cards zinaongeza UX kwenye websites za services au products. Animations zinaweza kufanya hover effects, scale, na highlight active plan.

✅ HTML Example
<div class="pricing-container">
<div class="pricing-card">
<h2>Basic</h2>
<p>$9/month</p>
<ul>
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
</ul>
<button>Choose Plan</button>
</div>

<div class="pricing-card featured">
<h2>Pro</h2>
<p>$29/month</p>
<ul>
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
<li>Feature 4</li>
</ul>
<button>Choose Plan</button>
</div>

<div class="pricing-card">
<h2>Enterprise</h2>
<p>$99/month</p>
<ul>
<li>All Features</li>
</ul>
<button>Choose Plan</button>
</div>
</div>

✅ CSS (Interactive + Animation)
.pricing-container {
display: flex;
gap: 20px;
justify-content: center;
padding: 40px;
flex-wrap: wrap;
}

.pricing-card {
background: #fff;
padding: 30px;
border-radius: 15px;
width: 250px;
text-align: center;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: transform 0.3s, box-shadow 0.3s;
cursor: pointer;
}

.pricing-card:hover {
transform: translateY(-10px) scale(1.05);
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.pricing-card.featured {
background: #0d6efd;
color: #fff;
transform: scale(1.05);
}

.pricing-card button {
margin-top: 15px;
padding: 10px 20px;
border: none;
background: #2196f3;
color: #fff;
border-radius: 8px;
cursor: pointer;
transition: background 0.3s;
}

.pricing-card button:hover {
background: #0a58ca;
}

✅ Jinsi Inavyofanya Kazi

transform + transition → hover animation

.featured → highlights main plan automatically

flex-wrap → ensures responsiveness kwa mobile screens

🔗 Links Za Kujifunza Zaidi

🌐 Faulink Official Website:
https://www.faulink.com/

📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php

📲 WhatsApp Msaada:
https://wa.me/255693118509