Newsletter Signup Form with Success Message | React JS ⚛️ & CSS 🎨

Community feedback

• 

  Askat•100

  @asanalievPosted 2 months ago

  Hi Marzia,

  Quickly reviewed on different screens. The layout looks consistent everywhere. https://pulselet.com/projects/81/layouts

  Quick code scanning found 9 issues, but nothing critical. https://pulselet.com/projects/81/issues

  Overall, great job! 👍

  Marked as helpful

  1

  ---

  

  Marzia Jalili•3,970

  @MarziaJaliliPosted 2 months ago

  WOW!

  I didn't even know that such a web was out there for checking the issues of our websites.

  Thanks a MILLION for letting me know. I will start using it from now on.

  1

  

  Askat•100

  @asanalievPosted 2 months ago

  @MarziaJalili You are very welcome! Please let me know if you want me to test your other projects, or this one after refactoring.

  1

  

  Marzia Jalili•3,970

  @MarziaJaliliPosted 2 months ago

  As you say, 🫡

  1
• 

  Yacoub AlDweik•2,830

  @YacoubDweikPosted 2 months ago

  Good Job Afghani!

  Transition is not working bcuz of the gradient, when u set a background to be gradient that means this is gonna be background-image and not background-color as u expected.

  To make that work consider using pseudo elements and play with their opacity.

  1

  ---

  

  Marzia Jalili•3,970

  @MarziaJaliliPosted 2 months ago

  @YacoubDweik Thanks for the quick feedback!

  But can I use the linear-gradient function with the pseudo elements?

  I guess we can't.

  0

  

  Yacoub AlDweik•2,830

  @YacoubDweikPosted 2 months ago

  @MarziaJalili Why not? Something like this:

  .gradient-transition {
    position: relative;
    width: 300px;
    height: 200px;
    background: linear-gradient(to right, #ff7e5f, #feb47b); /* Initial Gradient */
    overflow: hidden;
  }
  
  .gradient-transition::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #6a11cb, #2575fc); /* Target Gradient */
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 1; /* Ensure it overlays the main gradient */
  }
  
  .gradient-transition:hover::before {
    opacity: 1;
  }
  

  Marked as helpful

  1