Responsive testimonial page using CSS grid

Hi there o/,

To get the z-index to work where the text is in front of the quotation marks image, you'll need to set a z-index on the text (in this case the <h4> element) and also set the position property to anything other than static which is the default value. For example,

.cards.Daniel h4 {
  position: relative;
  z-index: 1;
}

An alternative solution to this which might be cleaner is to add the quotation marks through the background-image property instead of using an <img> element. It will naturally be behind the text, and you can adjust the position with the background-position property. For example,

.cards.Daniel {
  background-image: url(/images/bg-pattern-quotation.svg);
  background-repeat: no-repeat;
  background-position: top right 15%;
}

Here are the MDN links to find out more:

• z-index
• background-position

Hope this helps

Hey good job completing this challenge

Keep up the good work

Your solution looks great however I think that the box-shadow on the cards are supposed to be subtle.

In terns of accessibility issues simply wrap all your content between main tags

I hope this helps

Cheers Happy coding 👍