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-(Responsive and with cool Animation)

Adarsh Pratap 5,515

@adarshcodes

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


Hey there! I'd love to hear any suggestions, recommendations or modifications from you amazing peoples😍😍😍, it's not the best but I learned many new things with this challenge🐱‍🏍.

Community feedback

Adarsh Pratap 5,515

@adarshcodes

Posted

Okay, there were a lot of issues aroused and I fix most of them. But some I shouldn't fix like using multiple fonts at a time using google-fonts. using span inside an a and i inside li. So Please Ignore them :)

1
P
Matt Studdert 13,611

@mattstuddert

Posted

Awesome work on this challenge, Adarsh! As you can see from the design comparison, there are only a small amount of areas where the spacing is slightly off. But you've got the overall layout spot on. You've already brought up the report issues, which you could fix. Having multiple Google Fonts is fine, it's just the | character that shouldn't be in the URL. You could instead swap this will the %7C which is the URL encoded representation of the | character.

I've had an extremely busy week on a work contract this week, so I haven't been able to give as much feedback as I would have liked. It's been truly amazing to see you being so active in the community. Thank you for being such a valuable member! 🙌

1

Adarsh Pratap 5,515

@adarshcodes

Posted

@mattstuddert Thank you for the suggestion and also about the encoding for |(It's something new to me :)), and I'm very lucky to be the part of this amazing community. Everyone here is doing great. May I suggest something???

1
P
Matt Studdert 13,611

@mattstuddert

Posted

@adarshcodes of course! I always love hearing feedback and suggestions 🙂

0
Adarsh Pratap 5,515

@adarshcodes

Posted

@mattstuddert Can we get an option to attach screenshots in the comment section, so that it would be easier to share if we have any issue

1
P
Matt Studdert 13,611

@mattstuddert

Posted

@adarshcodes yeah, that’s definitely in the backlog. There are some higher priority tasks to do before, but I’ll definitely be adding that. It would be very useful!

1
Bethany 855

@whimsicurl-creations

Posted

Nice job, Adarsh! The animations are a nice touch as well. The overall design scales nicely for all screen sizes.

As for the HTML errors - I've avoided the error for the | symbol by just listing the Google Fonts links singly (each font gets its own link). It adds a bit to the code, but it plays nicely with the validators. As for the ul errors, would that be resolved if you put the <i> and <a> inside of <li> elements?

Keep up the great coding and commenting. You're a wonderful asset to this community!

1

Adarsh Pratap 5,515

@adarshcodes

Posted

@whimsicurl-creations Thanks for your feedback, I'm going to update the changes :)

1

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