How to Make Under Construction Page with jQuery Countdown

Author: | Posted in Tutorials No comments
How to Make Under Construction Page with jQuery Countdown

Reviewed by Filiz ÖZER on .

Nice tutorial!

Rating: 10 out of 10

We shared a detailed article about how to use jQuery Countdown script long ago. Today i will show you how to make a Under Construction Page design uses jQuery Countdown. We will also use fullscreen background feature in this page. We will use jQuery, CSS3 and HTML5 programming languages in this design. email subscription module will be a gift to you as an addition we prepared for you. You will be able to integrate MailChimp and similar email subscription systems by using this module. I will tell you step by step how we build our Under Construction page. First, download Supersized plugin from its official website. P.S: If you don’t want to spend time on install, download this page directly from download link and edit it as you wish then start use.

Under Construction Page Tutorial Details

  • Software: HTML5 – CSS3
  • Difficulty: Professional
  • Estimated Completion Time: 15 minutes

countdown-script

[button href="http://dailydesignnotes.com/demos/full-screen-background-slider" size="small" textcolor="#ffffff" target="_blank"]Live Preview[/button] [button href="http://dailydesignnotes.com/down/full-screen-background" size="small" textcolor="#ffffff" target="_blank"]Download[/button]

Step #1 – Add CSS Files

Add css files to the head tag on our page from .zip file which we prepared for you. Pay attention on extensions of files you have to upload. If folders exist in your theme folder, copy files into those folders.

   
   
   

Step #2 – Add JS Files

At this step, i will tell how to add JavaScript codes. Add JS files sorted below to above of the head tag that on your page. We will be able to use full screen background, jquery time countdown features by this files.

   
   
   
   
   

Step #3 – Add JS Plugins

You will need some extensions for run JavaScript codes you added at step #2. You can entegrate codes i give you below to the bottom section of your design/or below of codes i give you at step #2. Don’t forget to fix date. Please check for date options : Date(2013, 10 – 1, 11)

Countdown Plugin

         

Supersized Plugin

img/bg1.jpg, img/bg2.jpg, img/bg3.jpg, img/bg4.jpg image extensions will be describing background pictures of your website which is in JS plugin we adding at this step. You can find this files in .zip file’s img folder which you downloaded. You can also edit or change them way you like it.

		

Step #4 – Call Countdown Script

We shared a detailed article before about how to integrate jQuery Countdown. We highly recommend you to read it. Add code below to your page where you want to show your counter.

countdown-plugin

   

Step #5 – Integration Subscription Form

This email subscription form is a form prepared for MailChimp website. We recommend MailChimp for its 100% free. At this step, add form url that you get from MailChimp website into the action=”#” area then integrate it into page where you want to show it.

email-subscription

            
                

We created an amazing Under Construction page in 5 steps. I did not wanted to give too much details about design. You will get already CSS files in .zip file which you going to need. You can edit CSS files as you wish after download. I hope this article will be useful for you. Please don’t forget to share this article with your friends on your social media profiles and bookmark us.

We made a detailed article before about How To Create An Amazing WordPress Author Page Template. we highly recommend you to read it.

Add Your Comment