CSS Codes
CSS Layouts

<html>
<head>
<link rel="stylesheet" href="ddcubeclass.css" />

<style>

/* 2nd demo specific CSS */
#dynamicfuturedate .ddcubecountdown{
display: block; /* display each cube on its own line */
margin-bottom: 5px;
font-size: 8px; /* adjust font size to scale up/down the cubes (default is 10px) */
}

#dynamicfuturedate ul li{
background: darkred;
}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="ddcubeclass.js"></script>

<script src="ddcubecountdown.js">

/***********************************************
* 3D Cube Countdown script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script>


jQuery(function($){ // on DOM load

//Eg #1
var mycountdown = new cubecountdown({
containerid: 'futuredate',
targetdate: 'October 17, 2018 11:26:30',
size: ['10em', '6em'], // specify cube dimensions in "em" only
unit: ['days']
})

mycountdown.onEnd = function(){ // when target date has arrived
$('#futuredate').html('<b>That date has arrived!</b>')
}


//Eg #2
var christmasday = new Date( new Date().getFullYear(), 11, 25) // construct future date string dynamically

var christmascountdown = new cubecountdown({
containerid: 'dynamicfuturedate',
targetdate: christmasday,
unit: ['days']
})

christmascountdown.onEnd = function(){ // when target date has arrived
$('#dynamicfuturedate').html('<b>Christmas has arrived!</b>')
}

})

</script>
</head>

<body>

<div id="futuredate"></div>
<div style="margin-left:100px;font-weight:bold">until October 17, 2018 11:26:30!</div>

<br />

<div id="dynamicfuturedate"></div>
<div style="font-weight:bold">until Christmas!</div>

</body>

</html>