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

Sunnyside w/ hamburger menu, desktop first & JS with MQ

@Sloth247

Desktop design screenshot for the Sunnyside agency landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


This was tough challenge in terms of positioning everything. I added behaviours with mediaquery in JS.

Any feedbacks are welcome 😎

Fixed a few issues on 1 Aug.

Community feedback

@Vishal-wankhade

Posted

the design looks good . but links hovering not working properly.

0

@Sloth247

Posted

@Vishal-wankhade Yes, but I could not solve it. Could you suggest how can I improve it?

0
P
Ctrl+FJ 750

@FlorianJourde

Posted

@Sloth247 Hi ! Thanks for following me !

I think your transition property should be on .btn--learnmore::after to work properly, or at least with some animation (which is usually nice) !

Also, I would recommand you to use font-awesome icons to be able to use hover effects on social media logos, down the website. It's pretty easy to implement and far faster than finding the good image on Google, anoying task uhh..

Another suggestion (totally subjective, of course) : I learnt recently that by simply making your icon-arrow-down as a button, you can find a nice way to scroll untill the next section, have a look !

You just need to add...

html {
  scroll-behavior: smooth;
}

...and all your on-click animations will become smooth ! Pretty sexy, isn't it ?

Have fun working on FEM !

0

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