Sunnyside Agency Landing Page - Svelte, CSS Grid, Keyframes
Solution retrospective
Hi, everyone! 👋 This one is a bit of a “simpler” solution - meaning I didn’t add many animations or effects. I had lots of ideas for this one, but most ended up getting tossed. Instead the big focus was on Svelte and component-based development.
Questions:
- How would you handle a design like this on large screens (1920px+)? Add a max-width to the entire page and keep it centered? Add another media query? For now I’ve just left it, but letting it expand into oblivion doesn’t look great. 😕 "Solved": Went with max-width.
- I used a local variable in conjunction with a Svelte variable to determine the color of the "underline" in the LinksUnderlined component (yellow/pink). I feel like there’s probably a simpler way to do this in Svelte? Solved: Used the method in this REPL for a cleaner solution.
- Is there a way to “disable” a Svelte transition? In order for the transitions I used for the mobile menu to not fire on page load for 800px+ screens, I added a class to disable animations. This feels like a very janky solution to the problem. 😆
- How’s my Svelte in general? Any input on improvements and best practices?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @ApplePieGiraffe
Hey, again, Anna (Leigh)! 👋
This one's looking great, as well (and as usual)! 👏
I'm not sure what to do with this design for extra-large desktop screens, either. What you did for this solution seems pretty reasonable to me. 🙂
I think passing a prop to determine the color of the underlined link component is straightforward and easy. Only thing is you probably don't need the CSS variables inside those classes since the color value is only used for one CSS property, but it doesn't really matter, really. 🙃
It's been a while since I've dabbled in Svelte, so I'm afraid I can't offer too much help with disabling those transitions off of the top of my head (I'm also a little short on time, at the moment). 😅
But I'll say everything's looking good! 👍
Keep coding (and happy coding, too)! 😄
Marked as helpful - @shashreesamuel
Excellent work Anna
Keep up the good work
Your solution looks excellent and certainly pixel-perfect to the design
Let's talk about the html issues regarding your markup
- CSS: animation: Too many values or values are not recognized. This is due to specifying the animation incorrectly, I recommend rechecking the documentation regarding this property to be sure.
I hope this helps
Cheers
Happy coding 👍
Marked as helpful - @Kamasah-Dickson
Your solution looks so good...actually pixel perfect I think you should use the max-width on bigger screens also your website is faster on my device.
Good job👍 Happy coding📌
Marked as helpful - P@BurritoDoggie
Hey Anna!!
I'm excited to see another challenge from you! 😃 I happened to access your challenge mobile today, and it fit my screen perfectly! I also love the hamburger 🍔 menu! 😍 But sadly I have no knowledge of Svelte to help you with your code. 😕 I just wanted to drop in and say great job!
Keep Coding!
= ^ . ^ =
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