social link card

Hi Frontpro👋🏾,

This looks great🔥! It's very close to the Figma designs. I just have a couple of suggestions for improvement:

Semantic Tags for Accessibility: Consider using semantic tags to improve the accessibility of your webpage. These tags provide more information about the content they wrap, which can be helpful for screen readers and other assistive technologies. For example, in this challenge, you could wrap the content with the <article> tag. This tag defines a self-contained piece of content, like a blog post or news article.

I found this article on semantic HTML useful if you'd like to learn more: https://www.semrush.com/blog/best-practices-in-semantic-html5-for-content-writers/

Hello, Congratulations, good work. Your solution is very close to the design, but I have few suggestion to make your code (CSS) even better.

1.) Use flexbox (column directory) with gap property on the .social-card instead of margins on the .card-bio & h2

2.) Use gap property (in addition to the flexbox) on the .card-btn instead of margin-botton on the links

3.) Try to use property "line-height: 1.5" on the "body". It should help with spacing.

4.) Add property "transition: all 0.3s ease-in-out;" to the " .card-btn a:hover, .card-btn a:active" to make smooth transition

Hey there!

Congrats on finishing the challenge! ✅

Your solution looks awesome!

📌 It's a good idea to use semantic HTML elements like section, main header etd. This makes your code more accessible, maintainable, and meaningful.