Built using Grid, Flexbox, SCSS and media queries

Solution by
Desktop design screenshot for the Sunnyside agency landing page coding challenge
This is a solution for...

Sunnyside agency landing page

View Challenge

Design Comparison



  • 7Accessibility

  • 1HTML

View Report

Shizuka ayane's questions for the community

I did the paddings for the text grid items manually with media queries. How should I do it differently to have the padding automatically adjust? When I did it with percentages, it didn't work.

Other struggle I had was the header background image. I made it with CSS background-image, but I didn't know how to make the element width and height of the background so the whole background would be visible. I reckon it can't be done, or am I missing something? (I found a workaround to this problem with padding-top and aspect ratio in percent value).

Slack logo

Join our Slack community

Join over 50,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!