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.
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
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
The Sunnyside Agency Landing Page was a good step up that gave me a good challenge, especially with the header and using JavaScript to toggle the header menu along with the features section. The features section was quite tricky and required a of decision making. Should I use flexbox or should I use grid? I was able to achieve the layout using grid and changing the order on the 768px breakpoint.
The rest of the layout was pretty straightforward.
- Website - GitHub
- Frontend Mentor - @frontendstu