Using GridCss and Flexbox in this exercise

Community feedback

• 

  Harshita Jain•380

  @Harshi786

  Posted about 3 years ago

  Hey!

  Congrats on completing the challenge.

  Your code looks good but few more tips to make your image looks perfect:

  -Separate CSS properties for div and image.

  1. For div of image,

      .imgBox {
      background-color:hsl(277, 64%, 61%);
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
  }
  

  2. Now merge image with above div with mix-blend-mode:multiply property.

  img {
       width: 100%;
       height: 100%;
      mix-blend-mode: multiply;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      opacity: 0.75;
  }
  

  Hope this helps :)

  01

  Marked as helpful
• 

  Karishma Garg•1,010

  @karishma-dev

  Posted about 3 years ago

  Hi, Your solution looks good.

  Few suggestions:

  1. h1 tag should be used to declare the main subject, and heading of the page. So it should only be used once per page. You have used it in various places in this solution, so try to change it with div, span, or any other tag, and also if using section tag then specify a heading within to tell what the section is about. These will help you solve your HTML issues.

  Regarding the image color, I myself couldn't figure it out, someone on this community will definitely help you out.

  01

  Marked as helpful