Submitted 7 months ago

Product Preview Card

Imerzion•120

@Imerzion

Preview site View code

This is a solution for...Product preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Happy with the overall outcome on this one. Feel like I'm improving overall. Would advise myself in the future to take a little more time with the HTML structure as I had to re-jig it a little bit to make it work at desktop.

What challenges did you encounter, and how did you overcome them?

As stated above, had some trouble with my HTML structure when moving from mobile over to desktop. Had to re-write some of my HTML, but was a pretty simple fix overall.

Had some trouble with a gap displaying between the image at desktop, but Googled a fix for that pretty quickly.

What specific areas of your project would you like help with?

Still feel like I'm having trouble when it comes to declaring widths of my containers.

Design appears to have a more vertical feel as opposed to my landscape outcome. Not sure what is causing such the drastic difference.

Community feedback

iamporrrrrrrrr•190
@iamporrrrrrrrrPosted 7 months ago
The solution included semantic HTML. Maybe the dimensions of the boxes, texts, and paddings on the desktop version could be changed to more closely resemble the original design. The mobile version looks great. Overall, it is an excellent solution, and you have done well in creatin g a responsvie web design.
0

Please log in to post a comment

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