Product Preview Card (Vanilla CSS and Custom Hover State on Hero)

Great job, everything looks good!

The only thing I would suggest is not to prioritize UI over UX. Because of transforms to the right it might be harder to select the product name if someone wants to copy it to look for the same product on other pages. Also, there is a point on the left side of the button where the button escapes the user. I did the same thing not too long ago, but now if I want to use some active state using the transform property, I just scale the button up a bit instead of moving it.

Have a great day and continue to inspire people!

@Lucas Hello, Lucas,

I am not a designer at all but I can appreciate beautiful things (sometimes I practise calligraphy). I just leave my WOW here. :)

x

PS. Sorry, I can´t still be useful in coding, but maybe one day I will be.

You're a front-end god, but you forgot to strikethrough the other price

Fala mano, tudo bem?

Gostei muito de resultado do seu projeto, ficou insano o design.

Mano ta acontecendo um bug no seu layout, até troquei de navegador para ver se era algo comigo, mas não é ahauhauh vou te mostar o que está acontecendo:

Observei que você colocou grid-template-columns: repeat(2, 1fr); na tag main, porem a tag main tem apenas um div filha e está deixando uma coluna vazia, para arrumar isso eu fiz o seguinte:

Retirei estes códigos:

.container { /* display: grid; */ /* grid-template-columns: repeat(2, 1fr); */ }

Adicionei os mesmos que retirei, mas em outra div:

.photo-overflow { grid-template-columns: repeat(2, 1fr); display: grid; }

Para ajustar a responsividade:

@media (max-width: 43.75rem) { .container { /* display: grid; grid-template-columns: repeat(1, 1fr); */ } .photo-overflow { grid-template-columns: repeat(1, 1fr); display: grid; } }

O resto está ótimo! Espero que ajude... 👍

How do you know precisely the width, height, and position?

Man, your website looks beautiful :D. And thank your for your suggestions, I really appreciate it.

hello lucas it is a professionnel work best continuation

great job my friend, absolutely splendid 👏🏼

Perhaps a bit trivial, but I would swap out the shopping cart emoji for the one provided with the assets for the project.

Otherwise very good job.

very awesome friend, really greet job and professional work