Simple website always looks nice and very professional . Here we will see how to create very simple coming soon page for your website. It is very easy to create the coming soon page using simple html and css code. Take on simple icon related to the coming soon page and put it in to the center of the page using css code like
.holder{
width: 480px;
text-align: center;
margin: 0 auto;
padding-top: 120px;
}
Then give your coming soon text in header tag. The simple coming soon page is ready. This is very simple and neat. I hope this page is very useful to you. You can use this page to your websites. I given the full html code here you can copy paste the code and change the image. or you can download the full code from here by pressing download button.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Coming Soon Page</title>
<meta charset="UTF-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="description">
<link href="https://fonts.googleapis.com/css?family=Neuton|Roboto" rel="stylesheet">
<style>
.holder{
width: 480px;
text-align: center;
margin: 0 auto;
padding-top: 120px;
}
.holder h1 {
font-family: 'loveloblack', sans-serif;
font-size:5em;
color:#2d2d2d;
text-shadow: 3px 3px 0 #e3e3e3;
line-height: 27px;
margin-top: 12px;
margin-bottom: 10px;
}
.holder h1 span.tbl{
font-family: Dosis,Tahoma,sans-serif;
font-size:35px;
color:#2d2d2d;
line-height:1em;
font-weight: bold;
letter-spacing: -1px;
line-height: 1;
text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.3);
}
.holder h1 span {
font-family: Dosis,Tahoma,sans-serif;
font-size:1em;
color:#3d9df8;
line-height:1em;
font-weight: bold;
letter-spacing: -1px;
line-height: 1;
text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.3);
}
p{
font-size: 18px;
font-weight: 600;
color: #13447E;
font-family: 'Neuton', serif;
}
</style>
</head>
<body>
<div class="holder">
<img src="Coming-Soon-Icon.png" style="width:250px;" />
<h1><span class="tbl">Our Website is Coming Soon.</span></h1>
<p><span class="tbl">We'll be back shortly.</span></p><br>
<br />
</div>
</body>
</html>
<html lang="en">
<head>
<title>Coming Soon Page</title>
<meta charset="UTF-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="description">
<link href="https://fonts.googleapis.com/css?family=Neuton|Roboto" rel="stylesheet">
<style>
.holder{
width: 480px;
text-align: center;
margin: 0 auto;
padding-top: 120px;
}
.holder h1 {
font-family: 'loveloblack', sans-serif;
font-size:5em;
color:#2d2d2d;
text-shadow: 3px 3px 0 #e3e3e3;
line-height: 27px;
margin-top: 12px;
margin-bottom: 10px;
}
.holder h1 span.tbl{
font-family: Dosis,Tahoma,sans-serif;
font-size:35px;
color:#2d2d2d;
line-height:1em;
font-weight: bold;
letter-spacing: -1px;
line-height: 1;
text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.3);
}
.holder h1 span {
font-family: Dosis,Tahoma,sans-serif;
font-size:1em;
color:#3d9df8;
line-height:1em;
font-weight: bold;
letter-spacing: -1px;
line-height: 1;
text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.3);
}
p{
font-size: 18px;
font-weight: 600;
color: #13447E;
font-family: 'Neuton', serif;
}
</style>
</head>
<body>
<div class="holder">
<img src="Coming-Soon-Icon.png" style="width:250px;" />
<h1><span class="tbl">Our Website is Coming Soon.</span></h1>
<p><span class="tbl">We'll be back shortly.</span></p><br>
<br />
</div>
</body>
</html>
0 Comments