Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 3 years ago

Sunnyside Responsive Landing Page

P
Ryan McGuire•280
@mackieva
A solution to the Agency landing page challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


This was fun, I wanted to take a break from little js projects and I haven't built out a landing page in a couple months.

  • The biggest thing I'm curious about is how others handled the images. I wanted to practice using srcset, so I made the top and bottom four square images use object-fit in the grid area. Then for the cherries and orange that had text I just made them background images.
  • I'm looking forward to see if others used any animations with the mobile menu. I'll use basic transitions (like this one sliding in), but complex animations not so much and I'll like to use more. I did put a little bounce on the arrow though because why not.
  • The other thing is naming elements. I'll use something like BEM but it's usually sloppy and could easily be improved. I've never worked with other developers on projects so it's led to some bad habits.

ok, time to move on to the next thing

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Ryan McGuire's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License