Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Yash Kadamβ€’ 280

    @yash-278

    Posted

    Great Work !!! Looks great, sizes can be adjusted, but you nailed the overall layoutπŸ™Œ.

    Try toning down shadows. Also try using a CSS Shadow generator online, It lets you play with shadows interactively.

    Also, deep and dark shadows should be avoided, It generally doesn't look that good.

    Congrats on completing the challengeπŸŽ‰.

    Marked as helpful

    1
  • Arjun J Vβ€’ 80

    @Arjunjv

    Submitted

    Challenges faced: *Aligning text with respect to the icons *Not able to figure out the solution for hover on eye image(so changed the opacity on hover in my solution). If someone can explain and give the solution for that will be helpful *vertical alignment of the card

    Would be helpful if someone provides any resource from which i can learn about aligning elements in CSS.

    Yash Kadamβ€’ 280

    @yash-278

    Posted

    Great work ARJUN πŸ‘ The card design is perfect.

    Now on to the problems you faced:

    • For vertical alignment of icon you can refer to vertical-align CSS property. MDN Link
    • For centering the card, now this is a tricky one & more of a hack than a solution, but I personally use this.
    .centered-element {
      margin: 0;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    

    This works almost everytime, mostly for single element stuff.

    • Lastly for icon overlay, it's complicated to explain it here, but here's a resource for solution W3Schools

    Overall nice solution and try searching wherever you're stuck, because searching is a also a important aspect of code.

    Happy Coding! Hope you found this useful πŸŽ‰

    Marked as helpful

    0
  • Praveen Perumalβ€’ 740

    @solvedbiscuit71

    Submitted

    I am happy to complete this challenge 😊. it was a lot of fun, as it's tested my CSS skills (Emotion in particular) and react way of thinking.

    I went for some small details like closing the cart when clicking outside the cart and simple CSS animation.

    Any suggestion or tips to further improvement of my solution is welcome! πŸ€—

    Yash Kadamβ€’ 280

    @yash-278

    Posted

    Woah, aside from few line-height and shadows, this is a pixel-perfect solution. Awesome work Praveen.

    0
  • Yash Kadamβ€’ 280

    @yash-278

    Posted

    Hi, lleonardus! πŸ‘‹ Good effort on this challenge! πŸ‘

    It's great that you modularized the CSS files, easy to navigate indeed. If you haven't yet, try TailwindCSS, It's a different approach on styling sites. One improvement that I can suggest is :

    • Add max-width to the main container so that it wont stretch on larger screens

    Use Grid Alignment to learn more about aligning items inside the grid.

    That's it! Hope you find this useful! 😁

    Marked as helpful

    1
  • Williamβ€’ 110

    @wi2liamalpha

    Submitted

    Feel free to leave some feedback. I find difficult when dealing with box-shadow. Your feedback will help improving my code.

    Yash Kadamβ€’ 280

    @yash-278

    Posted

    Hi, William! πŸ‘‹ Good effort on this challenge! πŸ‘

    One improvement that I can suggest is :

    • Keep alt="" empty for all decorative images for accessibility purposes. MDN Article

    That's it! Hope you find this useful! 😁

    1
  • Mickβ€’ 300

    @Mick-2097

    Submitted

    I could spend the next 3 days playing with the box shadow and not get it right .!?

    Yash Kadamβ€’ 280

    @yash-278

    Posted

    Great Work, You probably forgot to add a background to the arrow icon, other than that it looks pixel perfect.

    Box shadows are a big pain πŸ˜‚, there are few handy tools available online Check this site out : Box Shadow Generator

    Marked as helpful

    1