Skip to content
Submitted 11 months ago

Product Preview Card Component with Angular and Tailwind CSS

Leonardo Rezende•40
@leozende
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

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

  • Marcos Travaglini•4,840
    @BlackpachamamePosted 11 months ago

    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
    Leonardo Rezende•40
    @leozendePosted 11 months ago

    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

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