Ping single column Page — Design to HTML/CSS

Photo by kabita Darlami on Unsplash

In this post we are going to create the Ping — Single Column Coming Soon Page from Frontend mentor.


After downloading the resources, I had extracted the zip file and copied it in the Frontend-mentor-challenges folder. After that opened the index.html file with Live Server.

Basic folder

Next, we will be removing the unnecessary things from the index.html file and adding the structure. We have also included font-awesome in our project.

Now, our site looks like below.


Now, we will write the styles in style.css file. We have been given the Libre Franklin font to be used in, file.

We are doing the basic styling for main, h1, h2 and the image first.

Now, our site looks like below.

Site looks

Next, thing which we will style is the form which holds the input and the button. Also, we are going to style the input and button.

Now, our site is almost done except the footer.

Almost done

We will next complete our footer which contains the social links in style.css file.

Now, our desktop view is done and it’s looking awesome.

Desktop done

Let’s complete our mobile view by changing the button.

And the mobile view is also done.

Mobile view

Now, it’s time to move to JavaScript, but first add an id for the form and also a small tag for error in index.html file. Also, needed to add a script tag at the end.


Now, in the style.css file we will add style for input error and form small.


Now, we will add the JavaScript code in main.js and it is quite similar to what we did in our earlier project.

Now, our project is complete with the validations. You can find the code for the same here.

Project completed



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store