Solution : Live Site URL
Solution submitted at Frontend Mentor - Submission link
This is a solution to the Sunnyside agency landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Your challenge is to build out this landing page and get it looking as close to the design as possible.
This challenge focuses mostly on HTML & CSS. There's a tiny bit of JS included for the mobile navigation toggle. But you could also choose to do this without JS!
You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
Your users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- HTML
- CSS
- CSS Grid
- CSS Flexbox
- JavaScript
Full-bleed designs aren't always the best to work with for me as I am clueless what I should do for widescreen layouts. I did not try to make it different on widescreen but let it run across the screen no matter the screen size.
Setting images while making them responsive for all screen sizes in an empty div is a difficult task especially when there are different size images for different screen sizes, adding them in an tag does not make it look seamless or pretty as too many breakpoints could be required and unnecessary extra markup. Adding them as background image is the only solution but its not that easy to work with images as background images for me.
I liked the modern design aesthetics, playful colors and font choices. The layout too was fun to work with.
The mobile navigation has a simple transition effect but I tried and failed at various animation / transition styles with transform but I couldn't come up with something that would make it look natural especially with the right corner triangle. Maybe I could breakdown each part of the navbar and animate them individually to make them appear one after another with animation delay. Might do this later.
- Live solution screenshot(s)