Submitted about 1 year ago

Product preview card component in HTML/CSS

#bootstrap

Ozioma Egole• 70

@Ozioma45

Preview site View code

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

The challenge was quite tough. Am really sure where the Faunces font did not really work well for me and secondary the word "perfume" did not really show the way i intented. I would really appreciate feedback and corrections on how to make it look better and the project at large. Any where you feel i can improve on

Community feedback

Abdul Khalid 🚀• 72,160

@0xabdulkhalid

Posted about 1 year ago

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

HTML 🏷️:

The div with class container want to be a main element
And the div with class attibute want to be a footer element
Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page, to further know about <main> read this article

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!

Marked as helpful

Ozioma Egole• 70

@Ozioma45

Posted about 1 year ago

@0xAbdulKhalid Thanks alot for the contribution, i really appreciate

Francisco Carrillo• 5,560

@frank-itachi

Posted about 1 year ago

Hello there 👋. You did a good job!

I have some suggestions about your code that might interest you.

HTML 📄:

Since the mobile design has a different image, you can use the <picture> tag that allows you to interchange the images depending of the viewport size. Red more about this awesome tag here.

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy <coding /> 😎!

Please log in to post a comment

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