octocatstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Want a Run Button?

If active, the preview will update automatically when you change code.

            
              <!--
dribbble rebound of MVben's design http://dribbble.com/shots/1145537-Plug-In1
-->


<div class="main">
    <div class="nav">
        <ul>
          <li class="al">Alarms</li>
          <li class="sw">Stopwatch</li>
          <li class="tm">Timer</li> 
          <li class="st">Site</li>
        </ul>
    </div>  
        
    <ul id="clock">
        <li id="hour"></li>
        <li id="min"></li>
        <li id="sec"></li>
    </ul>
        
    <div id="date">
          <span id="monthDay"></span>
          <span id="year"></span>
    </div>
  </div>
            
          
!
            
              @import "compass/css3";

@mixin boxsizing-borderbox {
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;    
box-sizing: border-box;         
}


html {
    background-color: #594c4a;
}
* {
    @include boxsizing-borderbox;
}
body {
    font-family:"Chivo Regular", "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    width: 95.5078125%;
    margin: 0 auto;   
    width: 90%;
    }

.main {
    padding: 4px 0;
    width: 508px;
    height: 348px;
    background-color: #f5f5f5;
    margin: 100px auto;
    @include border-radius(4px); 
    -webkit-box-shadow: 0px 10px 10px rgba(47, 40, 39, 0.9),
                        0px 35px 20px rgba(47, 40, 39, 0.4),
                        0px 50px 15px rgba(69, 57, 62, 0.6); // + clean up with a mixin
    
   }


.nav {
    float: left;
    width: 215px;
    ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    li {
        padding: 30px 0 0 95px;
        height: 84px;
        border-bottom: 1px solid rgba(193,193,193, 0.5);
        font-size: 25px;
        color: rgba(188,185,184, 0.7);
    
           &:hover {
              color: #E0744D;
           }
    }
  
    .al {
        background: url('https://dl.dropboxusercontent.com/u/13526976/clock_wid/alams.svg') 15% center no-repeat;
    }
    .sw {
        background: url('https://dl.dropboxusercontent.com/u/13526976/clock_wid/stopwatch.svg') 15% center no-repeat;
    }
    .tm {
        background: url('https://dl.dropboxusercontent.com/u/13526976/clock_wid/timer.svg') 15% center no-repeat;
    }
    .st {
        background: url('https://dl.dropboxusercontent.com/u/13526976/clock_wid/site.svg') 15% center no-repeat;
        border-bottom: 0px;
    }
}

#clock {
        padding:0;
        position: relative;
        list-style: none;
        margin: -50px 10px 0 0;
        height: 234px;
        width: 234px;
        display: block;
        float: right;
        background: url('https://dl.dropboxusercontent.com/u/13526976/clock_wid/clockFace.svg') 5% center no-repeat;
    /*  -webkit-box-shadow: 0px 0px 20px rgba(47, 40, 39, 0.4);  */ 
}

#sec, #min, #hour {
  position: absolute;
  width: 24px;
  height: 234px;
  top: 0px;
  left: 102px;
}

#sec {
  background: url('https://dl.dropboxusercontent.com/u/13526976/clock_wid/sec.svg');
  z-index: 3;
}
   
#min {
  background: url('https://dl.dropboxusercontent.com/u/13526976/clock_wid/min.svg');
  z-index: 2;
}
   
#hour {
  background: url('https://dl.dropboxusercontent.com/u/13526976/clock_wid/hour.svg');
  z-index: 1;
}


#date {
    float: right;
    padding: 0 40px 40px 0;
    #monthDay{
        display: block;
        font-size: 60px;
    }
    #year{
        margin: 8px 0 0 55px;
        display: block;
        text-height: 50%;
        font-size: 36px;
        color: rgba(188,185,184, 0.7);
    }
} 
            
          
!
            
              /*
 * Date Format 1.2.3
 * (c) 2007-2009 Steven Levithan <stevenlevithan.com>
 * MIT license
 *
 * Includes enhancements by Scott Trenda <scott.trenda.net>
 * and Kris Kowal <cixar.com/~kris.kowal/>
 *
 */

