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

Responsive landing page using Flex and Grid

Suprefuner• 470

@Suprefuner

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


Any suggestion and feedback would be appreciated!!! thanks!

Community feedback

P
AK• 6,700

@skyv26

Posted

Hi! Friend, I saw your work and congrats you have completed this challenge. But I noticed some issues, below are the issues and maybe my tips or suggestion helps you to get accurate result.

  1. In desktop mode, navigation menu are meant to navigate the particular section, but your menu do nothing on click. Please add id on each section and call that id name in <a href="IDNAME" >

  2. Your email validation is not working properly please check it again, placeholder and font text size is small which is really difficult for people like me to read such small text (weak eye-sight)

  3. Your design is not fully responsive, make sure that from next time you should try to make responsive so that it can be open up on any mobile width screen **It causes bad user experience, so keep in mind. **

  4. Your social media icons are not perfect in shapes, it looks little bit weird. So fix it and it would be great if you add some effect on hover.

Overall Good work 6.5/10

Good Luck

Marked as helpful

0

Suprefuner• 470

@Suprefuner

Posted

@skyv26 Thanks your useful feedback! I do some modification, will upload again, please check if you have time! thanks a lot!

  1. I just tried to copy the layout and forgot I should make it work too. Don't know can work like this, thanks so much for your suggestion and added one more "back to top" button at the bottom right side.

  2. Modified. Learned can't use Pseudo-element on input element so just add one more <p> in the form and using position absolute to fix it.

  3. I just tried to copy the layout make it looks good on 375px and 1440px now so the site is not fully responsive.

  4. Fixed by setting value to both width and height. I used to set width and using height: aspect-ratio: 1 to do the work, don't know why the height is slight bigger than width value. Please let me know if you know the answer. Thanks.

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