Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Loopstudios animated landing page, React, Tailwind & Framer-motion

paulDev 440

@dev-paulL

Desktop design screenshot for the Loopstudios landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What specific areas of your project would you like help with?

Any feedback welcome 🫡👍

Community feedback

@TedJenkler

Posted

Hi again,

Nice project! I love the animations you’ve implemented—great work. Here’s a suggestion for improvement:

SVG Hover Effects: Consider adding a hover fill effect to your SVGs. You can achieve this by styling the <SVG /> tag with CSS. It could add a nice interactive touch to your design.

Your site is already responsive, and the overlays and backgrounds adapt well to all viewports. The animations, particularly the navigation animation, are fantastic. The way they flow is smooth and enhances the user experience.

It’s hard to write feedback when you’re doing such a great job! Your use of ARIA labels is also spot on. Fantastic work!

Best, Teodor

0

paulDev 440

@dev-paulL

Posted

@TedJenkler Hi again! 👋

Thanks! The hover effect is already implemented (underlines the svg), similar to the nav links. I followed the design images, but I agree, adding some extra hover effects could make it look better.

I’ll also explore ARIA rules further, I'm sure I can improve accessibility.

Thank you again, Best, Paul

1

Please log in to post a comment

Log in with GitHub
Discord logo

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