- HTML
- CSS
Product preview card component solution
Try not to focus on speed when completing challenges. Focus on quality including testing with keyboard, zoom and screenreaders.
This is a really good attempt, just a few issues I can see straight away
-
Make sure the component has some space around it so it never touches screen edges. It is hitting the top of the screen on some phones. You can do this with margin on the card or padding on the body in this case
-
Very important not to limit the body height to 100vh. That cuts off content on some devices. Use min-height: 100vh not height
-
This would not use a button element. Unless you're expecting something else to happen on click? I would expect it to be an anchor tag.
-
Screenreaders aren't told when strikethrough effects are applied on text. So you need to do a bit more to make sure those users know what is the old price vs the new one. As it stands they would hear both prices, which is very confusing. There are lots of ways to handle strikethrough if you look them up online.
-
I wouldn't expect to see width as such a small percentage and min-width on this. Instead, let it be 100% wide (as per the default) and set a max-width instead.
Good luck