Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product Preview Card using HTML, CSS, Flexbox, Grid.

@pmzpro

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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-tejada

Posted

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% and object-fit: cover to fix this. This will ensure that the image will cover the whole left side and that it won't be distorted

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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