3 Column card component responsive preview using HTML and CSS

Hi Shay Barnea👋 Great job on completing this challenge! 🥳

I noticed a few areas where your solution to the challenge could be improved, and wanted to share my suggestions with you.

• Instead of using the @import rule to import a font from Google Fonts, consider using the link element in the head of the HTML file. This will reduce the number of HTTP requests made by the browser and improve performance.

<link href='https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Lexend+Deca&display=swap' rel='stylesheet'>

• Instead of using the .card:first-child and .card:last-child selector, consider using the :first-of-type and :last-of-type pseudo-classes. This will ensure that only the first and last card elements are selected, regardless of whether or not they are the first and last child elements of the container.

.card:first-of-type {
    border-radius: 10px 10px 0px 0px;
}

.card:last-of-type {
    border-radius: 0px 0px 10px 10px;
}

@media(min-width: 930px) {
    .card:first-of-type {
        border-radius: 10px 0px 0px 10px;
    }
    
    .card:last-of-type {
        border-radius: 0px 10px 10px 0px;
    }
}

Overall, this is a very well done solution to the challenge. Great job!

Hope I'm Helpful! 👍

Keep up the good work! 😊❤️