Responsive Preview card with HTML, CSS & JS

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  Hello, once again, Hoophelie! 👋

  Nice to see you complete yet another challenge! 😀 Good work on this one! 👍 I like the smooth animation that you added to the social media popup! 🙌

  I'd like to suggest following the helpful suggestions given by AgataLiberska and pikamart—since that was nearly exactly what I was going to suggest for your solution! 😆

  Of course, keep coding (and happy coding, too)! 😁

  1
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, good work on this and it really looks good in mobile and desktop. Resizes well, good for that and the animation of the popup is really smooth, adding a cursor: pointer to it would be much better. I looked into your js, and it seems fine ^

  1

  ---

  

  Hoophelie•110

  @HOOPheliePosted over 3 years ago

  Aaand, I added it! Thank you for taking time to review my code 😀

  0
• 

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  Hi @HOOPhelie, your solution looks very nearly pixel perfect, very impressive :) I think you could improve it by adding some styles to hover state on the buttons and the links in the modal.

  I would personally also set a max-width on the card in mobile design so it doesn't stretch too much, that way you could see more of the image - since it's an article about interior design, I think it plays quite an important role in the component. Another way to save that image would be to use vw unit to set the height of the image container - it's a trick I figured out recently and I've been loving it :D

  I don't have enough experience to assess your javascript, but I mean... it works really nicely :) The way I did it was to use z-index so that the button would be "above" the modal when it's displayed - but I don't think that wouldn't work well with the animation you've got.

  Hope this helps :)

  1

  ---

  

  Hoophelie•110

  @HOOPheliePosted over 3 years ago

  Hello @AgataLiberska!

  Thank you for your review, I indeed overlooked those details, which are important for users' experience! 😁

  0