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

SASS (SCSS), 7-1 approach, CSS flexboxes

Yakub 260

@Yakub-Egamnazarov

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


Hello everybody, very much appreciate your time and I'm so excited to be part of the like-minded community. Regarding this project, on the way to completing this project, I encountered several problems:

  1. Alignment of the sunnyside logo, I used flexbox CSS rules, but it seems it would help with aligning horizontally. Is there any other approach without using margins and paddings to align the logo on the header? it seems to me that the font style (Barlow) is not aligned properly inside its box.
  2. Any suggestions about animation effects to add dynamics to the page would also be appreciated.

Community feedback

P

@Svobyyy

Posted

Mobile version: Make an animation on a header burger (active state), center a menu triangle with burger and also there is a line on the right side of menu with pixel or something and its making the triangle look not fixed on the right 0 (on some resolutions its there).

pc: Tilte should have letter-spacing

Transform section, use max-width + width 100% to make it break because your text is like this on high resolutions. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa but it should be like this (max-width: 500px, width 100%) try it and find the pixels that you like. aaaaaaaaaaaaa /break aaaaaaaaa /break aaaaaaaaaaaaa, also add padding around it.

Everything else is looking fine.

Marked as helpful

0

Yakub 260

@Yakub-Egamnazarov

Posted

@Fugias Hey Fugias, appreciated your time for reviewing my work, and for giving such valuable feedback and suggestion, I will do as say to fix those bugs. Best regards.

0

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