Skip to content
Submitted almost 2 years ago

Product preview card component solution

Hokuto Kato•50
@hokuto-kato
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

My process

Built with

What I learned

  • Image compression flow using @squoosh/lib
  • CSS Interaction
  • CSS Grid
  • BEM, CSS Structuring
  • SASS Mixin
  • GSAP Animation
  • Svg icons
  • Switch favicon between dark and light modes
  • Displaying webfont using webfont loader
  • Issue-driven development

Message

Any suggestions on how I can improve are welcome!

Community feedback

  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted almost 2 years ago

    REPLY:

    • During inspection on browser i found that the background-color property you've applied for .container is displaced by dev tools
    • So kindly, resolve that issue by applying background-color: #f2eae2 to body tag itself
    • If my answer helps you then providing an upvote will be very helpfull
    • I hope you learned a lot of stuffs during this project, Congrats brother

    MESSAGE:

    • Peace be upon you with god's mercy & blessings Mr.Hokuto..✨
    Marked as helpful
    4
    Hokuto Kato•50
    @hokuto-katoPosted almost 2 years ago

    @0xAbdulKhalid

    Thanks for the advice!

    True.

    There was also the problem that the .container was 100vh, which could create a blank space on the screen.

    I've fixed it based on your advice, thanks!

    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