just HTML & CSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

  • To recreate the exact purple color of the image you can do the following:

  figure {
  ‎ ‎ ‎ background-color: rgb(171, 92, 219);
  }
  
  img {
  ‎ ‎ . . .
  ‎ ‎ ‎ ‎/* filter: opacity(45%); */
  ‎ ‎ ‎ ‎opacity: 0.75;    
  ‎ ‎ ‎ ‎mix-blend-mode: multiply;
  }
  
  /* Remove all this selector */
  #img-div { ... }
  

  • The second style applies a blending effect to the image by setting the mix-blend-mode property to multiply. This means that the image will blend with the background color in a way that multiplies the color values of each pixel.

  • Now, you won't need an empty div just to display the purple color.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  3

  ---

  

  hamid Mola•120

  @hamidMolaDevPosted over 1 year ago

  Hello @MelvinAguilar , thank you for all that you've done. especially you giving your time for recommendation, thank you ❤. actually i tried to use ‎"mix-blend-mode: multiply;" but i couldn't set the exact color how do you do that, i mean how do you know if i use ‎"opacity: 0.75;" and "background-color: rgb(171, 92, 219)" it works?

  0

  

  hamid Mola•120

  @hamidMolaDevPosted over 1 year ago

  hello @MelvinAguilar can you help me with my new project i get these error i my Chat app CSS illustration sample project: error Buttons must have discernible text

  <button id="back"> <span class="back-sign"></span> <span class="back-sign"></span>

            </button>
  

  Learn more error Buttons must have discernible text

  <button id="send-button"> <span class="back-sign"></span> <span class="back-sign"></span> </button>

  1

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  @hamidMolaDev Hi again!, I have seen that you have already modified the solution, but in case you still want to know, the error you are getting ("Buttons must have discernible text") is related to accessibility. It's important to ensure that buttons have meaningful content for screen readers and other assistive technologies to properly convey their purpose to users.

  In summary, your buttons didn't have visible text inside, they only had the empty <span> tags. The solution was to add "invisible text" or an aria-label to the button to provide a description of what the button does for screen readers.

  <button id="back" aria-label="Return to previous screen"></button>
  

  Marked as helpful

  1

  

  hamid Mola•120

  @hamidMolaDevPosted over 1 year ago

  @MelvinAguilar thank you 🙏🙏

  0

  

  hamid Mola•120

  @hamidMolaDevPosted over 1 year ago

  Hello @MelvinAguilar, I read your projects codes and I have a question about it if you don't misunderstand me, why your CSS codes are long and can you tell me what's the best practice for class names?

  0