Product Preview Card Solution using grid

Hey , Congratulations on completing this challenge!

Here is my feedback:

• You're using the span element too much.

• Use <main> instead of a simple <div> to improve the semantics and accessibility on the page. Remember that every page should have a <main> block and that <div> doesn't have any semantic meaning.

To answer your questions.

*1. The Add to Cart text and icon are both in the button. Just put them in it like this:

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

Then you can give the img some margins to create space.

*2. For the smaller old price, you have to make sure both prices are under one parent elements. i.e.

<div class="prices">
<strong>$149.99</strong>
<p class="original-price">$169.99</p>
</div>

Then use this CSS:

.prices {
display: flex;
margin: 20px;
}

strong {
font-size: 2rem;
margin-right: 15px;
}

.prices p{
font-size: 0.8rem;
margin-top: 12px;
}

*3. Already answered in the first question.

Keep doing a good job!

Congratulations on completing the task. You can center the old price using padding-left and enter your desired value. For the icon, you can add a separate class to the icon image and then select that class separately for the icon and use margin-left. I hope this helps, and you can also look at my or other people's solutions for more clarification.

Good job 'EINAR , Concerning the cart image, you can use flex property (CSS)

display: flex;
align-items: center;
justify-content: center;
}
button img {
width: fit-content;
margin-right: 5px;
}

and HTML

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

I'll say that you should learn more about CSS flex property I hope this helps. Happy Coding.