Build cards that handle real product content

This project creates a responsive catalogue using grid for the outer layout and flex for each card. It demonstrates presentation only; a working cart requires separate application logic. Use descriptive text, actual links and an explicit button action.

HTML

  
Study resources
  

    

      
C
      
C Programming Workbook
      
Practice arrays, pointers and file handling with solutions.
      
₹199 Sample price
      View C workbook
    
    

      
CSS
      
Responsive CSS Project Notes
      
Build layouts and inspect their behavior on narrow screens.
      
₹149 Sample price
      View CSS notes
    
  

CSS

*, *::before, *::after { box-sizing: border-box; }
.tech-lesson-content { margin: 0; color: #0f172a; background: #f8fafc; font: 1rem/1.6 system-ui, sans-serif; }
.catalogue { width: min(92%, 72rem); margin: 2rem auto; }
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.25rem;
}
.product {
  display: flex; flex-direction: column; min-width: 0;
  padding: 1.25rem; border: 1px solid #cbd5e1;
  border-radius: 0.75rem; background: white;
}
.product__visual {
  display: grid; place-items: center; aspect-ratio: 4 / 3;
  background: #dbeafe; color: #172554; font-size: 3rem; font-weight: 700;
}
.product__title { font-size: 1.25rem; line-height: 1.3; overflow-wrap: anywhere; }
.product__description { margin-top: 0; }
.product__price { font-weight: 700; }
.product__price span { display: block; font-size: 0.875rem; font-weight: 400; }
.product__action {
  margin-top: auto; display: block; padding: 0.75rem;
  border-radius: 0.5rem; background: #1d4ed8; color: white;
  text-align: center; text-underline-offset: 0.2em;
}
.product__action:hover { background: #1e40af; }
.product__action:focus-visible { outline: 3px solid #0f172a; outline-offset: 4px; }

Why the layout works

The grid decides how many tracks fit. Each card is a column flex container, and auto top margin pushes its action below shorter descriptions. The visual placeholder avoids a broken external image dependency. Replace it with an img element if the image conveys product information, with meaningful alt text and a deliberate object-fit choice.

Test cases

1. Duplicate cards to create one, two, five and seven items.
2. Replace a title with a much longer real title; no text should be hidden.
3. Test 250px and wide containers, 200% zoom and keyboard-only navigation.
4. Check that actions align without a fixed card height.
5. Replace every sample price and href before publishing a real catalogue.

Next stage

If adding a cart, use a button for the action, announce success or failure accessibly, and keep price/stock validation on the server. Disabling a button visually is not enough to enforce a transaction rule. Do not label a nonworking demo control “Buy now”.