Responsive Pod Request Access Landing Page

Hi, Everyone

That's my responsive solution for this challenge. It was fun to work. I've handled the background image positioning using the CSS background-position property. However, for the image blend mode on a mobile screen, I tried to use the CSS background-blend-mode: screen property but it was not looking as in the given design so I handled that through an overlay and z-index. Hope you guys like this solution.

The Challenge

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements
• Receive an error message when the form is submitted if:
  • The Email address field is empty and should show "Oops! Please add your email"
  • The email is not formatted correctly and should show "Oops! Please check your email"

What I learned

• Writing Semantic HTML5 markup
• CSS Flexbox & Grids
• Mobile-first workflow
• JS DOM Manipulation & Form handling

Please give your valuable feedback to me on this. It'd be really helpful for me to improve my solutions. Thanks, Kepp mentoring!!!