Design comparison
Solution retrospective
Feel free to give feedback for my project. it helps me a lot :)
Community feedback
- @correlucasPosted about 2 years ago
πΎHello @Torawijaya, Congratulations on completing this challenge!
Great code and great solution! Iβve few suggestions for you that you can consider adding to your code:
To improve your component overall responsiveness, something you can do its to create a media query to save space in the
pricing section
to make each information in a different row. Hereβs the code for this media query.@media (max-width: 350px) { .nest { display: flex; flex-direction: column; justify-content: space-between; margin-bottom: 20px; align-items: center; } }
βοΈ I hope this helps you and happy coding!
Marked as helpful0 - @denieldenPosted about 2 years ago
Hello , You have done a good work! π
Some little tips to improve your code:
- use
main
tag to wrap the card and improve the Accessibility but not as a container of that one element - also you can use
article or div
tag instead ofmain
to the container card for improve the Accessibility - You can fix the effect
:hover
creating adiv
that appears on hover. I used tailwind but you can still see and understand which css properties you can use to do the same. Look here -> my solution - Using
<hr>
for the line is not the best way because this tag have a semantic meaning... in this case use div withborder-bottom
because this line is decorative - add
transition
on the element with hover effect - instead of using
px
use relative units of measurement likerem
-> read here
Keep learning how to code with your amazing solutions to challenges.
Hope this help π and Happy coding!
Marked as helpful0@Mirare23Posted about 2 years ago@denielden Thanks deniel, it helps a lot. Gonna use it for the further challange
1@denieldenPosted about 2 years ago@Torawijaya you are welcome and keep it up :)
0 - use
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