Skip to content
Submitted 10 months ago

Sneakers Ecommerce Website using React, TailwindCSS, Vite and others

Bello Hammed•170
@Professor1345
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...E-commerce product page
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

I went through alot of stress while coding it. Feel free to check it out and drop comment.

I have a question. How can I change the svg color on hover. I tried allota of things, like hover:fill-yellow, hover:stroke-yellow. They all didn't work. I only manage filter (invert).

Your response is very much welcomed.

Community feedback

  • K01wfd•690
    @K01wfdPosted 10 months ago

    Hi Bello Hammed, oneway on how to change the icon fill color dynamically, is to have a css custome variable for the fill color alongside with fallback color:

    <path fill="var(--icon-color, #000)"></path>

.icon:hover{
--icon-color:#fff;
}

    i recommend to group your svg icons in a sprite.svg file, there are many free online tools to do that.

    0
    Bello Hammed•170
    @Professor1345Posted 10 months ago

    @K01wfd Thanks. Let me try it out.

    0

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