Frontend Mentor - Meet Landing Page

I've been away in JavaScript Land since January so it was really nice, and challenging to get back to CSS. I have forgotten a lot over the last six months so I wanted to take the chance to relearn things I never felt confident with.

I've done my best to avoid the use of breakpoints in this challenge. It's an experiment and not good enough for a production level site (a couple of layout shifts don't work), but it was really interesting to push the boundaries of my knowledge of 'intrinsic design'.

A lot of the approach I've tried to apply here comes from the work Stephanie Eckles has been doing on intrinsic design.

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements

Lessons learnt

• 💡 Focusing on intrinsic design forced me to improve my knowledge of modern CSS functions (min, max, clamp, and flex and grid etc.)
• 💡 I like the overall approach of structuring the page along these principles, and only using breakpoints to 'tweak' things
• 💡 CUBE CSS seems to play really nicely with this approach, I think as container queries come online this approach will become more practical

Problems

I know that a couple of layout shifts are not working. But, as mentioned above, I was really trying to develop my knowledge of intrinsic design approaches, and avoid breakpoints in this challenge.

I would very much welcome advice on the following issues:

• ⚠️ Can things be improve without adding extra rules in the media queries. I think I only have two rules in one breakpoint at the moment - relating to text-alignment in the footer and order in the hero section.

Future learning

• 🙇‍♂️ I want to keep pushing on my learning an intrinsic design approach, but I'll allow myself more use of breakpoints so that the final product is more finished.