Product Preview Card using HTML, CSS, Flexbox, Grid.
Design comparison
Solution retrospective
Hello Everyone!! =)
This is my second challenge. Initially, I had some difficulties with the flex and grid positions, but I figured out that my HTML semantics were not correct
What I Learned in this challenge
- Learned how to make the layout responsive for the user experience depending on their device's screen size.
- Learned how to add a small logo inside a button.
- Learned the importance of CSS reset.
- Learned how to make focus state for interactive elements.
Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
Feel free to say what I could've done better
this code got inspired in Kevin Powell video
Community feedback
- @david-tejadaPosted about 1 year ago
This looks very nice. One small issue is that at a viewport width of between 600px and 622px the image doesn't completely cover the left site of the card, which doesn't look good. You can use
height: 100%
andobject-fit: cover
to fix this. This will ensure that the image will cover the whole left side and that it won't be distorted0
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