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:
- 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!
