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

Pricing Tier Cards made with VUE.js

@0xjoshva

Desktop design screenshot for the Pricing component with toggle coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Z-index was a big problem. I could not place the background svg's behind the cards. Other than that it was pretty easy to complete. If anyone can tell me how to fix this problem I will really appreciate it.

Community feedback

Divine Obeten 2,415

@Deevyn9

Posted

Hi Joshua, congrats on completing this project, your solution looks really great, However, You should tweak the z-index of the two white cards and the background pattern so the pattern doesn't appear on the cards.

Goodluck and happy coding!

0

@0xjoshva

Posted

@Deevyn9 Hi Deevyn, I did tweak the z-index of the .item class but it doesn’t seem to work.

1
Divine Obeten 2,415

@Deevyn9

Posted

@0xjoshva I gave it a look and the background has a z-index of -1, and the container is 0, try giving the white ones a higher z-index and the purple one an even higher z-index so it doesn't appear below the white cards.

0

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