The process is detailed in the README of the GitHub repo. Any feedback is welcome! 🎅
Oscar Miras
@omirasAll comments
- @omirasSubmitted almost 2 years ago@omirasPosted almost 2 years ago
Here's a direct link to the README explaining a little bit the creation process and the pros and cons of Tailwind for this project: Link to README repo
0 - @Sowaiba-01Submitted almost 2 years ago
Hi! This is my second solution on FrontEnd Mentor. I have designed a Card Component challenge using Flex, Grid and CSS animations. Any suggestions are highly appreciated.
@omirasPosted almost 2 years agoHi Sora,
Good implementation overall! Sections are well distributed and there is a clever use of flex and grid.
Some suggestions:
- Consider using the "gap" property to move each item away from the other in the stats section for mobile view: https://oscarm.tinytake.com/msc/NzcxNDk3NF8yMDczMTkyNw
- You could also use a CSS naming convention of your choice to make your CSS names more consistent: https://dev.to/ziizium/css-naming-conventions-5gd6
Great work!
Marked as helpful0 - @AhmedElshennawiSubmitted almost 2 years ago
This is my Second challenge, Kindly advise!
@omirasPosted almost 2 years agoI recommend you learn about media queries and responsive design.
Also, follow along with a nice mobile-first tutorial such as this: https://www.youtube.com/watch?v=B2WL6KkqhLQ
Marked as helpful0 - @Des2DevSubmitted over 2 years ago
Hello! guys 👋
I have completed the product preview card component challenge successfully. And I found difficulty in using BEM, please feel free to give feedback if you know how to improve BEM. I appreciate any feedback, thank you in advance 🙏
@omirasPosted almost 2 years agoI loved your solution: how the CSS code is structured and the use of CSS variables.
I learned how to use the <picture> HTML tag effectively, thanks!
0 - @AhmedElshennawiSubmitted almost 2 years ago
This is my Second challenge, Kindly advise!
@omirasPosted almost 2 years agoGood work! It seems that you are missing the mobile design, tough.
You also should implement active states when clicking the button (notice that the button becomes a darker green when clicked. Check design/active_states.jpg in the project folder).
https://www.w3schools.com/cssref/tryit.php?filename=trycss_sel_active
Marked as helpful0 - @prathmeshgodseSubmitted over 3 years ago
Since this is my first challenge on Frontend Mentor, any Feedback is appreciated. Had some trouble with the colors, figuring out what the colors are when the payment button is hovered. Also the positioning of the 'Annual Plan' and Plan Price was something I'm unsure about. I have tried my best to match it with the template, do let me know if there's an easier/efficient way to do the same.
@omirasPosted over 3 years agoHi!
Very good work! Here's my simple suggestion: you may use max-width to determine the max width of the container; so the plan details do not look too wide when the viewport increases:
https://oscarm.tinytake.com/msc/NTcwOTY5NV8xNzY0NTA3Ng
Regards,
Marked as helpful0