Newsletter sign-up form with success message using BEM

Community feedback

• 

  solitary_coder•1,000

  @kabir-afkPosted about 1 year ago

  Hey!!,

  as far as hover effect is concerned

  .success__button:hover {
    background: rgb(255, 91, 73);(No need to add this since things are prioritized as you go down below)
    background: linear-gradient(
      90deg,
      rgba(255, 91, 73, 1) 19%,
      rgba(255, 98, 77, 1) 44%,
      rgba(255, 82, 123, 1) 64%,
      rgba(255, 91, 128, 1) 82%,
      rgba(255, 82, 123, 1) 98%
    );
    -webkit-box-shadow: 17px 81px 62px -25px rgba(171, 11, 0, 1);
    -moz-box-shadow: 17px 81px 62px -25px rgba(171, 11, 0, 1);
    box-shadow: 17px 81px 62px -25px rgba(171, 11, 0, 1);(You are spreading the box-shadow in the -ve dir , maybe that's why you are unable to see it)
  }
  

  No need to define each and every shade of color in linear-gradient , unless they are shades of diff color, you could have used to or simply the start and end color , it literally would have been the same

  As far as the box-shadow is concerned , maybe you wanted to add its effect inside your div rather than outside , for that you should have used inset and reset the dimensions of other properties . . . but if not then try removing -25px and you will start seeing your shadow on hover

  Regarding JS

  Are you sure setAttribute is at fault ???? Maybe your if-condition is wrong . . . idk , but if its not wrong you then can try changing the src of image by

  var responsiveImg = document.getElementById("img");
  responsiveImg.src = "./assets/images/illustration-sign-up-mobile.svg"
  

  It'll work the same way . . .

  Corrections to be made

  1. Look , if you are unsuccessful in importing your font-family by using @font-face, then try copying the link tag provided on google font api
  2. When the form is submitted , the user is supposed to see their own email-id on the success message , not a diff email id . . . hope you make these corrections . . . keep the grind!!! 💪💪

  Marked as helpful

  1
• 

  ajeet achal•510

  @ajeetachalPosted about 1 year ago

  to display background image you have define length and with and add this

  .my-element { background-image: url('path/to/image.jpg'); background-position: center; background-size: cover; }

  ** Img Tag SRC Setting Issue **

  It looks like you're on the right track, but there seems to be a small issue with the code. It appears that there are extra spaces in the attribute name and value. Try removing those spaces, and your code should work as expected. Here's the corrected code:

  var imgElement = document.getElementById('my-img'); imgElement.setAttribute("src", "path/to/image.jpg");/

  Marked as helpful

  1