responsive card

Community feedback

• 

  Cousnay•320

  @Disney-BanjePosted almost 2 years ago

  Hello Adriano, I am doing well thanks for asking. Hope you are doing well as well. Thanks for the help with the image. I have to say, that I struggled a lot with that part yet I have realized that it is the same as in photoshop where we use blend mode for such things. And also thanks for the extension that will probably save a lot of time.

  Thanks again, for taking the time to review and give me advice on my code

  0
• 

  Adriano•38,270

  @AdrianoEscarabotePosted almost 2 years ago

  Hi Cousnay, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

  The hero image has a color slightly different from the Figma design, if you want to match the color you can reach this using mix-blend-mode with mix-blend-mode: multiply;. The multiply will make the image blend the div background and the opacity will make the image less evident and improve the blend between image/purple div. See the code below:

  img { 
      mix-blend-mode: multiply; 
      opacity: 0.8;
  }
  

  avoid using px, If your web content font sizes are set to absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. if you want to keep using px for development and then format the whole code to rem, you can use this vscode extension: px to rem

  The rest is great!

  I hope it helps... 👍

  0