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

Product Preview Card Component with Angular and Tailwind CSS

@leozende

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


The most problematic part was trying to get the page to work on github pages... After so many attempts I just gave up and looked elsewhere. Furthermore, there is a slight problem with pressing the button, which I tried to reduce the britness, but the text inside it is also affected , even when I put filter:none

Community feedback

@Blackpachamame

Posted

This looks pretty good!

The problem with the active is that you are applying a filter to it, I think that in this case a hover would be better. And what you have to apply to the hover is a background color that is the same as the one you use for the button, only a little darker.

It is also not necessary to put a div inside the button, you can simply put the flex classes on the button.

PS: It is not possible to deploy a project in react to github pages, the alternatives are vercel or netlify (as in your case).

Marked as helpful

1

@leozende

Posted

I was using the div just to see if I could make the filter work on the button and not on the text, but it might be better to change the background color like you said. I will look for netlify and vercel. @Blackpachamame

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