Submitted over 3 years ago

Desktop First approach Using Sass, BEM and Grid layout

Kelvin• 915

@Kl3va

Preview site View code

This is a solution for...

Fylo dark theme landing page

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

I would appreciate a feedback on what's preventing it from scaling below 365px or so??

Community feedback

ApplePieGiraffe• 30,565

@ApplePieGiraffe

Posted over 3 years ago

Yeah, great work, Kelvin! 🙌

Your solution looks good and is nicely responsive! 👍

Also, I suggest,

Turning the navigation links in the header and footer of the page along with the "See how Fylo works" link into actual links using the anchor tag.
Adding a hover state to the buttons on the page.
A little more padding between the header and the top of the page would be a nice touch!

Keep coding (and happy coding, too)! 😁

Kelvin• 915

@Kl3va

Posted over 3 years ago

@ApplePieGiraffe Thanks for the feedback. Would work on these right away. How do I remove horizontal scrolls visible on some mobile devices?

ApplePieGiraffe• 30,565

@ApplePieGiraffe

Posted over 3 years ago

@Kl3va

Getting rid of that less-than symbol in your HTML that artimys mentioned might help. You could also try setting width to 100vw and overflow-x to hidden on the body.

Arturo Simon• 1,785

@artimys

Posted over 3 years ago

Hi Kelvin, this is a really good start. Your components look well built and for the most part is just layout position a bit off.

I noticed a lonely less than symbol in your html markup.

<body class="container">
 < <section class="header">
       <div class="header-logo">

I would suggest adding a max-width to your header and footer so it doesn't break apart too far.
For the 2 x 2 illustration and text. A font color is missing on the paragraph
For the social icons add an anchor tag to the images along with a round border.

Overall really good, keep it up 👍👍

Kelvin• 915

@Kl3va

Posted over 3 years ago

@artimys Thanks for the feedback. I will work on these right away. How do I remove the horizontal scroll that is visible on some mobile devices?

Please log in to post a comment

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