JS Animated. How to set up Under Construction page

Ryan DeWitt January 27, 2015

Rating: 5.0/5. From 1 vote.

Please wait...

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

JS Animated. How to set up the Under Construction page

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

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>

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>

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):
Set year and date, save changes:
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:

Feel free to check the detailed video tutorial below:

JS Animated. How to set up the Under Construction page

This entry was posted in JS Animated tutorials and tagged construction, HTML, maintenance, page. Bookmark the permalink.

HTML/CSS. How to create vertical and horizontal menu

March 13, 2020

This tutorial will show you how to create a vertical and horizontal menus in HTML using CSS styles. Before you proceed please make sure you are familiar with unordered list HTML tags.

HTML. How to create a menu

March 13, 2020

This tutorial shows how to create a menu in HTML. Usually to create a menu we use an onordered list. You can for sure use the div, span, p or other tags but unordered list gives you more flexibility in future stling of the menu.

WordPress. How to make pages show posts from certain categories and assign them to top menu

January 27, 2020

This tutorial shows how to make pages show posts from certain categories and assign them to top menu in Wordpress.

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket

Categories

FAQs

General Tutorials

Featured templates

Categories

FAQs

General Tutorials

Featured templates

MonsterONE Subscrioption

JS Animated. How to set up Under Construction page

Related posts

Submit a ticket