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

@tbensheimer

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 everyone! It's been a bit since I completed a challenge! I was able to secure a software engineering internship so I've been pretty busy preparing that! I still plan on continuing doing front end mentor projects to bolster my front end skills. I actually have a goal to complete a couple advanced projects and at least one guru challenge before my internship ends.

Anyways, this project was really fun to do! The hardest part about this project was the background image positioning, which isn't perfect but it's acceptable for me. Please let me know how I can improve my code! Thank you in advance!

Community feedback

Elaine 11,400

@elaineleung

Posted

Hi Trenton, congrats on your internship firstly, and great job in what you did for this solution. I think the image positioning looks good, and if the hero image is bigger and that's more spacing, that hero section can look closer to the original.

Anyway, I got two comments:

  1. About the icon images, specifically the row with the "access-anywhere" and "security" icons: Right now because the security icon is slightly longer, the row looks a bit misaligned. I don't usually use height but I think this is a case where I'd make all the icons have the same height to ensure all the text looks even if they're on the same row.

  2. For the "See how Fylo works" link, because it's stretched across the container, even the empty space beside the link is clickable. Then I had a closer look and saw that there's a huge left margin added on there, and it looks like those elements after the icons section are all positioned similarly. Have you tried using a separate section container here instead of kind of stacking them over the icons section, and then use flexbox for the image and the text area in this section? That way, when everything is in a container, you wouldn't need such huge margins, and it might be easier for positioning. In any case, for the link I mentioned, try reducing the width so that the empty space won't be clickable also.

That's it, and good luck with your internship as well with completing more projects! Hope to see more coming 😊

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