<div>
  <header>
    <h1 id="shine" class="shine-logo">Christmas Countdown</h1>
    <h1 id="countdown" class="countdown" style="min-height: 2rem;"></h1>
    <h2>
      <a href="#"><i class="shine-icon genericon genericon-facebook-alt" style="margin-left:0;"></i></a>
      <a href="#"><i class="shine-icon genericon genericon-twitter"></i></a>
      <a href="#"><i class="shine-icon genericon genericon-linkedin"></i></a>
      <a href="#" /><i class="shine-icon genericon genericon-pinterest"></i></a>
    </h2>
  </header>
  <section>
    <article><h3>Shine some light on it</h3>
      <p>&copy; 2014 - Luke Watts</p>
    </article>
  </section>
</div>
@import "compass/css3";

///////////////////
// Variables
///////////////////


///////////////////
// Mixins
///////////////////
@mixin center-text() {
  text-align: center;
}

*,
*::before,
*::after {
  @include box-sizing(border-box);
}

body {
  color: hsl(0, 0%, 75%);
  font-family: Helvetica,Arial,sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

header {
  // Positioning
  line-height: 1;
  text-align: center;
  
  h1 {
    margin-bottom: 2rem;
  }
  
  .shine-logo {
    // Theme
    color: hsl(0, 0%, 97%);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12rem;
    text-rendering: optimizelegibility;
  }
  
  .shine-icon {
    font-size: 3rem;
    margin: 1rem;
  }
}

section article {
  @include center-text;
}

a i.genericon {
  color: hsl(0, 0%, 75%);
  transition: all 0.75s ease-in 0s;
  text-decoration: none;
  
  &.genericon-facebook-alt:hover {
    color: hsl(222, 37%, 47%);
  }
  
  &.genericon-twitter:hover {
    color: hsl(222, 75%, 75%);
  }
  
  &.genericon-linkedin:hover {
    color: hsl(206, 65%, 45%);
  }
  
  &.genericon-pinterest:hover {
    color: hsl(357, 65%, 48%);
  }
}
View Compiled
/*// Our countdown plugin takes a callback, a duration, and an optional message
$.fn.countdown = function (duration, message) {
    // If no message is provided, we use an empty string
    message = message || "";
    // Get reference to container, and set initial content
    var container = $(this[0]).html(duration + message);
    // Get reference to the interval doing the countdown
    var countdown = setInterval(function () {
        // If seconds remain
        if (--duration) {
            // Update our container's message
            container.html(duration + message);
        // Otherwise
        } else {
            // Clear the countdown interval
            clearInterval(countdown);
            // And fire the callback passing our container as `this`
            callback.call(container);   
        }
    // Run interval every 1000ms (1 second)
    }, 1000);

};

// Use p.countdown as container, pass redirect, duration, and optional message
$(".countdown").countdown(10, " seconds remaining");

*/

// COUNT v2
// set the date we're counting down to
var currentYear = new Date().getFullYear();
var target_date = new Date("Dec 25, " + currentYear).getTime();
 
// variables for time units
var days, hours, minutes, seconds;
 
// get tag element
var countdown = document.getElementById("countdown");
 
// update the tag with id "countdown" every 1 second
setInterval(function () {
 
    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
 
    // do some time calculations
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;
     
    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;
     
    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);
     
    // format countdown string + set tag value
    countdown.innerHTML = days + "d " + hours + "h "
    + minutes + "m " + seconds + "s ";  
 
}, 1000);

// SHINE
var shine = new Shine(document.getElementById('shine'));

      function handleMouseMove(event) {
        shine.light.position.x = event.clientX;
        shine.light.position.y = event.clientY;
        shine.draw();
      }


      window.addEventListener('mousemove', handleMouseMove, false);

External CSS

  1. http://s2.wp.com/_static/??-eJyVj90KwjAMhV/IGjaLzAvxWbo2ppX+0XQM3946vBgIFa9yQs53OIE1C51ixVihWgzIoCYNhBGLawfeyaNmPsBPgOvT45c3LCL7hVwzFJx9oiYJmmu39qCcuIq7V64AW1Xe8Gf2qL/+sBLIp1n5XuLqDGHlrTmlZAoqsyXewnU4XaZRynE4P16koYBk

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://bigspaceship.github.io/shine.js/js/shine.min.js