Skip to content
Submitted 13 days ago

Product preview Card component

Peace-Divine•50
@Peace-Divine
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?

I am proud of getting the responsive part of both the mobile and desktop view of this project. one thing is would do differently is work with relative units.

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

the challenge was making the design especially the mobile view to work as expected. i overcame by using relative units

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

accessibility

Community feedback

  • zardrick•180
    @zardrickPosted 12 days ago

    1. Layout Issues on Desktop, you need to adjust the paddings and font sizes, the desktop layout feels too cramped. Button padding is also too large.

    2. Unnecessary <br> Tags in Paragraph The <br> tags inside the paragraph (<p class="paragraph">) cause uneven line breaks. Fix: Remove the <br> tags and use line-height for spacing instead.

    3. Redundant Font Weights Some elements (like .paragraph and h2 p) have font-weight: 700; multiple times, which isn’t needed.

    Overall review: Great effort! Good use of semantic HTML, structured CSS, and responsiveness. Needs minor fixes in layout!

    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