HTML , CSS

Hey, great work on this one. Layout in desktop is good, though there is a scrollbar at the bottom. Did you do this on a large screen? I am using 1366x768 dimension. Doesn't respond very well and the mobile state is missing.

Some suggestions would be that:

1. On the body selector, instead of using width: 1440px, use max-width: 1440px and add width: 100%. This make the body have full width but have a max-width as well. Also remove the margin on the body.

2. It will be better if you do not use position: relative to the elements to position. Instead what you may want to do is that:

2.1. On your outer-container you may want to add display: flex. This will make the two elements inside it, side-by-side.

2.2. On the main-container and the img tag, from both selectors, remove the position: relative , the top and float and you can remove as well the display: inline-block on the main-container.

2.3. To achieve the purple effect, like what Comet446 said, using mix-blend-mode, but you can't do that here because your img tag does not have a parent. What you can do is that, make a div that will contain the img. Then on that div, add the background-color of the purple. Then on the img tag, add the background-blend-mode: multiply, you can also tweak the opacity of the img once you done the above methods.

1. You can remove the attribution text so that it won't be contained on the container.

2. Add a more descriptive alt text on the img.

Lastly, on your part, try as best as you can to make it responsive. Creating breakpoints and making a mobile friendly layout. Good luck on it and still, good job on this^

Hello Manish,

Congrats for completing this challenge ! 🙂

To get closer to the design you could use the mix-blend-mode: multiply that will blend the image with the parent's background, just and the color and you'll be ready to go.

Also consider making it responsive

Overall, well done for the challenge and happy coding !