Submitted about 2 years ago

Product preview card component solution

#bem#gsap#sass/scss#vite#animation

Hokuto Kato•50

@hokuto-kato

Preview site View code

This is a solution for...Product preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

My process

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

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