Style de carte

421 thefunnyjack

Ouvrir dans l'éditeur Publiez votre code

Recommandé

15 July 2025

Modèle HTML de générateur de citations en français

20 June 2025

Modèle de tableau de bord d'administration HTML

31 January 2025

Films de cartes CSS pures 3D

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

Recommandé

Modèle HTML de générateur de citations en français

Modèle de tableau de bord d'administration HTML

Films de cartes CSS pures 3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS