Hey Rym!
Looks like you have got the basic outline, colours, and styling, now it is a matter of tweaking it to make the "new" or blue section the same height as the main picture and the main header rows.
I think the main issue you are having with fitting it all together is you are using the mobile picture as the main image regardless of the viewport. This is a pretty easy fix because you are already using @media to change things up between viewports. Have the desktop image (which is rectangular) as your main image at the desktop breakpoint and reconfigure your boxes to fit the correct proportions on the page. Then set the mobile image as that main image when you get to the mobile breakpoint (I set it at 650px).
Columns and rows can be pretty tricky, but if you have an hour to learn how Bootstrap works, it can make outlining more complex layouts like this a lot easier! The documentation for bootstrap is also really handy and I found out from completing this challenge (just yesterday, in fact) that you can tweak all the presets in Bootstrap if you aren't ecstatic with their preset colours, shapes, and "gutters" as they're called.
I am learning Javascript now and think it's cool you incorporated it and got the hamburger menu on the mobile view. It doesn't quite work for me, but a bit of debugging should have that drawer menu functioning soon!
I really hoped this help. There are far more knowledgeable people on here that might be able to give you more precise and useful feedback. ^__^'
