WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Card style
420
thefunnyjack
Open In Editor
Publish Your Code
Recommended
28 January 2024
Moving Card CSS Code
16 November 2024
HTML Gradient Card
19 May 2025
flex-box card
HTML
Copy
{title}
by {username}
{views.toLocaleString()}
CSS
Copy
.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; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */