CodePen

HTML

            
              <section id="clock" class="clearfix">
    <section id="hours" class="clearfix">
			<div id="first" class="time"><span></span></div>
			<div id="second" class="time"><span></span></div>
		</section>
		<div id="minutes" class="clearfix time"><span></span></div>
		<section class="sixtygrid">
			<span>15</span>
			<span>30</span>
			<span>45</span>
		</section>
		<div id="seconds" class="clearfix time"><span></span></div>
		<section class="sixtygrid"></section>
		<aside id="period">
			<div id="am"></div>
			<div id="pm"></div>
		</aside>
		<h1>NOOKA</h1>
</section>

            
          
!

CSS

            
              /* Main layout and style */
body {
font-family:Lato,Arial,sans-serif;
background:#333;
color:#fff;
padding:40px 20px;
font-size:18px
}

#main,footer {
width:600px;
margin:0 auto
}

a:hover,a:active {
color:#C7F464
}

h1 {
color:#fff;
font-weight:100;
text-transform:uppercase;
margin:0;
line-height:36px
}

/* CLOCK */

/* glossy overlay */
#clock:before {
display:block;
content:"";
position:absolute;
left:0;
top:0;
z-index:999;
height:100%;
padding:0 30px;
background-image:linear-gradient(250 500,transparent 50%,rgba(255,255,255,0.05) 51%,rgba(255,255,255,0.6) 100%);
background-image:-o-linear-gradient(250 500,transparent 50%,rgba(255,255,255,0.05) 51%,rgba(255,255,255,0.6) 100%);
background-image:-moz-linear-gradient(250 500,transparent 50%,rgba(255,255,255,0.05) 51%,rgba(255,255,255,0.6) 100%);
background-image:-webkit-linear-gradient(250 500,transparent 50%,rgba(255,255,255,0.05) 51%,rgba(255,255,255,0.6) 100%);
background-image:-ms-linear-gradient(250 500,transparent 50%,rgba(255,255,255,0.05) 51%,rgba(255,255,255,0.6) 100%);
background-image:-webkit-gradient(linear,250 500,left top,color-stop(0.50,transparent),color-stop(0.51,rgba(255,255,255,0.04)),color-stop(1,rgba(255,255,255,0.4)))
}

/*clock container and bevel*/
#clock,#clock:before {
width:361px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
-khtml-border-radius:30px;
-moz-box-shadow:3px 3px 5px 2px rgba(204,204,204,0.1) inset,-3px -3px 5px 2px rgba(0,0,0,0.3) inset,3px 3px 10px rgba(0,0,0,0.3);
-webkit-box-shadow:3px 3px 5px 2px rgba(204,204,204,0.1) inset,-3px -3px 5px 2px rgba(0,0,0,0.3) inset,3px 3px 10px rgba(0,0,0,0.3);
box-shadow:3px 3px 5px 2px rgba(204,204,204,0.1) inset,-3px -3px 5px 2px rgba(0,0,0,0.3) inset,3px 3px 10px rgba(0,0,0,0.3)
}

#clock {
position:relative;
padding:60px 30px 20px;
margin:0 auto;
background-color:#222;
border-radius:30px
}

/*type*/
#clock {
font-size:16px;
line-height:16px;
color:#444
}

/*time bars*/
#clock .time {
position:relative;
list-style-type:none;
padding:0;
background:#444;
height:30px;
overflow:hidden
}

#clock .time > span {
background:#C7F464;
height:30px;
display:block;
width:0
}

#hours > .time {
margin-bottom:30px;
background-color:#444;
background-image:-webkit-linear-gradient(0,#333 1px,transparent 1px);
background-image:-moz-linear-gradient(0,#333 1px,transparent 1px);
background-size:60px 20px;
background-position:0 0
}

#hours .time > span {
background-color:#C7F464;
background-image:-webkit-linear-gradient(0,rgba(51,51,51,0.3) 1px,transparent 1px);
background-image:-moz-linear-gradient(0,rgba(51,51,51,0.3) 1px,transparent 1px);
background-size:60px 20px;
background-position:0 0
}

/*time bar inset shadow*/
#clock .time:before,#period div {
position:absolute;
display:block;
width:100%;
height:100%;
content:"";
box-shadow:0 0 5px rgba(0,0,0,0.8) inset;
-moz-box-shadow:0 0 5px rgba(0,0,0,0.8) inset;
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.8) inset
}

/*line grid*/
.sixtygrid {
position:relative;
margin:3px 0 20px;
height:10px;
background-color:transparent;
background-image:-webkit-linear-gradient(0,#444 1px,transparent 1px);
background-size:8.4% 20px;
background-position:0 0
}

.sixtygrid span {
position:absolute;
display:block;
width:20px;
margin-left:-10px;
top:10px
}

.sixtygrid span:nth-child(1) {
left:25%
}

.sixtygrid span:nth-child(2) {
left:50%
}

.sixtygrid span:nth-child(3) {
left:75%
}

/*AM / PM*/
#period {
text-align:right;
padding-bottom:17px
}

#period div {
position:relative;
display:inline-block;
overflow:visible;
height:30px;
width:30px;
background:#444;
margin-left:10px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px
}

#period div.now {
background-color:#C7F464
}

#period #am:after,#period #pm:after {
position:absolute;
display:block;
content:"";
width:30px;
text-align:center;
left:0;
top:30px
}

#period #am:after {
content:"AM"
}

#period #pm:after {
content:"PM"
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(document).ready(function() {

  function setTimerBar(scope, time, int) {
  	var width = time * (100/int) + '%';
		//$(scope).animate({width: width}, 300);
		$(scope).width(width);
	}
	
	function hours(d) {
		var hrs = d.getHours();
		if (hrs > 12) {
			var first = hrs - 12;
			var second = hrs - 18;
			$('#period #am').removeClass('now');
			$('#period #pm').addClass('now');
		} else {
			var first = hrs;
			var second = hrs - 6;
			$('#period #pm').removeClass('now');
			$('#period #am').addClass('now');
		}
		setTimerBar('#hours #first span', first, 6);
		setTimerBar('#hours #second span', second, 6);
	}

	function getClock() {
		var d = new Date();

		var sec = d.getSeconds(); 
		setTimerBar('#seconds span', sec, 60);

		var min = d.getMinutes();
		setTimerBar('#minutes span', min, 60);

		hours(d);
	}

	getClock();
	
		setInterval(function() {
			getClock();
		}, 1000);

});

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................