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

Preview card component

AnasGrzor 100

@AnasGrzor

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


Need feedback on how to allow icons with the text

Community feedback

@frontenddeveloper9

Posted

The icon should be inside the button HTML tag. Something like this👇

<button class="btn"> <img src="link to the icon path">Add to cart</button>

Then try this CSS code

.btn{
- display:flex;
- align-items: center;
- justify-content: center;
- gap: .5em;
- width: 100%;
- height: 3.5em;
- background-color: As mentioned in the style.md file;
- outline: none;
- border: none;
- border-radius:0.8em;
- font-size: 0.90rem;
- font-weight: 700;
- color: As mentioned in the style.md file
}

I hope the above help.

1

@frontenddeveloper9

Posted

Do you mean align?

0

AnasGrzor 100

@AnasGrzor

Posted

@frontenddeveloper9 yes, I meant align It was a typo I didn't see it

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