Tarjeta de Estadísticas. [BEM]

Community feedback

• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hola 👋, respecto a tus dudas:

  🔹El problema con las media queries es que estás utilizando una demás, sólo hace falta una con el min-width correspondiente para pasar de una version a otra y listo. Las disculpas del caso porque no lo noté en la solución anterior que te comenté.

  🔹Respecto al color de la imagen, hay varias formas de lograrlo pero la más sencilla y que implica menos código es utilizando la propiedad mix-blend-mode🔎.

  Básicamente consiste en darle un background-color y luego opacity a la imagen para que se mezclen y se produzca ese efecto.

  Quedaría de la siguiente forma:

  header {
    background-color: var(--Soft_violet);
  }
  
  img {
    mix-blend-mode: multiply;
    opacity: 0.8;
  }
  

  Un par de cosas más:

  🔹Esta es una imagen decorativa y la forma de establecer una imagen como decorativa es con el atributo alt vacío para que un lector de pantalla lo ignore.

  🔹Podrías usar el elemento <picture>🔎, que permite mostrar diferentes imágenes para diferentes dispositivos o tamaños de pantalla:

  <picture>
     <source media="(min-width: X)" srcset="images/image-header-desktop.jpg">
     <img src="images/image-header-mobile.jpg" alt="">
  </picture>
  

  🔹El contenido principal de cada documento (todo el card en este caso) debe envolverse con la etiqueta <main>.

  Cualquier otra cosa no dudes en consultar

  Y me dices si te funciona 🙂

  Saludos,

  Marked as helpful

  0

  ---

  

  Axel Soto•160

  @axlsotoPosted over 1 year ago

  @fernandolapaz Muchísimas gracias amigo, me solucionaste el problema del fondo de la imagen y sobre las Medias queries, acabo de subir otro proyecto en el cual utilicé la misma mala práctica de copiar todo el código nuevamente porque no vi tu comentario antes. Pero a partir de ahora ya sé la manera correcta de hacerlo, me encantaría si pudieras dejarme algún contacto ya sea e-mail o alguna RR.SS ya que la verdad yo soy bastante joven y nunca desde que comencé a estudiar programación he tenido la oportunidad de hablar con alguien que quiera dedicarse también a esto... :)

  0

  

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  @axlsoto De nada Axel,

  Soy de los pocos que no usa redes sociales 🙂, sino encantado.

  Pero seguiré por aquí así que estamos en contacto!

  Marked as helpful

  0
• 

  Juan•110

  @JuanitoNievesPosted over 1 year ago

  Hola Amigo, felicitaciones por terminar el reto! 🥳🥳

  A veces es dificil encontrar como hacer distintas cosas, pero que bueno que tengas el animo de mejorar!

  Lo que yo hize para que se viera color morado fue poner un <div> padre dentro del background de la imagen, o la imagen como tal, le puse un fondo morado y un opacity : 70%; . Esa puede ser una solucion como muchas otras maneras que se puede hacer. 👌

  ¡Espero que sigas mejorando y programando!

  Marked as helpful

  0