Submitted 7 months ago

Fylo landing page

Paul•470

@mayor-creator

Preview site View code

This is a solution for...Fylo landing page with two column layout

HTML
CSS

2junior

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

Abdul Khaliq 🚀•72,560
@0xabdulkhaliqPosted 7 months ago
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
Paul•470
@mayor-creatorPosted 7 months ago
@0xabdulkhalid thank you for your insightful feedback
0

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