Skip to content
Submitted 7 months ago

Testimonial Grid Section

ISAAC EDZORDZI FIAVOR•110
@ISAAC-EDZORDZI-FIAVOR
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 improving in my css.

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

my Grid layout is not allowing not to give margin left to the grid-container. top , right, bottom are all working except for the left.

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

some of the font colors are confusing me

Community feedback

  • yas-avocad•380
    @yas-avocadPosted 7 months ago

    Hey!

    1. Be careful, because each box has a box-shadow element in the original design.

    2. And also take note of your border-radius property. I would probably set it in px rather than rem, so that you can choose a more accurate value that is less rounded.

    3. I find that your CSS a little hard to follow with the classes set as item1, item2, etc. Maybe use the names of the people to keep track :)

    4. This one was really challenging for me- I used flex box around Daniel and Jonathan and around Jeanette and Patrick. Then, I used flex box around those (I'm not sure if it's the best way since it took forever to get right). But, I think with the grid that you used, you lose the ability to fine-tune the margins between each element.

    5. The font colors use alpha- so hsla or rgba - color: rgba(250, 250, 250, .7);. So this is the white, with opacity set at .7

    I hope this helps. I would encourage you to maybe ask the discord on how to better align the boxes. :)

    1
  • Aaqib•170
    @aaqibqadeerPosted 7 months ago

    nice work

    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