Skip to content
Submitted 4 months ago

Frontend Mentor | Product preview card component

Bhushan-Chaudhari•110
@bhushu0910
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?

The implementation of the CSS part was easy and was proud of it

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

styling div class and div ID was a little confusing but solved it

Community feedback

  • HaDo Dev•310
    @hadodevPosted 2 months ago

    Hi @bhushu0910,

    Nice solution. Well done!

    My recomendations:

    • Try to acheive better the space between the elements. The <div class="right"> must have a wider padding-inline or margin-inline.
    • The image must have border-radius in the left side (desktop design).
    • I think that the main goal of the challenge is get a responsive layout. Your solution doesn't adapt for small devices.

    For responsive design, check out this ressource: 1-Line Layouts - 10 Modern CSS layout and sizing techniques that highlight just how robust and impactful a single-line of styling code can be.

    Keep going!!

    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