Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

testimonials grid section - flexbox | grid | mobile-first | responsive

Anosha Ahmed 9,340

@anoshaahmed

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


My first Junior level solution :) Any suggestions to help me improve my code are appreciated, especially box-shadow !!

Community feedback

Nuruddin 260

@nuruddin-bin

Posted

Great work...

Marked as helpful

1

Anosha Ahmed 9,340

@anoshaahmed

Posted

@nuruddin-bin thank u

0

@minahilakhtar

Posted

its really amazing

Marked as helpful

1

Anosha Ahmed 9,340

@anoshaahmed

Posted

@minahilakhtar thank u Minahil !

0

@mariamALLI

Posted

I am impressed with how your solution always alines with the design perfectly. Good job

2

Anosha Ahmed 9,340

@anoshaahmed

Posted

@mariamALLI thank u Mariam <3

0

@rida192

Posted

You Nailed it

2

Anosha Ahmed 9,340

@anoshaahmed

Posted

@rida192 thank u friend :)

1
Rohit 330

@Rohitgour03

Posted

Amazingly done, Great. 👍😍 I always wonder How you make it so pixel-perfect? 😱🤔 In my case, I always try to do that, but every time I failed to do so? 😭

1

Anosha Ahmed 9,340

@anoshaahmed

Posted

@Rohitgour03 Thank you Rohit :) It takes me REALLY long to get the sizing of each and every little thing right to get it looking as close to the design as possible

1
Rohit 330

@Rohitgour03

Posted

@anoshaahmed, But how do you do that? I mean how do you get the sizing values from the design?

0

@tiagocostarebelo

Posted

Ah awesome job. It's really nice to use the bar to preview your solution vs design and see that it matches. Great work!

1

Anosha Ahmed 9,340

@anoshaahmed

Posted

@tiagocostarebelo Thank you Tiago!

1
Kev 100

@Kev-prog-debug

Posted

Awesome ! Could please tell me how did you make to have equal spacing between each grid items ?

1

@LAGHRISSIREDA

Posted

@Kev-prog-debug you can use gap prroprety and give it what you want for example gap : 1rem;

1
Anosha Ahmed 9,340

@anoshaahmed

Posted

@Kev-prog-debug since the gap between rows and columns is not the same, i used row-gap and column-gap properties :)

0

@arkharman12

Posted

Right on!!! 💥

1

Anosha Ahmed 9,340

@anoshaahmed

Posted

@arkharman12 :)))

0

@AhmedMahim

Posted

It's awesome the design and the final project match perfectly

1

Anosha Ahmed 9,340

@anoshaahmed

Posted

@AhmedMahim thank you ahmed ! ^_^

0
P
AK 6,700

@skyv26

Posted

Really awesome, Rest I will tell you once I reach at 🏠..

1

P
AK 6,700

@skyv26

Posted

@anoshaahmed Kheench lo taang tum bhi expert bolkar

1
Anosha Ahmed 9,340

@anoshaahmed

Posted

@skyv26 i dont understand but im sure it means smthing funny

1
Anosha Ahmed 9,340

@anoshaahmed

Posted

@skyv26 Yes, i would appreciate that!

1

Please log in to post a comment

Log in with GitHub
Discord logo

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