Skip to content
Submitted 7 months ago

Testimonials grid

Martin Mwaka•390
@Temceo
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?

Deploying the site in grid

What challenges did you encounter, and how did you overcome them?

Using grid, having mainly designed in flexbox previously.

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

Any improvements on the grid layout

Community feedback

  • John Pugh•340
    @JohnPugh688Posted 7 months ago

    Hi Martin,

    Your project looks great and to be honest i cant really fault it.

    To make your project look even closer to the original Ive found an extension you can use called pixel perfect pro which allows to to put the design over your page.

    feel free to click the link below or alternatively just google 'pixel perfect pro'

    https://chromewebstore.google.com/detail/pixel-perfect-pro/nnhifpoojdlddpnhjbhiagddgckpmpfb

    Hope this helps

    Marked as helpful
    1
  • jasoneczek•320
    @jasoneczekPosted 7 months ago

    Hi Martin, super nice job! Good use of custom properties and semantic html. One minor UI difference I noticed is that on desktop, the "quote" mark background image in the violet card should be a little further than the right edge, compared to the mobile version. If you want to match this a little closer you can easily adjust the distance in your media query. I noticed you used rem's, but you can also play with percentage for this.

    Marked as helpful
    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