Social Links Profile with interactive buttons

Hello there!

𝗖𝗼𝗻𝗴𝗿𝗮𝘁𝘂𝗹𝗮𝘁𝗶𝗼𝗻𝘀 𝗼𝗻 𝗰𝗼𝗺𝗽𝗹𝗲𝘁𝗶𝗻𝗴 𝘁𝗵𝗲 𝗰𝗵𝗮𝗹𝗹𝗲𝗻𝗴𝗲.

𝗬𝗼𝘂𝗿 𝗽𝗿𝗼𝗷𝗲𝗰𝘁 𝗹𝗼𝗼𝗸𝘀 𝗴𝗿𝗲𝗮𝘁.

I have a suggestion to improve your challenge!

●To move the card to the center of the page, change the 𝗖𝗦𝗦 code:

body{ 
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh; 
box-sizing: border-box;
}

Why didn't you change the background color and li text on hover?

●To fix this defect, use the following codes:

li:hover{
background-color: hsl(75, 94%, 57%);
color: black;
}

Let me know if this comment was helpful.

𝗚𝗼𝗼𝗱 𝗹𝘂𝗰𝗸 𝗰𝗼𝗱𝗶𝗻𝗴!

Hi @vinirangel,

Nice project! I have a few suggestions that could help improve accessibility and SEO:

Semantic Elements: In your case, using the <main> semantic element would probably be the most appropriate. Semantic elements provide better context for screen readers and search engines, improving both accessibility and SEO.

ARIA Labels: If you need to replace semantic elements with regular elements, consider adding ARIA labels. These labels give screen readers important information about the structure of your content. For example, you could use an ARIA label like this:

<div aria-label="My LinkedIn"></div>

Meta Tags for SEO: Adding meta tags can improve your SEO, especially when sharing your card on social media or for search engine indexing. This will help ensure that your important content is highlighted.

Hope these suggestions are helpful!

Best, Teodor