Submitted 11 months ago

Product-preview-card-component JS / CSS /HTML

Victor Tyslenko• 90

@VicTyslenko

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

In this component in CSS file I used names of the classes and their parent-blocks, because it is a good practice to prevent duplicates.

In svg file I used special settings to adjust the size.

In JavaScript file I created a function to adapt different pictures regarding to monitor sizes, used window.matchMedia and JS inner tools.

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