Submitted almost 2 years ago

Product preview card component solution

Hokuto Kato• 50

@hokuto-kato

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Built with

Vite - development environment
Sass - CSS preprocessor
PostCSS - CSS postprocessor
Pug - HTML preprocessor
Eslint - linter
Prettier - code formatter

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,580

@0xabdulkhaliq

Posted 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

Hokuto Kato• 50

@hokuto-kato

Posted 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!

Please log in to post a comment

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