Four-card-feature-section

Community feedback

• 

  Abdul Subhan•1,600

  @Esabdul

  Posted about 1 month ago

  .cards {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
  

  But only 4 cards exist.

  Since .card-1 and .card-4 span two rows, it might create uneven height distribution or odd alignment on some screens.

  Try using grid areas for a more controlled layout:-

  .cards {
    display: grid;
    grid-template-areas:
      "card1 card2 card4"
      "card1 card3 card4";
    gap: 25px;
  }
  
  .card-1 { grid-area: card1; }
  .card-2 { grid-area: card2; }
  .card-3 { grid-area: card3; }
  .card-4 { grid-area: card4; }
  

  Use clamp() for Better Responsive Typography Current:-

  h1 {
    font-size: 24px;
  }
  
  @media (min-width: 768px) {
    h1 {
      font-size: 36px;
    }
  }
  

  Improved:-

  h1 {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
  }
  

  This gives fluid scaling without breakpoints.

  Add alt Text that’s More Descriptive

  <img src="images/icon-supervisor.svg" alt="Magnifying glass icon representing Supervisor role">
  

  Improves accessibility and SEO.

  Add :hover / :focus Effects for Interactivity Cards feel static. To improve UX:-

  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  

  Add Transition to Pseudo-Bar

  .card::before {
    transition: background-color 0.3s ease;
  }
  

  12

  Marked as helpful