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

Fylo landing page

#sass/scss
P
Paulā€¢ 320

@mayor-creator

Desktop design screenshot for the Fylo landing page with two column layout coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I'm proud of using SASS mixin and functions and I would create different mixin for each components next time instead grouping everything together.

What challenges did you encounter, and how did you overcome them?

The challenges I encountered with this project are changing the background color of the logo svg file and how to use flex and grid together. I overcame them by reading articles and applying it into the project.

What specific areas of your project would you like help with?

What is the best approach to include background images and how to make sure the full height of the footer element covers the remaining page of the body element.

Community feedback

@0xabdulkhalid

Posted

Hello there šŸ‘‹. Congratulations on successfully completing the challenge! šŸŽ‰

  • I have a suggestion regarding your code that I believe will be of great interest to you.

CSS šŸŽØ:

  • Looks like the "Fylo" logo for Footer is not looking close to the design because of it's nature, We can change the entire logo into White colored one using filter property for Footer.
  • Here's the example code:
footer__image {
  filter: brightness(0) invert(1);
}
  • Now Footer logo will be same the design in white color, using filter you can smartly tweak colors of logo.

.

I hope you find this helpful šŸ˜„ Above all, the solution you submitted is great !

Happy coding!

Marked as helpful

1

P
Paulā€¢ 320

@mayor-creator

Posted

@0xabdulkhalid thank you for your insightful feedback

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