HTML, CSS, flexbox, no javascript

Hi Katrien,

I think this solution is pretty nice and love that you're considering how it works with no styles. You might want to consider using some screenreader only text before the icon in your button (instead of aria-label), as that would then show up in your form with styles turned off (at the moment it's only a white icon on a default grey button, so may be a little hard to understand/read)

One thing that's odd with your html structure is a main element nested inside another main. I'd change that to be a div inside main because you've already identified it as the main content of the page.

I think you could simplify this layout quite a bit more by removing all the margin lefts at explicit widths and using some padding on the left column instead with flex or grid properties to acheive the same layout. Positioning things with predefined margins is always going make you have to work harder on your layout and mean you have to change those values at more breakpoints.

Something to consider for next time maybe, coz this works ok as it is.

Well done!

Hey, good job on this challenge, Katrien S! 🙌

Your solution looks pretty good and actually scales quite nicely! 👍

I suggest,

• Horizontally centering the text in the left side of the page so that it remains in the center of its container even when the screen width increases.
• Adding a transition to the button element so that there's a nice transition between its regular and active states.

Until you figure out how you'd like to do the JS form validation, the built-in browser form validation works just fine! 😉

Keep coding (and happy coding, too)! 😁