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 Dark Theme Landing Page Solution

@abdo-kotb

Desktop design screenshot for the Fylo dark theme landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Feel free to provide feedback. I will be very happy if you tell me how I can improve.

Community feedback

P
Fluffy Kas 7,735

@FluffyKas

Posted

Hey, your solution looks great! The only thing I found a bit strange is getting that invalid email message when I simply hover over the button at the cta section. Apart from this, good job, I finished this one yesterday and I know it's not the easiest ^^

Marked as helpful

1

@abdo-kotb

Posted

@FluffyKas Thanks for your comment!

I've actually thought of different ways to display the error message properly without using JavaScript and this was the least weird way that came to my mind.

1
P
Fluffy Kas 7,735

@FluffyKas

Posted

@abdo-kotb Aaah I see! I didn't even know it's not javascript so I guess that's very good! :D It's not a major issue anyway!

Marked as helpful

1

@krisp-dev

Posted

Overall good job on this challenge! I have recently done this one myself and I found it quite challenging.

I have found 2 minor issues; the svg element in your hero section ::before is not stretching the entire width of the screen and looks cut off at the edges (for example on 1920px screen).

Another is, the headings and paragraphs in your feature section are misaligned due to the svg elements having mixed heights, and adding a margin-bottom to the svg icon itself will cause the misalignment. The way I approached this was to wrap the img element in a div and set the max-height of the div to 88px - which is the height of the security icon which is the biggest one of them all, and then vertically align the icons in their respective divs.

Great job though, looks solid!

Marked as helpful

1

@abdo-kotb

Posted

@krisp-dev Thanks for your comment and suggestions. I really appreciate it.

I actually spent a lot of time focusing on the smaller screens' widths that I forgot to check any width larger than 1440px 😄😄

All the issues should be fixed now.

Thanks again!

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