Ping single column Page — Design to HTML/CSS

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

Ping

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.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Frontend Mentor | Ping coming soon page</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" />
</head>
<body>
<main>
<img src="./images/logo.svg" alt="logo" class="logo" />
<h1>We are launching soon!</h1>
<h2>Subscribe and get notified</h2>
<form>
<input type="email" id="email" placeholder="Your email address..." />
<button>Notify Me</button>
</form>
<img src="./images/illustration-dashboard.png" alt="illustration" class="illustration" />
<footer>
<ul class="social-list">
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
</ul>
<p>
&copy; Copyright Ping. All rights reserved.
</p>
</footer>
</main>
</body>
</html>

Now, our site looks like below.

Ping

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

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

@import url('https://fonts.googleapis.com/css?family=Libre+Franklin:300,600,700&display=swap');

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.

form {
display: flex;
align-items: flex-start;
margin-top: 50px;
text-align: left;
}

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.

.social-list {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
list-style-type: none;
}

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

Desktop done

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

@media screen and (max-width: 650px) {
form {
flex-direction: column;
text-align: center;
}

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.

index.html

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

style.css

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

const form = document.getElementById('form');

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

Project completed

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger