Social Links Profile: Responsive and Mobile-First Design HTML & CSS

Hey! Nice work on your solution. I like how you make the use of different CSS files to make the code more organized, and I also like the use of semantic HTML.

Here are my suggestions:

HTML:

• You can use the <footer> tag instead of a div with a class of footer. Using semantic elements clearly defines the purpose of the element to the browser.
• Don't put your site's header/menu/footer (repeated content) in your <main>. From Should the header and footer tags be inside the main tag on stackoverflow

CSS:

• Import fonts locally using:

@font-face {
    font-family: "Inter";
    src: url(../../assets/fonts/Inter-VariableFont_slnt\,wght.ttf);
}

• The website breaks when trying to zoom too much and you can't see all of the content. This can be fixed by centering the card container using:

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100svh;
}

And removing the following line from .main__container: height: 100vh;

But other than that, congratulations on completing this project! Hope this helps 🙏