pod-request-access-landing-page

Pod request access landing page

Solution : Live Site URL

This is a solution to the Pod request access landing page challenge on Frontend Mentor.

The challenge

Your challenge is to build out this early access landing page and get it looking as close to the design as possible.

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

Your 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 should show "Oops! Please add your email"
  • The email is not formatted correctly should show "Oops! Please check your email"

Built with

• HTML
• CSS
• CSS Flexbox
• JavaScript

Experience & Challenges

The layout itself had some challenges with the CTA box being moved around for different screen sizes. It wasn't a complicated layout but a tricky one. The other challenging part was to adjust the background image(s) as it not only had a multiple images to be placed in the page but also required adding a color tint to it. I ended up creating a pseudo element to the main container. Since FM challenges like to add background images for most of their challenges, positioning the background image has become a simpler task (but required a lot of tweaking till the end).

I added animations to the the error and success of form validation but I was not happy with the end result.

Continued Development & Learning

CSS Animations requires more reading to make them look smooth and meaningful. Background images, pseudo elements required more reading and experimenting.

---

Pending tasks

• Final challenge screenshot(s)
• Submit the challenge at frontendmentor.