Submitted over 2 years ago

Responsive landing page with custom animation.

Fernanda•180

@ferlagher

Preview site View code

This is a solution for...Huddle landing page with a single introductory section

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Please go check my hover animation for the button. ✨ I want to know if my approach was correct, an if not, what would be a better solution to make this kind of effects?

Edit: I don't know how to fix the accessibility issues. My svgs have a title (two, actually), and i also added the aria-label, but didn't fixed it.

Community feedback

Lucas 👾•104,340
@correlucasPosted over 2 years ago
Hello Fernanda, congratulations for your beautiful solution.

I saw the effect you've applied to your <button> this is just amazing I liked it a lots. Maybe you can consider cancelling this effect for mobile, because I think the animation will be "sticky" since touch devices are unable to "unhover". You fix that using @media (hover:hover) { } and insert all the classes/properties inside this media query to avoid hover effects on touch devices.

About accessibility issues I think what is causing this error is the tag <title>Linked in</title> inside the <a> once you've added an aria-label maybe you don't need the <title>.

I had the same error doing this solution and I've fixed that using a svg path. Maybe isn't the shortest way to fix, but its cool. If you want to look my solution here's the link:

https://github.com/correlucas/huddle-landing-page-section

Keep coding and I hope you fix this little bug in the button. Congrats!
Marked as helpful
1
Fernanda•180
@ferlagherPosted over 2 years ago
@correlucas Thank you! I will try that!
1

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord