I ended up using CSS Grid for some sections, but the navigation and logo list are predominantly Flex Box. I really hated how muted the text colors on this landing page were and ended up tweaking the shades to have a little more contrast. The images were also too big, so once I had the layout down, I determined the largest size necessary for each and resized, compressed, and even exported .webp and .avif versions for browsers that support them. It was weird that the logos were all .png instead of SVG, so I swapped those out too and inlined them to save several extra http requests. All images and logos also use height & width attributes so the browser knows how much space to reserve for them to cut down on layout shifts. All photos except for the first one have native lazy loading attributes. There's also screen reader text for the hamburger menu and all logos.
- 6
Looking good, my only comment is to reduce the font-sizes for the headings. Can't really comment too much on the code since i'm not that good at coding myself so i'll leave that to someone else!