All solutions

What are some possible ways to get the white overlay on the lightbox thumbnails? Strangely, I wasn't able to do this. I could create an overlay when selected or on a div but for some reason, I ran into a mental block trying to creating the desired overlay on hover for an <img>.

Aside from this, I would love any feedback. I'm starting to apply for jr. dev positions and am curious what experienced devs think when seeing my code. Are there any red flags? Is there something I should be doing? Do I look like a complete beginner?

**I have updated my solution to fix some accessibility concerns and HTML Validation issues.

I had a lot of issues with the navbar using bootstrap and padding in general. In order to achieve this layout exactly, is it necessary for me to adjust the Bootstrap scss files? I did a little bit, but things started getting messy.

For the mobile navlist, is there a way to make the transition smoother? When it's closed, the navlist jumps back and attaches itself to the navbar. I would like it to just close without attaching.

This was my first attempt at styling something using Bootstrap so I was throwing things together as I learned it, so things may be a complete mess. I am open to all feedback.

Is there a more efficient way to switch the content? Should a tablet layout look like the mobile layout or the desktop layout?

Any feedback and suggestions is appreciated!

Are there any issues with the layout? I know when the phone screen is rotated the text inside my hero overflows its border. Are there any other issues?

Is there a way to style more responsively than adding 10-15 media queries?

Any and all feedback is very greatly appreciated.