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

Community feedback

• 

  Karol Binkowski•1,640

  @GrzywNPosted about 2 years ago

  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!

  Marked as helpful

  7

  ---

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @GrzywN Hello Karol! I agree with you, wasn't thinking about that when I've applied the hover. I already fixed it removing these hover effects. This is something I'll ever take in considerations for my next projects

  Thank you!

  2
• 

  Galina McKoy•150

  @GalinaM-GPosted about 2 years ago

  @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.

  Marked as helpful

  2

  ---

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @GalinaM-G Oh this I nice! I practice lettering and caligraphy too, even if I'm not too good, the style I like most is the spencerian penmanship/business writting. Thank you for the kind words Galina =)

  0

  

  Galina McKoy•150

  @GalinaM-GPosted about 2 years ago

  @correlucas I am in love with Spencerian and Copperplate;). I am sure you are good at calligraphy;).

  0
• 

  HinaSejaru124•310

  @HinaSejaru124Posted about 2 years ago

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

  Marked as helpful

  1

  ---

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @HinaSejaru124 Its true. Soon I'll fix it. Thanks.

  0
• 

  Adriano•38,250

  @AdrianoEscarabotePosted about 2 years ago

  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... 👍

  Marked as helpful

  1

  ---

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @AdrianoEscarabote Valeu! Na real nem sei o que fiz de errado lá, peguei um commit antes desse e resetei hahaha fiquei com preguiça de procurar o problema. Valeu mesmo, nem tinha visto que o layout tava quebrado!

  0

  

  Adriano•38,250

  @AdrianoEscarabotePosted about 2 years ago

  @correlucas ahahaha de boa man, mandei uma foto no insta

  1
• 

  ZweHtetPaing•90

  @zwehtetpaing098Posted about 2 years ago

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

  1
• 

  Huamao•30

  @wyang97Posted about 2 years ago

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

  1

  ---

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @wyang97 Thank you for the kind words!

  0
• 

  dadi-frontend•140

  @dadi-frontEndPosted about 2 years ago

  hello lucas it is a professionnel work best continuation

  1

  ---

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @dadi-frontEnd thank you ❤️

  0
• 

  Johnny•470

  @johnnysedh3llloPosted about 2 years ago

  great job my friend, absolutely splendid 👏🏼

  1

  ---

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @johnnysedh3lllo Thanks Johnny =)

  0
• 

  Blueberry Turtle•80

  @AbraCadabstraxPosted almost 2 years ago

  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.

  0
• 

  Jan Toma•400

  @jantomaPosted about 2 years ago

  very awesome friend, really greet job and professional work

  0