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

SCSS grid and flex layout with mobile-navbar

#sass/scss

@salvagedscrap

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


I ve used both grid and flex for general layout, made it responsive with media queries and add a little side animation to mobile navbar. I really dont know if I m messed the code up entierly. Please feel free to check out and any feedback welcome .

Community feedback

@hectormoba

Posted

Really nice solution! Just a few things: try to follow the same hierarchy for titles and text (i.e: main title its a bit title) and follow the recommendations about text color. Try to think how to do the color underline for the links (is it a image? Can i do it with external library).

Marked as helpful

0

@salvagedscrap

Posted

@hectormoba Hey thank you for your comment. I am no colorblind(perhaps I am, I m not sure anymore lol) but I m having terrible times picking the right color because of my potato-like monitor, so my colorpicking is mainly a mess but thank you for pointing out.

border-bottoms just work on hover, they have slightly less opacity and 1 less px thickness. gets full opacity and +1px on hover state. Positioning them was challenging, I ve found on stackoverflow, you just reduce the height of <p> lesser than its original font-size and it works :)

0

@hectormoba

Posted

@salvagedscrap haha yes it happened the same to me: in one monitor i see color in a horrible way and in my laptop more vibrant and I think more real.. who knows! Despite this, happy coding!

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