social-links using HTML and CSS

Hi @prem-kumart,

Congratulations on a great looking solution! Good that you were able to improve your workflow during this project. You are making a lot of progress.

Do you have any specific questions you need help with?

I checked your solution and have a bit of general friendly constructive feedback:

body {
    font-family: 'Inter', sans-serif;
    height: 100%;
    margin: 0px;
    background-color: hsl(0, 0%, 8%);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

You could remove the height and flex-direction: row here. You already set the height here:

html, body {
    height: 100%;
}

To prevent overflow issues it's better to use min-height: 100vh, so the html and body still scale with the content inside it.

You don't have to declare flex-direction: row because this is already the default value when you put display: flex on an element.

main {
    height: 611px;
    width: 384px;
    background-color: hsl(0, 0%, 12%);
    border-radius: 12px;
}

Try keeping the height of your card fluid. At the moment you have a fixed height on the card which will cause overflow issues if the content of the card grows. You can see this when you add a lot of text to the card description for example. Just removing the height fixes this because the default value for block elements is height: auto.

You could make your CSS values more reusable by using CSS variables in the future.

I hope you find my feedback valuable, and I would appreciate it greatly if you could mark is as helpful if it did help you out.

Happy coding!

Website looks absolutely fine. Good job.