3-column preview card component

My first suggestion, is to be able to center something on the page is in the body like this,

body {
    display: grid;
    place-items: center;
    min-height: 100svh;
}

My second is to reset padding, margin and set the box-sizing to border-box like this.

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

As for the media queiries, have your container set to flex, and in the media queiry set it like to flex-col, like this,

.container {
    display: flex;
}

@media (max-width: 40rem) {
    .container {
        flex-direction: column;
    }
}

Also setting images, svgs and buttons to display block helps with styling aswell. And as a last note seperate your css from your html like this,

files
>index.html
>style.css

Hope this helps and if you are unsure on anything else, ill be happy to help.

Hello @msbarghini!

Your solution looks great!

I have a suggestion for improvement:

• For semantic reasons, use <main> to wrap the main content instead of a <div>.

📌 This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

I hope it helps!

Other than that, great job!

I will also add this link here for you too look at. Its the submission and I've done with with pure HTML and CSS. To try and help you understande on hwo to structure your code, how to preset your css, and hopefully your'll find some tricks you can learn.

My iCodeThis profile