var dateFormat = function () {
	var	token = /d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|[LloSZ]|"[^"]*"|'[^']*'/g,
		timezone = /\b(?:[PMCEA][SDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\d{4})?)\b/g,
		timezoneClip = /[^-+\dA-Z]/g,
		pad = function (val, len) {
			val = String(val);
			len = len || 2;
			while (val.length < len) val = "0" + val;
			return val;
		};

	// Regexes and supporting functions are cached through closure
	return function (date, mask, utc) {
		var dF = dateFormat;

		// You can't provide utc if you skip other args (use the "UTC:" mask prefix)
		if (arguments.length == 1 && Object.prototype.toString.call(date) == "[object String]" && !/\d/.test(date)) {
			mask = date;
			date = undefined;
		}

		// Passing date through Date applies Date.parse, if necessary
		date = date ? new Date(date) : new Date;
		if (isNaN(date)) throw SyntaxError("invalid date");

		mask = String(dF.masks[mask] || mask || dF.masks["default"]);

		// Allow setting the utc argument via the mask
		if (mask.slice(0, 4) == "UTC:") {
			mask = mask.slice(4);
			utc = true;
		}

		var	_ = utc ? "getUTC" : "get",
			d = date[_ + "Date"](),
			D = date[_ + "Day"](),
			m = date[_ + "Month"](),
			y = date[_ + "FullYear"](),
			H = date[_ + "Hours"](),
			M = date[_ + "Minutes"](),
			s = date[_ + "Seconds"](),
			L = date[_ + "Milliseconds"](),
			o = utc ? 0 : date.getTimezoneOffset(),
			flags = {
				d:    d,
				dd:   pad(d),
				ddd:  dF.i18n.dayNames[D],
				dddd: dF.i18n.dayNames[D + 7],
				m:    m + 1,
				mm:   pad(m + 1),
				mmm:  dF.i18n.monthNames[m],
				mmmm: dF.i18n.monthNames[m + 12],
				yy:   String(y).slice(2),
				yyyy: y,
				h:    H % 12 || 12,
				hh:   pad(H % 12 || 12),
				H:    H,
				HH:   pad(H),
				M:    M,
				MM:   pad(M),
				s:    s,
				ss:   pad(s),
				l:    pad(L, 3),
				L:    pad(L > 99 ? Math.round(L / 10) : L),
				t:    H < 12 ? "a"  : "p",
				tt:   H < 12 ? "am" : "pm",
				T:    H < 12 ? "A"  : "P",
				TT:   H < 12 ? "AM" : "PM",
				Z:    utc ? "UTC" : (String(date).match(timezone) || [""]).pop().replace(timezoneClip, ""),
				o:    (o > 0 ? "-" : "+") + pad(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60, 4),
				S:    ["th", "st", "nd", "rd"][d % 10 > 3 ? 0 : (d % 100 - d % 10 != 10) * d % 10]
			};

		return mask.replace(token, function ($0) {
			return $0 in flags ? flags[$0] : $0.slice(1, $0.length - 1);
		});
	};
}();

// Some common format strings
dateFormat.masks = {
	"default":      "ddd mmm dd yyyy HH:MM:ss",
	shortDate:      "m/d/yy",
	mediumDate:     "mmm d, yyyy",
	longDate:       "mmmm d, yyyy",
	fullDate:       "dddd, mmmm d, yyyy",
	shortTime:      "h:MM TT",
	mediumTime:     "h:MM:ss TT",
	longTime:       "h:MM:ss TT Z",
	isoDate:        "yyyy-mm-dd",
	isoTime:        "HH:MM:ss",
	isoDateTime:    "yyyy-mm-dd'T'HH:MM:ss",
	isoUtcDateTime: "UTC:yyyy-mm-dd'T'HH:MM:ss'Z'"
};

// Internationalization strings
dateFormat.i18n = {
	dayNames: [
		"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat",
		"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
	],
	monthNames: [
		"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
		"January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
	]
};

// For convenience...
Date.prototype.format = function (mask, utc) {
	return dateFormat(this, mask, utc);
};


// Clock Widget's date and time... 
var monthDay = dateFormat('mmm dd');
        $('#monthDay').append(monthDay);

var year = dateFormat('yyyy');
        $('#year').append(year);


// Clock Widget's Rotation 
$(function() {
 
      setInterval( function() {
      var seconds = new Date().getSeconds();
      var sdegree = seconds * 6;
      var srotate = "rotate(" + sdegree + "deg)";
      
      $("#sec").css({ "transform": srotate });
          
      }, 1000 );
      
      setInterval( function() {
      var hours = new Date().getHours();
      var mins = new Date().getMinutes();
      var hdegree = hours * 30 + (mins / 2);
      var hrotate = "rotate(" + hdegree + "deg)";
      
      $("#hour").css({ "transform": hrotate});
          
      }, 1000 );

      setInterval( function() {
      var mins = new Date().getMinutes();
      var mdegree = mins * 6;
      var mrotate = "rotate(" + mdegree + "deg)";
      
      $("#min").css({ "transform" : mrotate });
          
      }, 1000 );
 
});
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console