Skip to content
Submitted over 1 year ago

Product preview card component

Abdelrahman•90
@Dribbz
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

Hi there 👋🏼, I’m Dribbz and this is my solution for this challenge. 🚀

🛠️ Built With:

⚡️HTML5 ⚡️Vanilla CSS

The measurments between elements could've been more accurate i am trying to work on my semantic HTML / accesibility if you have any tips for me would be great🙌🏼

Thank you !✌️

Community feedback

  • Fer•3,970
    @fernandolapazPosted over 1 year ago

    Hi Dribbz, just a couple of little tips in case you want to take a look:

    • If you use padding instead of margin for the <body> it will avoid the vertical scrollbar you currently have.
    • And if you want to remove the empty space below the image between 600 and 605px (I guess you didn't even see it) you could do it by giving it a height: 100%.
    • Regarding your comment, I personally don't see any problem in terms of semantics/accessibility. 👌🏻

    I hope it’s useful, nice solution : )

    Regards,

    Marked as helpful
    1
    Abdelrahman•90
    @DribbzPosted over 1 year ago

    @fernandolapaz Hi Fer, honestly your comments were straight forward and extremly useful i fixed what you have pointed out to me and it fixed all the problems thanks a lot bro

    1

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