Submitted 7 months ago

Testimonial grid section with responsive design

Peetawit Vongchanapibul•200

@pete13232

A solution to the Testimonials grid section challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

This challenge contains many card themes, so I structured my HTML using the BEM (Block-Element-Modifier) methodology to keep the codebase maintainable and scalable. Additionally, I organized related CSS sections with comments for better readability.

Here are some example:

<div id="card-1" class="card card--purple">
  <div class="card__head">
    <img src="" class="highlight" alt="daniel_image">
    <div class="card__profile">
      <p class="card__profile-name"></p>
      <p class="card__status"></p>
    </div>
  </div>
  <div class="card__message">
    <h1 class="card__message-title"></h1>
    <p class="card__card__message-body"></p>
  </div>
</div>

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Peetawit Vongchanapibul's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord