sunnyside-agency-landing-page

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

ANCHOR ELEMENT 🔴:

• The social svg icons like Facebook, and Twitter are must need to wrapped with <a> element and we want to add aria-label attribute for them which is way more important for social links in an <a> tag can help provide more context to users with visual impairments who use assistive technologies such as screen readers to access your website.

• When a screen reader encounters an anchor tag with a social link, it may announce the link's text content, such as "Facebook" or "Twitter," by including an aria-label attribute that points to a nearby element containing a description of the link's purpose, you can provide more context and clarity to the user.

• By providing this additional information, you can help users with visual impairments to better understand the purpose and value of social links, and encourage them to engage with your content. This can ultimately improve the user experience on your website, and make it more accessible and inclusive for all users.

• Example:

<a href="#" aria-label="Facebook profile of Huddle">
    <svg>Facebook Svg (For example)</svg>
</a>

• If you have any questions or need further clarification, you can always check out my submission and/or feel free to reach out to me.

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Hello @manavss!

Before making the tip just a quick suggestion:

• Instead of using a div to contain all the links use a ul (unordered list) for it and wrap all the individual links with li(list item).

Okay now moving on to the tip, we can make it using a pseudo-element ::before: Instead of using tailwind CSS to add styles to :before we will make a class in your index.css instead and just apply this class to the ul element (previously div). The reason we don't add these styles directly on the ul using tailwind classes is that these are quite a lot of classes and the list already has so many classes on it so if we were to add these ones on top of it it will make the element quite unreadable and unmanageable.

Here's how we are going to do it:

• In your index.css make a @layer component and inside it make a class name (call it whatever you like I'll give it a header-list class name for example) and here we add the classes to make it look like the tip. Like this:

@layer component {
     .header-list:before{
        content: " ";
        width: 1.4375rem;
        border: 1.25rem solid #fff;
        border-color: transparent #fff #fff transparent;
        position: absolute;
        top: -1.5rem;
        right: 0;
}

• You can add like this or if you prefer the tailwind classes then use @apply and you can add the CSS in tailwind fashion like this:

@layer component {
     .header-list:before{
        content: " ";
      @apply  w-[1.4375rem] // and so on..
   }
}

• After doing this you can add the .header-list(or whatever you have set as the classname) to the ul and you will have a pointy tip.
• Make sure to add a media query to for the tip to disappear on larger screens.

I have used values according to myself so make sure to play around all those values for width, border, and top.

All in all great job on completing the challenge!

Good luck and happy coding!🙌🏻