flex and flex directtion: row, css pure

Community feedback

• 

  Alan Lopez Reyna•300

  @AlanLopReyPosted almost 2 years ago

  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 😀

  Marked as helpful

  0

  ---

  

  Carlos Daniel Morillo•120

  @Buf3rPosted almost 2 years ago

  @AlanLopRey hola bro, si antes lo hacia todo con border-box, pero queria hacerlo mas personalizado, no estoy viendo tutotiales de los challenges, la verdad estoy dando riendo suelta a la fluidez de lo que conozco, me encantan esas cositas que a veces se me olvida jajaja gracias bro

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  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!

  Marked as helpful

  0

  ---

  

  Carlos Daniel Morillo•120

  @Buf3rPosted almost 2 years ago

  @vanzasetia mix-blend-mode works it, jejejeje so very thanks bro

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  @Buf3r No problem! 👍

  0
• 

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  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;
  }
  

  0

  ---

  

  Carlos Daniel Morillo•120

  @Buf3rPosted almost 2 years ago

  @catherineisonline hello, i try it thanks

  0