Prodcut Review Card (responsive design, + extra dark mode card added)
Design comparison
Solution retrospective
This has been built using mainly Tailwind. As maybe not every one might be familiar with Tailwind I have included the SCSS equivalent as commented code in the Card.module.scss file.
I am still torn on whether I prefer using scss modules and keeping all the css there and accessing it via a styles object (as in here:
https://github.com/PaulHaze/frontend-mentor/blob/main/src/features/newbie/product-card/ReviewCard.tsx )
or if I prefer to keep all the styles in the main tsx file like Tailwind recommends (as you can see here:
https://github.com/PaulHaze/frontend-mentor/blob/main/src/features/newbie/product-card/ReviewCardMobile.tsx )
There are pros and cons to both. I would be interested to hear what the community here thinks.
The main card is responsive but if you want to see JUST the mobile or the desktop version then you can select that using the icons in the header.
Dark mode can be seen by toggling the switch in the top right.
If you want to view the card just on its own then just click the card.
This is part of what eventually will be a site where I will attempt to do every Frontend Mentor project possible. The card lives in a 'features/newbie/product-card' directory and is imported into and displayed via 'pages/newbie/product-card/index.tsx'. The homepage for the site is here:
https://frontendmentor-artemist.vercel.app/
TODO:-
- Write detailed README
- Add link to my Figma design file that I made for this project.
I welcome any and all feedback. Thanks for checking it out.....
Community feedback
Please log in to post a comment
Log in with GitHubJoin 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