Skip to content
Submitted 5 months ago

Testimonial Grid Pattern

Maan Al-Hababi•190
@MaanAlHababi
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Testimonials grid section
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

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

I'm proud of knowing I had an idea of how I could reorder the grid's items i.e. positioning the 5th testimonial card to the far right and have it take up 2 rows. However, part of me feels like my method is very hard-coded. I would appreciate feedback on this point.

What specific areas of your project would you like help with?

The z-index of the quotation mark image doesn't work as I intended it to. No matter what I tried, the quotation image always seems to appear in front of the rest of the testimonial card's content.

Community feedback

  • nekefer•200
    @nekeferPosted 4 months ago

    you need to center your grid content, for that just use the following style on the body :

    display: flex;
justify-content: center;
align-items: center;
    Marked as helpful
    1
  • nekefer•200
    @nekeferPosted 4 months ago

    For the quotation mark image the best thing to do is to use background image then you will not have z-index problem anymore: what I did is :

    background-image: url("./images/bg-pattern-quotation.svg");
background-repeat: no-repeat;
background-position: top right 50px;
    0

Please log in to post a comment

Log in with GitHub

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