कार्ड शैली

अनुशंसित

23 May 2025

Paystack का उपयोग करके क्रेडिट कार्ड एनीमेशन

HTML

CSS

.card {
    border: 1px solid #2c2b3c;
    border-radius: 12px;
    overflow: hidden;
    background-color: #1f1d2e;
    transition: border 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.card:hover {
    border: 1px solid #a855f7;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transform: translateY(-4px);
}

.card:hover .title {
    color: #a855f7;
}

.imageWrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #2a283d;
}

.image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content {
    padding: 16px;
}

.title {
    font-size: 1rem;
    font-weight: 600;
    color: #f1f1f1;
    margin-bottom: 8px;
    line-height: 1.4;
}

.meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: #b0adc0;
    align-items: center;
}

.views {
    display: flex;
    align-items: center;
    gap: 4px;
}

.author {
    font-style: italic;
    color: #8a87a0;
}

कार्ड शैली

अनुशंसित

कार्ड लॉगिन

एनिमेटेड मौसम कार्ड

Paystack का उपयोग करके क्रेडिट कार्ड एनीमेशन

HTML

CSS

JS

अनुशंसित

कार्ड लॉगिन

एनिमेटेड मौसम कार्ड

Paystack का उपयोग करके क्रेडिट कार्ड एनीमेशन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS