پیشنمایش زنده
کد HTML
<div class="finmate-card">
<div class="finmate-card-balance">
<p class="finmate-card-label">Available Balance</p>
<p class="finmate-card-amount">₹56,720.00</p>
</div>
<div class="finmate-card-summary">
<div>
<p class="finmate-card-label">Income</p>
<p class="finmate-card-green">+ ₹20,000</p>
</div>
<div>
<p class="finmate-card-label">Expenses</p>
<p class="finmate-card-red">– ₹5,340</p>
</div>
</div>
</div>
کد CSS
.finmate-card {
background: linear-gradient(145deg, #1a1a1f, #0e0e10);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 20px;
padding: 25px;
width: 300px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
color: white;
font-family: "Poppins", sans-serif;
}
.finmate-card-balance {
margin-bottom: 20px;
}
.finmate-card-label {
font-size: 0.9rem;
color: #b0b0b0;
margin-bottom: 5px;
}
.finmate-card-amount {
font-size: 1.8rem;
color: #f5f5f5;
margin: 0;
font-weight: 600;
}
.finmate-card-summary {
display: flex;
justify-content: space-between;
}
.finmate-card-green {
color: #4ade80;
font-weight: bold;
font-size: 0.9rem;
}
.finmate-card-red {
color: #f87171;
font-weight: bold;
font-size: 0.9rem;
}