Submitted over 2 years ago

Responsive landing page using css flexbox

@seydaklc

A solution to the Fylo landing page with two column layout challenge

Solution retrospective

I don't know how to change color of inline svg elements thus the svg's in the footer is black. I've tried giving different values like currentColor or white to "fill" property but didn't work. And somehow the arrow svg doesn't show up because of it's display property. I've changed it to something else and nope. Still gone :) But the rest was a good practise.

Code

Please log in to post a comment

Community feedback

P
visualdennis•8,375
@visualdenniss
Posted over 2 years ago
Hello again Seyda :)

Great job completing this challenge, it must have been a quite a work with so many sections!

However there is no escape from my suggestions haha 😈 so here we go:
- The links in the nav should be wrapped in <a> tag for, e.g. (<li> <a> link </a> </li>) for many reasons (SEO, accessibility etc.) and on hover they should change color etc. + cursor:pointer;
- fill:white seems to work for me, i think you probably just used wrong selector, you need to target the <path> not the <svg>.
- there seems to be some layout issues regarding second section. If you study the given design carefully, you can see that left of that section actually contains two subsections stacked on top of each other: "Stay productive..." etc. + Quote Box. But instead you have structured the HTML in a way you have grouped "stay ..." with the illustration, but the left section actually should contain Quote Box as well, this is why you get such huge margin on top the quote. Hope that make sense.
Keep up the good work!

Hope you find this feedback helpful!
Marked as helpful

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