Social Links Profile Card Using HTML & CSS

Hi @Zaheer4232,

Nice work! Here are a few suggestions for improvement:

ARIA Labels for Accessibility: When semantic HTML isn’t applicable, consider adding aria-label="" to your <div> elements. This practice will help screen readers navigate your page more effectively and also enhance your site’s SEO and accessibility.

OG Meta Tags for Sharing: Given that you might share your links, consider adding OG (Open Graph) meta tags. These tags allow you to create descriptive and visually appealing links when sharing on social media, which can also improve SEO. This might be the difference that gets your links page to appear at the top of Google search results when someone searches for your name or username.

Animated Hover Effects: As an extra touch, consider adding a color transition to your hover effects. This simple addition would give your project a polished, animated look, making your work stand out even more.

Best, Teodor

Great work @Zaheer4232, here are some suggestions

• To properly center the card, add a min-height: 100vh; on the body and change the padding-top to padding: 1rem on all sides.
• Change the min-width of the .page-container to max-width and add a width: 100%
• Using an unordered list ul to group the links is a better approach for both semantics and accessibility.
• It's best practice linking Google fonts directly in the HTML head section rather than directly in your CSS file as it enables asynchronous downloading, improving page load times.
• Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.
• Font-size should be written in rem not px. This article explains it better Why font-size must NEVER be in pixels.

Hope this helps, Good luck!