Skip to content
Submitted almost 3 years ago

Skilled elearning landing page with DarkMode (HTML + CSS + JS) 👨‍💻

accessibility
Adriano•42,870
@AdrianoEscarabote
A solution to the Skilled e-learning landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

👨‍💻 Hello guys.

This is my solution to this challenge. It was a lot of fun and challenging to do this project, at times I had complications with the positioning of the hero image, but I think I did a good job. I would like to thank my friend @correlucas for giving me the opportunity to do a premium project.

Tamo junto man 🇧🇷

I added some details:

  • 🎨Dark mode and light mode
  • 👨‍🎨Images hover effect

Feel free to leave feedback on how I can improve my code. 😊

Thanks!

Code

Please log in to post a comment

Log in

Community feedback

  • Lucas 👾•104,160
    @correlucas

    Fala Adriano, parabéns pela nova solução!

    Nessa ai você se superou, seja nos efeitos de hover (que ficaram bem lokos) que no dark mode, além da página toda estar full responsiva, provavelmente essa é a melhor solução pra esse desafio, ficou bem completa.

    A unica dica que eu tenho pra vc é alinhar o botao de dark mode a direita do botao e usar um CSS RESET pra economizar tempo é usar um CSS RESET, pro arquivo de estilo CSS e copiar e colar esse reset padrão que reseta varios comportamentos default do CSS que são um pouco chatos de usar, como margens, imagens, animações e etc. Vai salvar um bom tempo usar isso desde o começo: https://piccalil.li/blog/a-modern-css-reset/

    Parabéns lek!

    Marked as helpful
  • Flozzy•20
    @flozzy99

    Hey Adriano, I really like your design, especially some details that you add, Well done! I have a curious question 😅, how long take you to complete this challenge?

  • Sounak Mukherjee•560
    @kanuos

    @correlucas Hi Adriano, your design looks impeccable. However, as you probably have observed, the design has a prominent linear-gradient background which fades from bottom up, whereas in your solution that gradient isn't that prominent. Was that something you did deliberately as your own variation?

  • David Martel Cloutier•60
    @DavidMartelCloutier

    I really like the little personal touch you added.

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