Loopstudios Multi-Page Website using Flexbox and Mobile-First strategy

What are you most proud of, and what would you do differently next time?

I decided to build out this project as a complete multi-page website using a mobile-first approach. I expanded the original Figma design to create the extra pages, using stock images from Unsplash, which I optimized in Affinity Photo 2, and I wrote my own copy for the extra pages. For the Events page, I created a Slideshow with vanilla JS. I also tried using a mobile-first approach, employing media queries for the desktop version. I enjoyed turning the landing page into a complete website, and using my imagination to come up with ideas for each page.

What challenges did you encounter, and how did you overcome them?

This was my first time submitting a website using a mobile-first approach, and I was a little outside of my comfort-zone, but I tested the project using Chrome's web developer tools device simulator, then displaying the live website on my phone and laptop, and making corrections, until I got the results I wanted. Occasionally something in the mobile version took precedence over the widescreen design, and I would have to figure out where the problem was, but I believe everything is working properly now. If anyone sees an issue, please let me know about it!

Finally, I have a problem with the hero image on the landing page. I originally had the image positioned exactly as the figma file had it, but something happened and it no longer displays properly. If anyone can tell from my code what is wrong, I would like to correct the display.

What specific areas of your project would you like help with?

If someone can please tell me what is causing the hero image on the landing page to only show a detail, rather than covering the whole background, I appreciate it. I used background-position: center; and background-size: cover; Also, what do you think of my code? I try to write as DRY and clean as I can, and I am always trying to improve. Thank you!