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

Challenge 2 - Frontend Mentor

@jaojogadez

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 couldn't find a way to put the "icon-cart.svg" inside the site's shopping button. I tried to find a solution on the internet but I was also unsuccessful.

Community feedback

@MelvinAguilar

Posted

Hello there 👋. Good job on completing the challenge !

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

  • First, the element should be a button, not a link. Buttons are designed for executing actions using JavaScript, while links are used to enable users to navigate to external or internal pages. The goal here is to add the product to a shopping cart, which is achieved through JavaScript.
  • In this specific challenge, the zip file you download contains an image of a cart icon. In other challenges, you might need to search for and download it. To include the image, you can simply use the <img> tag inside the <button>, and you'll be able to see the icon in your solution. If you want to make it smaller, select the image in CSS and apply the necessary styles.

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

I hope you find it useful! 😄

Happy coding!

Marked as helpful

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