कार्ड शैली

अनुशंसित

31 March 2024

.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;
}

कार्ड शैली

अनुशंसित

कार्ड हिंडोला जावास्क्रिप्ट

UNO कार्ड HTML CSS उदाहरण

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

HTML

CSS

JS

अनुशंसित

कार्ड हिंडोला जावास्क्रिप्ट

UNO कार्ड HTML CSS उदाहरण

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

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS