Submitted about 1 year ago

Testimonials grid section using React.js

Adhi•240

@Adhi-S12

A solution to the Testimonials grid section challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

I assumed it would take a very little time if I did this in react since there are resuable components in this challenge. But, I actually would've completed it very quickly if I've used vanilla html,css

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

couldn't think of a way to get the quote svg to move behind the text element , finally gave up and reduced opacity of the quote to look somewhat decent enough and finished the challenged. Still not satisfied with the result.

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

I miscalculated on the time it would take to finish the challenge. My assumption that React will help to reduce the time taken to finish this was wrong. Give me ideas on how to move the quote behind the text element in the first card.

Code

Please log in to post a comment

Community feedback

Devs-advocate•240

@Devs-advocate

Posted about 1 year ago

#container {    
    position: relative;
    z-index: 0;
}

#img {  
    position: absolute;
    top: 0;
    right: 23px;
    z-index: -1;
}

Give the image a lower z-index so it's behind the text. There's a lot of online resources that can give better examples than I have, but making your image absolute and the container it's in, relative will place the image. The z-index will modify if it's in front or behind. Apart from that, your structure and details are very good. Nice work.

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