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

Responsive landing page with sweet CSS animations

P
ApplePieGiraffeā€¢ 30,545

@ApplePieGiraffe

Desktop design screenshot for the Clipboard landing page coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey!

This was a beautiful project that was very fun to make! I used Sass to keep my code clean and tidy (or try to, at least) and Animate.css to add some sweet animations to the hero section.

Feedback is welcome and appreciated!

šŸ˜„

Community feedback

P
Emmilie Estabilloā€¢ 5,540

@emestabillo

Posted

Hi @ApplePieGiraffe, this looks quite good! Responds to screen widths really well. The only thing that stands out is that the buttons in the hero section are not taking their hover states. I assume the animations are overriding these styles as they both contain transform properties. Check out this article. The first paragraph in particular gives an !important (pun intended) info to note. Hope this helps :-)

Marked as helpful

1

P
ApplePieGiraffeā€¢ 30,545

@ApplePieGiraffe

Posted

@emestabillo

Thanks for your feedback!

Yes, I did realize that the hover states on the buttons in the hero section weren't working, but I thought it might be a bug in the CSS animation library I was using. After a little looking around (and seeing your feedback), I now see that it's really just due to the way the transform property works.

Thanks for the link! I'll do some reading and hopefully get it fixed!

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