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

Perfume Product Preview Card Component - Vanilla CSS and HTML

Lisa Allen 520

@CrypticMango

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


I loved coding this one! If you think there is a better way that I could have accomplished this output let me know.

Community feedback

@jhellard

Posted

Looks pretty good! The border-radius isn't working properly on desktop, you could also just use one image and change the source dynamically in your CSS. Here's an article about that - https://simplernerd.com/css-img-src/

ID's are generally only used when targeting elements with JS, using class is recommended instead when just modifying with CSS.

Marked as helpful

1

Lisa Allen 520

@CrypticMango

Posted

@jhellard Thanks for the tips I will take a look into them.

0
Lisa Allen 520

@CrypticMango

Posted

@jhellard Not sure why my solution looks different than it does on my computer. How do I fix it? On my computer it looks closer to the example.

0

@jhellard

Posted

@CrypticMango Can you elaborate? The border-radius looks good for me now. If you're referring to the image/solution comparison above I've noticed that can be a little odd at times. Not sure how to fix that myself.

1
Lisa Allen 520

@CrypticMango

Posted

@jhellard Okay thanks! Yes, I fixed the border-radius. And yes I meant the solution image but if it's just a bug I won't worry about it. I appreciate your help 😀

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