Skip to content
Submitted 7 months ago

Product-preview-card-component

Ayaat•460
@Yazeed-git
Preview site (opens in new tab)View code (opens in new tab)
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?

Getting used to the idea of creating components first which is very useful for real world projects that tent to increase in scale.

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

I encountered challenges with getting the negative spacing right, especially around the card content. I was able to adjust the widths and padding to a degree which solved the issue however, I think it would be more reasonable to figure out how to go about it from the start of the project.

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

I would appreciate any feedback on how to style the background image to look exactly like the design as looking at the solution and design side by side, I can tell they are a few pixels off looking similar.

Community feedback

  • Nadji CHABANE•500
    @CHBNDJPosted 7 months ago

    hi my friend take a look of the width and the height of you card to be able to be in the same size of the design. same things for the button add to cart. after that check the margin between the element to have the exact same design that the design :) good luck

    Marked as helpful
    0
    Ayaat•460
    @Yazeed-gitPosted 7 months ago

    I appreciate the feedback @CHBNDJ, and the margin and spacing is definitely something to consider. Thank you

    0

Please log in to post a comment

Log in with GitHub

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