WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<div className={styles.card} onClick={handleClick}> <div className={styles.imageWrapper}> <img src={imageUrl} alt={title} className={styles.image} /> </div> <div className={styles.content}> <h3 className={styles.title}>{title}</h3> <div className={styles.meta}> <span className={styles.author}>by {username}</span> <div className={styles.views}> <Eye size={16} /> <span>{views.toLocaleString()}</span> </div> </div> </div> </div>
.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; }
/* Replace with your JS Code (Leave empty if not needed) */
Validating your code, please wait...
HTML
CSS
JS
<div className={styles.card} onClick={handleClick}> <div className={styles.imageWrapper}> <img src={imageUrl} alt={title} className={styles.image} /> </div> <div className={styles.content}> <h3 className={styles.title}>{title}</h3> <div className={styles.meta}> <span className={styles.author}>by {username}</span> <div className={styles.views}> <Eye size={16} /> <span>{views.toLocaleString()}</span> </div> </div> </div> </div>
.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; }
/* Replace with your JS Code (Leave empty if not needed) */