Responsive Product Preview Card Page

Hey there! 🙋🏽‍♂️

Congrats on finishing the challenge! ✅

Your project looks awesome!

Here are some helpful tips that you might find useful:

Firstly:

The border-radius property can take one to four values, depending on how you want to specify the rounding for each corner:

1. Single value : If you provide a single value, it applies the same radius to all four corners.

   border-radius: 10px;

2.Two values : If you provide two values, the first value applies to the top-left and bottom-right corners, and the second value applies to the top-right and bottom-left corners.

   border-radius: 10px20px;

3.Three values : If you provide three values, the first value applies to the top-left corner, the second value applies to the top-right and bottom-left corners, and the third value applies to the bottom-right corner.

   border-radius: 10px20px30px;

4.Four values : If you provide four values, they apply to the top-left, top-right, bottom-right, and bottom-left corners, respectively, in that order.

   border-radius: 10px20px30px40px;

So, you can have one side of an element rounded while the other side remains sharp.

For example, let's say you have a card element with a picture inside it. You could apply the following border-radius values:

.card {
border-radius: 20px20px00;
}

.card-picture {
border-radius: 0020px20px;
}

Secondly:

📌 When you have different versions of the same image, consider using the <picture> tag.

This will help ensure the correct image loads on the user's device, saving bandwidth and boosting performance.

Example:

<picture>
    <source media="(min-width: 768px)" srcset="{desktop image path here}">
    <img src="{mobile image path here}" alt="{alternative text here}">
</picture>

Hope you find this useful!

Great job overall!