Create a Responsive "Coming Soon" Page in HTML

Category:

Creating a simple Responsive Coming Soon page in HTML is easy and straight forward.

Open a new html file in any text editor like Mircosoft Expression Web 4 and save it in your system with the name coming-soon.html. The basic syntax to get started is:

<!DOCTYPE html>
<html>
 <head>
  <title>Coming Soon</title>
 </head>
 <body>
 <section>
  <h1>This Website is Coming Soon</h1>
  <p>Thank you for visiting our website. We are creating something nice and exciting for you. Please check back later.</p>
 </section>
 </body>
</html>

Next we need to style it to our taste. For example :

<!DOCTYPE html>
<html>
 <head>
  <style type="text/css">
    html {
		height: 100%;
		padding:0;
		margin:0;
    }
    body {
		margin: 0px;
		padding: 0;
		background: -webkit-linear-gradient(#018fe2 25%,#0F5E8B 75%);
		background: -moz-linear-gradient(#018fe2 25%,#0F5E8B 75%);
		background: -o-linear-gradient(#018fe2 25%,#0F5E8B 75%);
		background: linear-gradient(#018fe2 25%,#0F5E8B 75%);
		width: 100%;
	}
	section {
		text-align: center;
		margin-top: 125px;
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 100px;
	}
	h1 {
		font-size: 38px;
		font-family: Arial;
	}
	p {
		font-family: Arial;
		color: #fff;
		font-size: 22px;
		max-width: 855px;
		line-height: 40px;
		margin: 10px auto;
	}
  </style>
  <title>Coming Soon</title>
 </head>
 <body>
 <section>
  <h1>This Website is Coming Soon</h1>
  <p>Thank you for visiting our website. We are creating something nice and exciting for you. Please check back later.</p>
  </section>
 </body>
</html>

The resulting output will be as shown in the image above. You can adjust background colors, font sizes, font colors, etc. according to your taste as well.