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 using React.js

Adhi 240

@Adhi-S12

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


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.

Community feedback

@Devs-advocate

Posted

#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.

1

Adhi 240

@Adhi-S12

Posted

@Devs-advocate Actually I tried this when doing the project, but the issue is that since the text is on the container and the container has a background, the quote image goes behind the container

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