Check This Solution

Community feedback

• 

  Lucas 👾•104,200

  @correlucasPosted over 2 years ago

  👾Hello Mohamed, Congratulations on completing this challenge!

  You’ve done really good work here putting everything together, I’ve some suggestions to improve the design: The way you’ve applied the purple color is fine, but if you want the exact color tone of color of the challenge designs, you need to use mix-blend-mode to make the color blend between the image and the background-color of the container. See the steps below to apply to the img or picture selector:

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

  ✌️ I hope this helps you and happy coding!

  0
• 

  romila•3,550

  @romila2003Posted over 2 years ago

  Hi Mohamed,

  To answer your question, I would strongly suggest taking a mobile-first approach instead of a desktop-first approach as it will be easier for responsiveness and it is also best practice to do so. Therefore, rather than using max-width within the media query, you can use the min-width and make responsive changes after a certain width.

  Also, it is best practice to wrap the main content within the main tag which would ensure that your content is wrapped within the correct landmarks e.g. <main class="container"></main>

  0