Free “Coming Soon” Page Template with Countdown Timer
  • Published on May 23, 2012
  • Tag

Have you ever seen words of “Under Construction” or “Coming Soon” with only plain text when you get into a website? It’s boring isn’t it? But most of us don’t want to take time to make a maintenance page. So I made a “Coming Soon” page template with countdown timer! Enjoy to use this!


Coming Soon Template Demo
Download
Demo

Features

  • Free for both commercial and non-commercial use
  • Countdown Timer
  • Tested on Chrome、Safari、Firefox、iOS、IE7-9, Opera

Setting Countdown Timer

To set timer, open index.html and change until: new Date(2013, 9 - 1, 28) inside of <head></head>.

$(function () {    
     $('#countdown').countdown({until: new Date(2013, 9 - 1, 28)});
});

This example is set on Sep 28, 2013 which is my birthday. You don’t have to care about “-1”. Read jQuery Countdown Reference for more details.

Change Background Colour

You can set your favourite colour and stripe pattern as a background because it’s used grey transparent PNG. Default colour is blue. Please change background and font colour if you’d like.

Redirect Using .htaccess

.htaccess is very useful to redirect page if you want to set as a maintenance mode. Change file name and date to customize it.

# URL of maintenance page
ErrorDocument 503 /maintenance.html

<IfModule mod_rewrite.c>
  RewriteEngine On
  
  # Set as maintenance mode after 20:00 May 27, 2011
  RewriteCond %{TIME} >201105272000.*
  # Exclude maintenance page, image, js and css
  RewriteCond %{REQUEST_FILENAME} !(/maintenance.html|.(gif|jpe?g|png|js|css))$
  # Exclude specific IP
  RewriteCond %{REMOTE_ADDR} !=192.168.0.4
  RewriteCond %{REMOTE_ADDR} !=192.168.0.5
  # Return 503 error
  RewriteRule ^.*$ - [R=503,L]
</IfModule>

<IfModule mod_headers.c>
# Crawler will come back after this date
Header set Retry-After "Fri, 27 May 2011 11:00:00 GMT"
</IfModule>

Note

Please have a look before you use.

  • Please DO NOT use this template if your website contains objectionable material, such as content of an adult nature like porn or gambling.
  • By using this theme you will bear all responsibility and assume any and all risks. I will not be made liable or held responsible for any damages, direct or consequential, related to the use of the accessible this theme for WordPress.

I will write how to make this template on next post. Feel free to report bugs :)

Share

Comments