Newsletter sign up form [JavaScript + Sass]

Community feedback

• 

  P

  Kamran Kiani•2,700

  @kaamiikPosted about 2 months ago

  Some notes:

  1. It's wrong to use one repo for more than one project and It is consider as a bad practice and there is no point for it. Make one repo for each project.

  ---

  2. Your `max-width should be in rem unit.

  ---

  3. For your .join-text use p instead of span. Also why you used a p tag for a wrapper of your label and input? If you wanna wrapper you can use div. If you have text, use p or a proper tag.

  Marked as helpful

  0

  ---

  

  P

  Fırat•270

  @firatyedibelaPosted about 2 months ago

  @kaamiik Keeping all Frontend Mentor projects together is more maintainable for me. I don't want to create a new repository for each project and end up with tens of them on my GitHub profile. I'd like to keep it that way if it's no big trouble. I am able to share my code and deploy. And for now, that's all I need.

  Thanks for checking.

  0
• 

  Marzia Jalili•3,970

  @MarziaJaliliPosted 2 months ago

  REAL great job, man!

  A Tiny adjestment you can make to the button:

  For a smoother color change we usually use the transition property, but unfortunately it doesn't work with non-solid colors like linear-gradient.

  Therefore, we have to use the ::before or ::after pseudo elements.

  • Take the code below as an example for html:

  <button>
    <!-- to prevent the text of being hidden we have to wrapp it inside an element -->
    <div>Subscribe to monthly newsletter</div>
  </button>
  

  • Then, apply this in css:

  button {
    position: relative;
    background: black; /* or the code of that dark blue color */
     
    /* ensure that the text doesn't get hidden */
    & > * {
      position: relative;
    }
  }
  
  button::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    background: linear-gradient(codes of the two or more colores);
    /* we will only show it on hover so now it will be hidden... */
    opacity: 0;
    transition: opacity .4s;
  }
  
  button:hover::before {
    /* make the pesudo element appear */
    opacity: 1;
  }
  

  This definitely works!

  Other than this your solution is AWESOME😎😎

  Marked as helpful

  0

  ---

  

  P

  Fırat•270

  @firatyedibelaPosted about 2 months ago

  @MarziaJalili This is awesome. Thanks a lot!

  0