Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Sunny side landing page

#accessibility#semantic-ui

@ComanderPotato

Desktop design screenshot for the Sunnyside agency landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey all, just completed the sunnyside landing page. Took me a couple of hours and decided to try some new things, such as; CSS variables, mobile-first design, implementing before/after pseudo-elements, and multiple CSS folders for different needs. It was also my first try at coding a hamburger menu without help, don't think it went too bad. I used a combination of flex-box and grids, with the use of relative units to keep it responsive. I tried to keep the code clean and DRY at the beginning but after a while, it got a bit hard so the use if !important was used for the header which was done last, I also tried to keep the HTML semantically correct and alt tags for accessibility. Let me know how I did :)

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

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