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 using html and css

faekhatami 540

@faekhatami

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

@Ibtehaj-Ali-1

Posted

Everything is looking great. Just increase the gap between the Original and Discount price and increase the size of the "Add to cart" button and you should use icons instead of Emojis.

1

faekhatami 540

@faekhatami

Posted

i dont know how to access icons 🤔 can you help me with that? @Ibtehaj-Ali-1

1

@Ibtehaj-Ali-1

Posted

@faekhatami Yes I can!

  • You can use icons from many websites like Boxicons, Fontawesome, etc... You will find a link tag on these websites and use them in the head tag to connect it with your webpage as you do with your external style.css file. And then you search for the desired icon and you will get its line of code to use them. ** This is a straightforward method to use icons**
  • Another way is to download the PNG or SVG of the required icon and then use it in img tag.

Marked as helpful

1
faekhatami 540

@faekhatami

Posted

thank you for taking your time it was so helpful 😊 i will consider them in my next solutions! 🙌🏻🌸 @Ibtehaj-Ali-1

1

@ameera-abed-aldin

Posted

good job try make it responsive by using flex or grid

1

faekhatami 540

@faekhatami

Posted

thanks 😊 i used them in some parts @ameera-abed-aldin

0
Kapkrazy 190

@Kapkrazy

Posted

Looks good.👌

1

faekhatami 540

@faekhatami

Posted

thanks 😊 @Kapkrazy

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