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- First practice using GRID

Luis 930

@luis08201

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


Hi everyone. This is my first time using GRID. I would love if you give me feedback about the code. I really appreciated it.

Community feedback

Shahin NJ 1,190

@SJ-Nosrat

Posted

Hi Luis, Wonderful solution! Looks perfect to me!

For your background-pattern-quotation-marks I'd add it as a background-image as it gives more control to position it, as follows:

 .testimonial-1 {
  /* ADD THE BELOW CODE */
  background-color: var(--moderate-violet);
  background-image: url(/*your path here*/);
  background-repeat: no-repeat;
  background-position: top right 1.5rem;
}

Your use of the grid-template-areas is really great; although you can remove the following code: grid-template-rows: repeat(2, auto); as CSS Grid will put them in implicitly.

Once again super job!

Best of luck with your coding journey!

Marked as helpful

1

Luis 930

@luis08201

Posted

Hi @shahin1987, Thank you for your feedback :D. I already made the changes that you mentioned. Regards.

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