flex and flex directtion: row, css pure

Hola bro saludos desde México 🇲🇽 hiciste un excelente trabajo a mi parecer, pero hay un par de cuestiones en tu codigo que podrias mejorar, en cuanto al documento HTML tienes un h3 antes que un h2 entonces primero tendrias que tener un h2 en tu codigo tienes

       <h3>12m+</h3> <span class="span2">queries</span>
    </div>

cuando deberia ser mejor

       <h2>12m+</h2> <span class="span2">queries</span>
    </div>

tambien en el formateo de tu codigo no es necesario poner porcentaje o px simplemente dejandolo en 0 basta

tu codigo 👇

*{
    margin: 0%;
    padding: 0%;
    
}

como seria mas adecuado a buenas practicas 👇

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Te recomiendo este canal de youtube para que le des una repasada a todo lo de CSS, HTML y Js, es un increible maestro y lo mejor de todo es gratuito, animo hermano vas excelente

• Canal de youtube de Jonmircha

• Curso de HTML y CSS

Espero te sirva 😀

Hi, Carlos!

You can't create a pseudo-element from the <img>. That is why nothing will change.

It looks like you are editing the original image with an image editor to create the purple overlay. You don't need to do that. You can use mix-blend-mode to create the purple overlay with pure CSS.

I recommend using <picture> element to make the image responsive. There are two versions of the image. So, by using <picture> you can specify which image to show up based on the user's device width.

Then, I recommend making the website responsive. Here are some resources to learn responsive design.

Responsive design ground rules (updated for 2021) | Polypane, The browser for ambitious developers

Responsive design - Learn web development | MDN

I hope this helps. Happy coding!

For the image, I did something like this, I hope that helps:

            <div class="image-container">
                <img class="main-image" src="images/image-header-mobile.jpg" alt="">
            </div>
.image-container {
  display: inherit;
  position: relative;
  width: 100%;
  border-radius: 0 10px 10px 0;
  background-color: hsl(277, 64%, 61%);
}
.main-image {
  width: 100%;
  height: 100%;
  position: relative;
  background-size: cover;
  border-radius: 0 10px 10px 0;
  mix-blend-mode: multiply;
  opacity: 0.75;
}