Skip to content
Submitted over 3 years ago

Fylo dark theme solution

Nebiyou Ersabo•185
@NebiyouErsabo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Fylo dark theme landing page
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hello Everyone 👋, I just finished my second junior challenge (also the second time completing a full landing page).

This challenge was definitely hard as it took me roughly 4 days on and off. Also, I still haven't figured out how to solve some issues (like hiding the quotation mark behind the testimonial cards & displaying the error message). The background svgs gave me a really hard time as well but after all I think it turned out alright. Just like my last solution, I also used pseudo elements for link hover effects.

Please have a look at my solution and let me know what you think 👍.

Thank you! 🙏

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 3 years ago

    👋Hi Nebiyou Ersabo!

    😉Thanks for your useful feedback on my solution for this challenge!

    Now, I will give my feedback on this solution:

    • You can just import multiple font family with just one link rather than two. Since it will make your page load faster because it's just handling two font family at once.
    • For the .cta__email input on mobile screen size (<400px), the input is busting out of the card.
    • It seems like the .cta__button and .register__btn does not have any style for :hover state.
    • For the bg-quotation you can set it as a background-image if you want to try.
    • For the .testimonials__quote, you can replace the div with blockquote so I think it will make more sense since it is a quote.

    Well, that's it! Hopefully this is helpful!

    Happy Coding!

    1
    Nebiyou Ersabo•185
    @NebiyouErsaboPosted over 3 years ago

    @vanzasetia Thanks for your helpful feedback! Yes, I did notice the email input was slightly larger than the button on my phone, but it wasn't completely busting out when I saw it. I'll fix that rq. But for hover states, I made the hover effects to be visible after 800px, perhaps that is why you weren't able to see them on your phone.

    0

Please log in to post a comment

Log in with GitHub

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