
Sunnyside Landing Page
Design comparison
Solution retrospective
I wanted to do this because this challenge looks visually nice, but it took me longer than the e-commerce challenge—mostly due to my laziness and i used Figma file with a design credit. That caused me to focus a lot about spacing like text sizes and paddings, so i used a lot of clamp function.
I styled mostly without classes and used selectors like :has, >, etc. I added lots of comments for better readability, so if anyone checks the code, they won't be confused.
I saw a couple of people added skip to main content link to the arrow image but i added a few skip to main and footer links at top instead. Also aria labels, animation and transitions.
What specific areas of your project would you like help with?I tried using the tag for the modal in the final stage, but it caused styling issues that i couldn't fix, so i switched back.
Any feedback is appreciated. Please tell me anything to improve or if i missed something.
Community feedback
Please log in to post a comment
Log in with GitHubJoin 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