ping-coming-soon-page

Ping coming soon page

Solution : Live Site URL

Solution submitted at Frontend Mentor - Submission link

This is a solution to the Ping coming soon page challenge on Frontend Mentor.

The challenge

Your challenge is to build out this Coming Soon 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 for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• Submit their email address using an input field
• Receive an error message when the form is submitted if:
  • The input field is empty. The message for this error should say "Whoops! It looks like you forgot to add your email"
  • The email address is not formatted correctly (i.e. a correct email address should have this structure: [email protected]). The message for this error should say "Please provide a valid email address"

Built with

• HTML
• CSS
• JavaScript

Experience & Challenges

This challenge was quick and easy. I use flex and/or grid any and everywhere, as much and I like using them I wanted to not use them if not required. There were few instances where using flex would have really helped and made things easy but otherwise this was done without using flex or grid.

I forgot about the error message and only at the end had to add it which took a lot of time as its position was a bit tricky without using flex especially when I had to add it after I had finished everything.

---

Pending Tasks

• Final challenge screenshot(s) (desktop and mobile)