countdown

swingin2014.html

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://www.swingin.org/jquery.countdown.min.js"></script>
<script type="text/javascript">$(function(){
  $(".kento-splash-screen").click(function(){
    $(".kento-splash-screen, #kento-splash-screen-black").fadeOut();
  });
$(".kento-splash-screen .countdown").countdown('2014/04/16 20:00:00', function(event) {
    $(this).html(event.strftime('%w weeks %d days %H:%M:%S'));
  });
});</script>
<div class="info">
<h1>SwingIN 2014</h1>
<h2>registration opening soon...</h2>
<h4>April 16th, 2014</h4>

<div class="countdown"></div>

</div>

<style type="text/css">
  #kento-splash-screen-black{
     background: rgba(0,0,0,0.95);
     opacity: 1;
     position: fixed;
     top: 0;
     bottom: 0;
     right: 0;
     left: 0;
     height: auto;
     width: auto;
   }
  .kento-splash-screen{
     font-size: 20px;
     line-height: 2em;
     position: fixed;
     top: 20%;
     bottom: 0;
     right: 0;
     left: 0;
     height: auto;
     width: auto;
     border: none;
     text-align: center;
     
    /* background: rgba(0,0,0,0.85);*/
     background: none;
     background-image: none !important;
     color: white;
  }
  .kento-splash-screen h1{
    font-size: 60px;
    line-height: 2em;
  }

  .kento-splash-screen h2{
     font-size: 40px;
  }

  .kento-splash-screen div.info{
     width: 95%;
     text-align: center;
     margin: 0 auto;
  }

   .kento-splash-screen .countdown{
      font-size: 50px;
   }

</style>