Submitted 11 months ago

productPreviewCard

Anjelica• 110

@Anjie-MF

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

This project was the first time I learned the differences between srcset and src attributes. Along with being my first FEM project, I learned the importance of HTML structure.

What challenges did you encounter, and how did you overcome them?

Flexbox. I am six projects in and it still gets me but I learned the usage of containers when using Flexbox.

What specific areas of your project would you like help with?

Performance: how to optimize my images to reduce load times, especially for users on slower connections

Community feedback

Varun Tyagi• 150

@vitviki

Posted 11 months ago

Hey,

To add the cart icon inside the button use img tag inside button tag like so:

     <button class="cart_btn">
        <img src="./images/icon-cart.svg" alt="cart">
       Add to Cart
      </button>

Instructions to add screenshot in README can be found in README-template.md. For some reason I'm unable to write the command here. It's not showing up in the preview.

Hope this helps.

Anjelica• 110

@Anjie-MF

Posted 10 months ago

Thank you for the helpful response. I will update my code accordingly @vitviki

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