A Pen by whisperer on CodePen.
The real auhor is http://jemurphy.org/
<body onLoad="dotime()"> | |
<table> | |
<td height="100%" width="100%" align="center" valign="middle"> | |
<h1 id="t"></h1><br> | |
<h2 id="h"></h2> | |
</td> | |
</table> | |
<script src="http://libs.useso.com/js/jquery/1.10.2/jquery.min.js"></script> | |
<script src="http://libs.useso.com/js/jqueryui/1.10.4/jquery-ui.min.js"></script> | |
</body> |
function dotime(){ | |
$("body").css({"transition": "all 0.8s", "-webkit-transition": "all 0.8s"}); | |
var d = new Date(); | |
var hours = d.getHours(); | |
var mins = d.getMinutes(); | |
var secs = d.getSeconds(); | |
if (hours < 10){hours = "0" + hours}; | |
if (mins < 10){mins = "0" + mins}; | |
if (secs < 10){secs = "0" + secs}; | |
hours.toString(); | |
mins.toString(); | |
secs.toString(); | |
var hex = "#" + hours + mins + secs; | |
$("#t").html(hours +" : "+ mins +" : "+ secs); | |
$("#h").html(hex); | |
document.body.style.background = hex; | |
setTimeout(function(){ dotime();}, 1000); | |
} |
@media all and (max-width: 1024px) { | |
h1 { font-family:"open sans"; font-size:40px; font-weight:300; color:white; transition:all 0.6s; -webkit-transition:all 0.6s;} | |
h2 { font-family:"open sans"; font-size:20px; font-weight:300; color:white; transition:all 0.6s; -webkit-transition:all 0.6s;} | |
} | |
@media all and (min-width: 1024px) { | |
h1 { font-family:"open sans"; font-size:120px; font-weight:300; color:white; transition:all 0.6s; -webkit-transition:all 0.6s;} | |
h2 { font-family:"open sans"; font-size:30px; font-weight:300; color:white; transition:all 0.6s; -webkit-transition:all 0.6s;} | |
} | |
table { position:absolute; width:100%; height:100%; top:0px; left:0px;} | |
.fb-like {position:static; width:100px;} |
A Pen by whisperer on CodePen.
The real auhor is http://jemurphy.org/