Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<meta charset=utf-8 />
<title>Countdown</title>
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  * { padding: 0; margin: 0; -webkit-box-sizing: border-box; }
  
  html { background: ; }
  body { }
  .clear { clear: both; }
  
  #countdown {
    text-align: center;
    list-style: none;
    margin: 10px auto;
    position: relative;
    z-index: 1; /* prevent shadows falling behind containers with backgrounds */
    width: 400px;
    border-bottom: 1px solid #eee;
    background: #fff;
  }
  #countdown:after, #countdown:before {
      content: '';
      position: absolute;
      bottom: 13px;
      right: 10px;
      width: 70%;
      height: 55%;
      background: transparent;
      -webkit-box-shadow: 8px 7px 10px rgba(0,0,0,.3);
      -webkit-transform: skew(15deg) rotate(5deg);
      z-index: -1; 
  }
  #countdown:before {
      left: 10px;
      -webkit-transform: skew(-15deg) rotate(-5deg);
      -webkit-box-shadow: -8px 7px 10px rgba(0, 0, 0, 0.3); 
  }
  #countdown li {
    position: relative;
    width: 100px;
    float: left;
   }
  
  #countdown .num {
    font: bold 60px/60px century gothic;
    color: #222;
    background: #eee;
    border-right: 1px solid rgba(0,0,0,.4);
    }
  #countdown li:last-of-type .num,
  #countdown li:last-of-type .text{
    border:0;
  }
  #countdown .time #days {}
  #countdown .time #hours {}
  #countdown .time #mins {}
  #countdown .time #secs {}
  #countdown .text {
    color: #333;
    font:bold 20px/40px Century Gothic;
    letter-spacing: -1px;
    text-transform: uppercase;
    background: #fff;
    width: 100%;
    border-right: 1px solid #000;
  }
</style>
</head>
<body>
  
  <ul ID="countdown">
    
    <li> <div ID="days" class="num">00</div>  <div CLASS="text">days</div>     </li> 
    <li> <div ID="hours" class="num">00</div> <div CLASS="text">hours</div>    </li>  
    <li> <div ID="mins" class="num">00</div>  <div CLASS="text">minutes</div>  </li> 
    <li> <div ID="secs" class="num">00</div>  <div CLASS="text">seconds</div>  </li> 
    
    <div class="clear"></div>
  </ul>
  
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers