Submitted over 1 year ago
Product previw card component HTML CSS Solution
@AymanMountaj
Design comparison
SolutionDesign
Solution retrospective
Here is my solution to this challenge. I'm not 100% satisfied as it's not pixel perfect, but I still accept the result.
Thanks to this challenge I learned that:
- Spending a few more minutes thinking about how to proceed can save you a few hours of work
- Picture tag without a fallback image doesn't work
- Tutorials give you the illusion that you've learned a lot, but until you put things into practice, you don't know what you don't know
For now I will try to launch myself on some other challenge, make some mistakes, learn from them and then I will try this challenge once again.
Community feedback
- @hitmorecodePosted over 1 year ago
Congratulations well done. Actually is not so bad, just a few small things you can fix.
- You can add more space between current price and previous price.
- Add transition to the button, to make the hover animation smoother
- The image is not filling the left side in the height
body{ background-color: #F2EAE2; font-family: 'Montserrat', sans-serif; color: var(--aurometal-saurus, #6C7289); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; /* add this so that the card can be placed in the middle of the page */ } .container{ display: flex; flex-direction: column; background-color: white; border-radius: 10px; /* overflow: hidden; */ /* in this case you don't need this */ /* margin: 1.75rem 1rem; */ /* you can remove this, flexbox on the body will do the job */ justify-content: center; align-items: center; max-width: 21.4375rem; }
0
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