Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product preview card component (HTML + SASS)

#accessibility#sass/scss#bem

@hector535

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Question

Is using an article tag without a heading element inside of it acceptable?

Built with

  • HTML
  • SASS
  • BEM
  • Flexbox
  • CSS Grid

I'm always open to suggestions on how to improve the accessibility of my solutions.

Thank you. 😊

Community feedback

Tux3erβ€’ 760

@Tux3er-Isma

Posted

Hi HΓ©ctor

Congrats for completing this challenge, it looks awesome πŸŽ‰πŸ‘πŸ»

I will give you some tips for your next project πŸ’‘:

  • In the responsive mobile you can add margin-top to the card and quit the position fixed in the author information and put it down of the card

  • To get your hover states more cool I recomend you to put transition. This is the documentation, πŸ“–

You have done it perfect, congrats πŸ§πŸ‘πŸ»πŸ˜‰

Have a nice coding ⌨️🌟

Marked as helpful

0

@hector535

Posted

@Tux3er-Isma Thank you for taking the time to give me some tips.

You're absolutely correct; utilizing margin-top instead of position fixed is a fantastic idea; I don't know why I didn't think of it before.

I should have used the transition property to make the hover state more elegant. πŸ˜…

1

Please log in to post a comment

Log in with GitHub
Discord logo

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