I really enjoyed this one. I got to discover the differences between mix-blend-mode and background-blend-mode, and display: none and visibility: hidden. Both will surely help me in the future. I probably won't be applying gradients over my background images anymore to achieve the overlay look. And I'll probably use visibility: hidden for my error messages from now on to keep the layout in place and prevent elements from shifting.
This also felt like good jQuery practice. I wrote functions that check each input field to ensure nothing is left blank, and that a valid email address has been entered.
If you can think of any ways to improve my solution, I'd love to hear them. Thanks!
Good work on getting it super close to the design! Upon quick inspection I did notice a few things that may be worth looking into.
-Your current email validation seems to work on leaving it blank but is not currently checking to be a valid email.
-I would take a look into your error icon positioning. While they are in place for your desktop view, once you get to the mobile view they fly off to the right.
-Lastly I would look into your media queries and or spacing when resizing your window. There is a point between the two where your text starts to get cut off.
I am happy to go into more detailed solutions if you'd like but if you're anything like me, I learn/retain better when trying to work things out on my own first :)
Yes, if you want to use a media query for the background of your mobile design you can reposition your background elements to be back in view. With your current code, if you resize your window you can see the circles move out of view as you shrink the width.
