black timer

by ian_smithz

HTML

<script>

		TargetDate = "3/5/17";
		CountActive = true;
		CountStepper = -1;
		LeadingZero = true;
		DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds ";
		FinishMessage = "It is finally here!";

</script>


<div class="countdown diagonal-overlay">
	<div class="container">
    	<div class="counter-section">
         	<img src="<?php echo get_template_directory_uri(); ?>/img/helv-open-small.png" alt="" class="msg-sm">
		<img src="<?php echo get_template_directory_uri(); ?>/img/helv-open-med.png" alt="" class="msg-m">
            	<img src="<?php echo get_template_directory_uri(); ?>/img/helv-open.png" alt="" class="msg-md">
            <div id="countdown_dashboard">
                <div class="dash weeks_dash">
                    <div class="digit">0</div>
                    <div class="digit">0</div>
                    <span class="dash_title">weeks</span>
                </div>
            
                <div class="dash days_dash">
                    <div class="digit">0</div>
                    <div class="digit">0</div>
                    <span class="dash_title">days</span>
                </div>
            
                <div class="dash hours_dash">
                    <div class="digit">0</div>
                    <div class="digit">0</div>
                    <span class="dash_title">hours</span>
                </div>
            
                <div class="dash minutes_dash">
                    <div class="digit">0</div>
                    <div class="digit">0</div>
                    <span class="dash_title">minutes</span>
                </div>
        	</div>
        </div>
        <div class="register-section">
		<div class="wrapper_mobile">
<a href="https://www.youtube.com/user/Screwfix" target="_blank" class="social-icons youtube last"> </a>
<a href="https://plus.google.com/u/0/+screwfix/posts" target="_blank" class="social-icons google"> </a>
<a href="https://instagram.com/screwfix_uk/" target="_blank"...

CSS

/*
	Theme Name: HTML5 Blank custom theme
	Theme URI: http://html5blank.com
	Description: HTML5 Blank WordPress Theme
	Version: 1.4.3
	Author: Todd Motto (@toddmotto)
	Author URI: http://toddmotto.com
	Tags: Blank, HTML5, CSS3

	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/

/*------------------------------------*\
    MAIN
\*------------------------------------*/

/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
/* html element 62.5% font-size for REM use */
html {
	font-size:62.5%;
}
body {
	font:300 11px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	color:#444;
}
/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}

.clear:after {
    clear:both;
}
.clear {
    *zoom:1;
}
img {
	max-width:100%;
	vertical-align:bottom;
}
p {
	font-family: Arial, sans-serif;
}
a {
	color:#444;
	text-decoration:none;
}
a:hover {
	/*color:#444;*/
}
a:focus {
	outline:0;
}
a:hover,
a:active {
	outline:0;
}
input:focus {
	outline:0;
	border:1px solid #04A4CC;
}

/* --- GLOBAL OVER WRITE STYLES wp Specific ---*/
.news-excerpt .date {
	display:none;
}
.news-excerpt .article-body{
	margin:0!important;
}
.alignnone {
	margin: 0!important;
}
.image_left{
	margin:0;
}
.image_right{
	margin:0;
}
.news-excerpt .article-body a{
	display:none;
}
.article-body a.title{
	display: none!important;
}
#map_canvas{
	background-color: #fff;
	border: 1px solid #999;
}
.gm-style{
  	border: 5px solid #fff;
}
/* --- GLOBAL STYLES wp Specific ---*/

/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/
.btn {
	font-family: 'Archivo Narrow', arial, sans-serif;
	font-weight:700;
}
.btn-primary {
	font-size: 2.1em;
	color: #ffffff;
	padding: 0 12px 0...

JavaScript

(function($){

	$.fn.countDown = function (options) {

		config = {};

		$.extend(config, options);

		diffSecs = this.setCountDown(config);
	
		if (config.onComplete)
		{
			$.data($(this)[0], 'callback', config.onComplete);
		}
		if (config.omitWeeks)
		{
			$.data($(this)[0], 'omitWeeks', config.omitWeeks);
		}

		$('#' + $(this).attr('id') + ' .digit').html('<div class="top"></div><div class="bottom"></div>');
		$(this).doCountDown($(this).attr('id'), diffSecs, 500);

		return this;

	};

	$.fn.stopCountDown = function () {
		clearTimeout($.data(this[0], 'timer'));
	};

	$.fn.startCountDown = function () {
		this.doCountDown($(this).attr('id'),$.data(this[0], 'diffSecs'), 500);
	};

	$.fn.setCountDown = function (options) {
		var targetTime = new Date();

		if (options.targetDate)
		{
			targetTime = new Date(options.targetDate.month + '/' + options.targetDate.day + '/' + options.targetDate.year + ' ' + options.targetDate.hour + ':' + options.targetDate.min + ':' + options.targetDate.sec + (options.targetDate.utc ? ' UTC' : ''));
		}
		else if (options.targetOffset)
		{
			targetTime.setFullYear(options.targetOffset.year + targetTime.getFullYear());
			targetTime.setMonth(options.targetOffset.month + targetTime.getMonth());
			targetTime.setDate(options.targetOffset.day + targetTime.getDate());
			targetTime.setHours(options.targetOffset.hour + targetTime.getHours());
			targetTime.setMinutes(options.targetOffset.min + targetTime.getMinutes());
			targetTime.setSeconds(options.targetOffset.sec + targetTime.getSeconds());
		}

		var nowTime = new Date();

		diffSecs = Math.floor((targetTime.valueOf()-nowTime.valueOf())/1000);

		$.data(this[0], 'diffSecs', diffSecs);

		return diffSecs;
	};

	$.fn.doCountDown = function (id, diffSecs, duration) {
		$this = $('#' + id);
		if (diffSecs <= 0)
		{
			diffSecs = 0;
			if ($.data($this[0], 'timer'))
			{
				clearTimeout($.data($this[0], 'timer'));
			}
		}

		secs = diffSecs % 60;
		mins =...