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

1`st product preview card component

@MariusSB-code

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


Any feedback is appreciated!

Community feedback

@Juarrison

Posted

Hi @MariusSB-code. Congratulations for your work. First of all, I think you could explore some semantic html tags. Here is some relevant information about it: https://www.w3schools.com/html/html5_semantic_elements.asp

Secondly, I think that instead of creating a special container for the image and applying the background-image property, it is more convenient to work with the image as an element itself and discard the container. On the other hand, you could use the flex-direction: column property for the mobile version and, with the application of media queries, change this property to flex-direction: row for the tablet and desktop versions. Greetings, I hope this comment has been useful.

Marked as helpful

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