Flex and CSS Grid responsive preview card

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  Hello Lisa, congratulations for your solution!

  Answering your question:

  A quick way to reach the same result or better for the image color is just applying mix-blend-mode: multiply and manage the color blend with the opacity values as opacity: 82% in the img selector or the div you've the photo. Note that this blend effect works only if you import the image as a <picture> or <img> to make the color blend with the element under it.

  Remove all settings you've used to make the color in the effect, like the color and the opacity you've changed, add the purple color to be the background on the container:

  @media (min-width: 1280px)
  .containter {
      display: grid;
      grid-template-columns: 1fr 1fr;
      width: 90%;
      max-width: 1200px;
      background-color: hsl(277, 64%, 61%);
  }
  

  Add the mix-blend-mode to the img selector:

  img {
      mix-blend-mode: multiply;
      opacity: 82%;
  }
  

  Hope this helps, happy coding!

  0

  ---

  

  Lisa T•40

  @lisacodesnowPosted about 2 years ago

  @correlucas Thanks for the feedback! It worked great and looks better!

  1

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @lisacodesnow I'm happy to hear that was useful for you Lisa. I'm looking forward for your next challenges.

  0
• 

  Tiago José•300

  @tiago-jv0Posted about 2 years ago

  Hello Lisa, Congrats on solving this challenge !!

  I saw you code and here are some recommendations to improve it :

  • Inside your h1 tag you used span to style the insights word, however, that word is an important one and should be emphasized to the user, a better solution here would be to user the strong tag
  • You used 2 images tag to switch between the mobile and desktop header, i don't need that, in fact, the best way to go about images that switch between device's viewport is to use the picture tag, you can see more details about this tag here : Picture Tag
  • Give a chance to BEM ( Block Element Modifier ) class naming convention, it will improve the readability of your code and give more context about the elements on your markup, you can learn more about it here : BEM Methodology
  • You should use landmark elements to improve your site's acessibility like main and section

  I hope these tips will help you, keep on coding and you will become a great developer !!

  0