Skip to content
Submitted 6 months ago

Testimonials grid section using React.js

Adhi•240
@Adhi-S12
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Testimonials grid section
  • HTML
  • CSS
2junior

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•240
    @Devs-advocatePosted 6 months 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.

    1
    Adhi•240
    @Adhi-S12Posted 6 months ago

    @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

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