If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

JS Animated. How to set up Under Construction page

This tutorial shows how to set up Under Construction page in JS Animated template.

JS Animated. How to set up the Under Construction page

  1. Make sure that you have unzipped the template package. Open site folder. Go to assets folder. Open under-construction.html page in editor:

    How to set the Under Construction page-1

  2. Below you can see under construction demo page:

    How to set the Under Construction page-2

  3. You should remove unneeded scripts and code that represents header menu for demo pages. Please check the video version of tutorial for more details. In our case code looks like the following:

    <!DOCTYPE html>
      <html lang="en">
    <head>
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    
    <title>Under Construction</title>  <link href="dist/css/bootstrap.css" rel="stylesheet">
      <link href="tm/css/tm_docs.css" rel="stylesheet">  </head>
      <body>
      <a class="sr-only" href="#content">Skip navigation</a>  <div class="tm_constuction-main">
      <div id="tm_constuction-box">
      <div class="tm_inside">
      <div class="tm_inner">
      <h4>Our Website is</h4>
      <h1>Under Construction</h1>
      <h5>We'll be here soon with a new website.</h5>
      <div id="tm_counter"></div>
      <div class="tm_counter_desc">
      <div class="fleft">Days</div>
      <div class="fleft">Hours</div>
      <div class="fleft">Minutes</div>
      <div class="fleft">Seconds</div>
      </div>
      </div>
      </div>
      </div>
      </div>
    
      <script src="tm/js/jquery.js"></script>
      <script src="tm/js/jquery-migrate-1.2.1.min.js"></script>
      <script src="dist/js/bootstrap.js"></script>
      <script src="tm/js/jquery.countdown.min.js"></script>
    
      </body>
      </html>
  4. Copy/move under-construction.html file to the folder with web site files. Now we should adjust path to css/js files (as we have moved under construction page to another location).

    We have added assets/ folder to css and script calls <script src="tm/js/jquery.js"></script>. Now the path looks like <script src="assets/tm/js/jquery.js"></script>. Please check the code below.

    <!DOCTYPE html>
          <html lang="en">
    <head>
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    
        <title>Under Construction</title> <link href="assets/dist/css/bootstrap.css" rel="stylesheet">
        
      <link href="assets/tm/css/tm_docs.css" rel="stylesheet"> </head>
      <body>
      <a class="sr-only" href="#content">Skip navigation</a>  <div class="tm_constuction-main">
      <div id="tm_constuction-box">
      <div class="tm_inside">
      <div class="tm_inner">
      <h4>Our Website is</h4>
      <h1>Under Construction</h1>
      <h5>We'll be here soon with a new website.</h5>
      <div id="tm_counter"></div>
      <div class="tm_counter_desc">
      <div class="fleft">Days</div>
      <div class="fleft">Hours</div>
      <div class="fleft">Minutes</div>
      <div class="fleft">Seconds</div>
      </div>
      
      </div>
      </div>
      </div>
      </div>
      
        <script src="assets/tm/js/jquery.js"></script>
          <script src="assets/tm/js/jquery-migrate-1.2.1.min.js"></script>
          <script src="assets/dist/js/bootstrap.js"></script>
        <script src="assets/tm/js/jquery.countdown.min.js"></script>
        
    	</body>
        </html>
    
  5. We should adjust path to digits in jquery.countdown.min.js file. Open site\assets\tm\js\jquery.countdown.min.js file. Add assets/ in the path to tm/img/tm/digits.png file. Remove code for demo counter after that (this code is highlighted on the screenshot below):

    How to set the Under Construction page-3

  6. Set year and date, save changes:

    How to set the Under Construction page-4

  7. We have set under construction page. You may rename the file to index.html and this file will be initial for your web site. Visitors will see this under construction page:

    How to set the Under Construction page-5

Feel free to check the detailed video tutorial below:

JS Animated. How to set up the Under Construction page