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

Joseph Moradā€¢ 190

@D4R0M

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

ekandoā€¢ 10

@elliottkan

Posted

Hey Joseph,

Looks good! I recently finished my own challenge recently!

  1. I've been told in the past that using em is preferable over rem or px. There seems to be some inconsistencies in that aspect in your code base.
  2. perfume currently lowercase.
  • Using the text-transform: uppercase; on your .tag could address some styling inconsistencies. Just an FYI incase this was a deliberate styling choice.
  1. The mobile layout seems to not have the photo loading issues but not sure if it's just me.
  2. Shop Button only easing in but not out.
  • I think applying transition: all 0.3s ease-in-out; to the button element will resolve the issue
  1. Ease-in-out elements are animating upon load.
  • Using a CSS reset would be good, this will remove the ease-in effects upon loading. CSS for animations.

Good work! Hopefully you can have a look through my codebase and give me some feedback too!

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