HTML CSS

Hi @mukund-chander,

Congratulations on successfully completing the challenge!

I have a suggestion regarding your code that I believe will be of great interest to you.

1. All the content should be wrapped in a <main> landmark element for better semantics and accessibility.

2. For the clickable elements, consider using <a> tags instead of buttons for navigation purposes. Buttons are generally used for actions like toggling things or submitting forms, while <a> tags are better suited for navigation. You can style the <a> elements to look like buttons. Additionally, these clickable elements are a list of items, so it's better to use <ul> and <li> elements.

<main>
  <ul class="card__buttons">
    <li><a href="https://github.com">GitHub</a></li>
    <li><a href="https://frontendmentor.io">Frontend Mentor</a></li>
    <li><a href="https://linkedin.com">LinkedIn</a></li>
    <li><a href="https://twitter.com">Twitter</a></li>
    <li><a href="https://instagram.com">Instagram</a></li>
  </ul>
</main>

3 Your profile card doesn't work responsively below the screen size of 425px because you gave a fixed width of 425px to the .card class. This problem can be solved by replacing the width with the max-width property.

.card {
  max-width: 425px;
}

I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.

Feel free to reach out if you have more questions or need further assistance.

Happy coding!