Frontend Mentor | Ping coming soon page solution

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

DEMO

Table of Contents

1. Overview
   • Challenge
   • Solution screenshot
   • Links
   • Built With
2. Getting Started
   • Prerequisites
   • Launch locally
3. License
4. Contact

Overview

(back to top)

Challenge

• 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: name@host.tld). The message for this error should say "Please provide a valid email address"

Extra validations from my side:

• Check if email domain include ' . '
• Check if email 'username' has more than one valid character.

(back to top)

Solution screenshot

Links

• Solution URL: https://github.com/sgrazys/13_ping-coming-soon
• Live Site URL: https://sgrazys-ping-landing.netlify.app/

Built With

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow

(back to top)

Getting Started

Prerequisites

Node.js - download and install

https://nodejs.org

Git - download and install

https://git-scm.com

This is an example of how to list things you need to use the software and how to install them.

• npm

  npm install npm@latest -g

Launch locally

Would like to run this project locally? Open terminal and follow these steps:

1. Clone the repo

   git clone https://github.com/sgrazys/13_ping-coming-soon.git

2. Install NPM packages

   npm i
   

   or

   npm install
   

3. Run the development server

   npm run start
   

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Saulius Grazys

Project Link: https://sgrazys-ping-landing.netlify.app/

(back to top)