Social Links Profile

Hi there, congratulations on completing this project. You've done a great work with this one! 🎉

The active states is activated on hovering on the link. You can change the properties of the link using a few lines of CSS.

• the body needs a min-height: 100vh instead of height: 100vh.
• I recommend changing the class "link" to the a tag from li to make it easier to style them.

This is the current markup

<li class="link"><a href="#">Github</a></li>

This is the new markup

<li><a class="social-link" href="#">GitHub</a></li>

Then let's create the active state.

.link:hover {
background-color: var(--green);
color: var(--dark-grey);
}

This should do the work. You need to be aware of the different class names you assign to different elements. In this code, the a must be the link. The li is not a link as you may know.

Hope this helps you! 😊

Hi! There's nothing wrong in using percentage to set widths. However, if you set widths using em, there's a good chance that you'll be sorry 😂

Regarding the background and color problem, this should work:

.link:hover - use this to change the background color of link on hover (you've already implemented this part)

.link:hover a - use this to change color of anchor tag when user hovers over li or, .link.

What it's doing is selecting the anchor when the user hovers over your li element.

Descendant combinator - you've used it before in your code

Hope this helps 🙏