Intro-section-with-dropdown-navigation

Hi Eman, I think this was quite well done, great work here 😊

What I'd probably change is the breakpoint and also the text block width. Right now, the layout changes at 400px, and when that happens, I can barely see the image, and when the screen gets larger, the image then starts to get larger, but it doesn't get large enough until around the 1000px point, which means from the 400px to 1000px, the layout isn't in optimal view.

In case you need some suggestions, here's what I'd do:

1. I would change the breakpoint to something higher, such as 700px or 800px

2. I would remove all the padding you have on the container and the text block, and then put a width: min(100% - 6rem, 80em) and margin-inline: auto to make sure there's always some space around the container and that the container won't expand past 80em

3. I also would add an image reset/normalize rule, because right now if I remove the width on the image, it will get super big. I would add object-fit: contain and width: min(100%, 30rem) for your hero image, and at the top of your style sheet, I would add this image rule for all images:

   img {
     max-width: 100%;
     display: block:
   }
   

Hope some of this can help you out, and keep coding! 😊