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 with two column layout

HelalAbood 200

@HelalAbood

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


Hello There, Amazing People!

This is my solution for Fylo landing page with two column layout

I decided to use a motion on i on footer by HTML fontawesome, Also was a new move for me to use a hidden p that shows on hover on main input. Smoothly shows from up, Amazing!

Hope you will like it!

*Waiting for your comments Feel free to leave any feedback and help me to improve my solution (or) make the code clean! Have a Great Day <3!

Community feedback

Vanza Setia 27,795

@vanzasetia

Posted

Hi, HelalAbood! 👋

The alternative text for the logo should not be "LogoPic". It should be "Fylo". The reasons:

The "Get Started" buttons should be submit buttons, not links.

Not every image needs alternative text. Decorative images should not have alternative text (alt=""). This will tell the screen reader to skip over the image. As a result, it saves screen reader users time navigating the page.

For your information, decorative images are images that don't add any information and serve only aesthetic purposes.

The <footer> landmark should live outside the <main> landmark.

I hope my suggestions help you. Happy coding! 😄

Marked as helpful

0

HelalAbood 200

@HelalAbood

Posted

@vanzasetia Great advices, It was helpful for sure, Thank you bro <3

0
Vanza Setia 27,795

@vanzasetia

Posted

@HelalAbood

No problem! 👍

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