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 review card html & css challenge

Shay 20

@Shayinur

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@ereljapco

Posted

Hey, Shay! Nice to see your finished solution for this challenge. Just submitted mine, as well :)

Just some few points:

Re: accessibility

  • You could wrap the container inside the main tags and the attribution inside the footer tags.
  • For the icon tag, since its for decoration only, you could add a blank alt alt=""

Re: styles

  • If you will use the main tags, as I suggested, you could set its height to 100vh and place your container in the center using flexbox on the main
  • You can decrease your breakpoint (i.e. the value of min-width on media query) to make your solution more responsive :)

Marked as helpful

0

Shay 20

@Shayinur

Posted

@ereljapco thanks for the feedback Erel! I'm working on it :)

0
faizan 2,420

@afaiz-space

Posted

Hey @Shayinur, congratulation on completing the challenges. class .container use width: 30rem; and then object set in center. class .price use align-items: center; and remove flex-wrap property.

0

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