How to create a maintenance page on a website

Do you familiar with maintenance page on website and it’s advantages. In the beginning of website journey, when a website is under construction/development then we utilize maintenance page like below image.


<title>Site Under Maintenance!</title>
  body { text-align: center; padding: 140px; }
  h1 { font-size: 45px; }
  body { font: 20px Helvetica, sans-serif; color: #333; }
  article { display: block; text-align: left; width: 560px; margin: 0 auto; }
  a { color: #black; text-decoration: underline; }
  a:hover { color: red; text-decoration: underline; }

    <h1>We&rsquo;ll be come back soon!</h1>
        <p>Sorry for the inconvenience but we&rsquo;re performing some maintenance on our server side. For quick help <a href="">contact us</a>, otherwise we&rsquo;ll be back online shortly!</p>
		<p>Stay tuned!</p>
		<i><p>&mdash; KnowledgeIDea Support Team</i></p>

How to use above code:
Create a simple notepad txt file on your desktop then paste the above entire code in it and save this notepad file from any name with .html extension. Do not forget, add double quotes both outside of the name during save this html file like "demo.html" Now you have successfully created a maintenance page, you also can upload this html page on your hosting root directory via FTP client.

Note: Change contact us email from to your own email inside the above code.

Happy coding!

1 Like