👨‍💻 Chat app illustration with (HTML + CSS + JS / Dark-Light Theme)

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  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

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  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

  0

  ---

  

  Adriano•38,330

  @AdrianoEscarabotePosted about 2 years ago

  @correlucas valeeeuu man, vou colocar!

  0

  

  Jorge Villalobos•80

  @JorgeVVPosted about 2 years ago

  @correlucas I think the expectation for prefers-reduced-motion: reduce is to reduce motion (animating translation, scaling, perspective, etc.) and not opacity and color change. Also, reduced motion doesn't mean no motion at all, you can make it more subtle or with a shorter duration.

  0

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @JorgeVV ah ta

  0
• 

  HinaSejaru124•310

  @HinaSejaru124Posted about 2 years ago

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

  0