Project: Product Card Component

📚 Lesson 19 of 30 • ⏱ 20 min read • Project

Build a reusable product card with an image, badge, title, star rating, price, and a hover lift effect. This is the kind of component used on every e-commerce and SaaS site.

HTML

<div class="card">
  <div class="card-image">
    <img src="course.jpg" alt="HTML Course">
    <span class="badge badge-new">NEW</span>
  </div>

  <div class="card-body">
    <p class="card-category">Web Development</p>
    <h3 class="card-title">Complete HTML Course</h3>

    <div class="card-rating">
      <span class="stars">★★★★★</span>
      <span class="rating-count">(2,840)</span>
    </div>

    <div class="card-footer">
      <span class="price">Free</span>
      <a href="/courses/html" class="btn-enroll">Enroll Now</a>
    </div>
  </div>
</div>

CSS — Card Styles

CSS

.card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;  /* clip image to border-radius */
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.25s, box-shadow 0.25s;
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.14);
}

.card-image {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.card:hover .card-image img { transform: scale(1.05); }

.badge-new {
  position: absolute;
  top: 12px; right: 12px;
  background: #6c63ff;
  color: white;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

CSS — Card Body

CSS

.card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;  /* fill remaining height */
}

.card-category {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6c63ff;
  margin: 0 0 0.5rem;
}

.card-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  line-height: 1.4;
}

.card-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.stars        { color: #f39c12; }
.rating-count { font-size: 0.85rem; color: #777; }

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;  /* push to bottom */
}

.price { font-size: 1.25rem; font-weight: 700; color: #27ae60; }

.btn-enroll {
  background: #6c63ff;
  color: white;
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: background 0.2s;
}
.btn-enroll:hover { background: #5a52d5; }

Grid of Cards

CSS

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
}
/* Responsive: 1 column on mobile, 2 on tablet, 3+ on desktop */

← Project: Navbar Next: Start JavaScript →