Skip to content
Submitted over 2 years ago

👨‍đŸ’ģ Chat app illustration with (HTML + CSS + JS / Dark-Light Theme)

accessibility
Adrianoâ€ĸ42,890
@AdrianoEscarabote
A solution to the Chat app CSS illustration 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 certainly the most challenging to do so far, I had some issues with the background elements, but I think I did a good job. My css codes are getting too big, I tried to avoid it but I couldn't hauahuahua I think it's time to start doing these challenges with some framework.

I added some details:

  • 👨‍đŸ’ģ Dark mode and light mode button
  • 🎨 Animation in the background div
  • 👨‍🎨 custom colors

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

  • Travolgi 🍕â€ĸ31,320
    @denielden

    Hi Adriano, congratulations on completing the challenge, great job! 😁

    Some little tips for optimizing your code:

    • add main tag and wrap the card for improve the Accessibility
    • add transition: all .8s ease-in-out on the body to smooth the change color theme effect
    • instead of using px use relative units of measurement like rem -> read here

    Hope this help! Happy coding 😉

    Marked as helpful
  • Lucas 👾â€ĸ104,200
    @correlucas

    Boa! Ficou mto bom seja o design que o cÃŗdigo! Os icones e as animaçÃĩes melharam demais desde o primeiro design com dark mode! ParabÊns lek.

    Adiciona esse media query no seu cÃŗdigo pra reduzir o motion pros usuarios que tem como preferencia nenhuma animacao:

    
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
    Marked as helpful
  • HinaSejaru124â€ĸ310
    @HinaSejaru124

    I think it will have been better if you used body { min-height: 100vh ... } Nice job and Happy Coding

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