popey456963/index.html

## index.html

<!DOCTYPE html><html><head><title>Hex Clock</title><meta charset="UTF-8" ><link href='http://fonts.googleapis.com/css?family=Open+Sans:800,400,300' rel='stylesheet' type='text/css'>

<!--
CREDIT TO:
http://whatcolourisit.scn9a.org/ - Page Design
/u/antennas_to_heaven - Improvements
-->

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta name="description" content="what colour is it?"/>

<meta property="og:title" content="What colour is it?" />
<meta property='og:locale' content="en_GB"/>
<meta property='og:description' content="the time....... now in colour."/>
<meta property="og:type" content="Website" />
<meta property='og:site_name' content="SCN9A"/>
<meta property="og:url" content="http://whatcolourisit.scn9a.org/" />
<meta property="og:image" content="http://scn9a.org/whatcolourisit/1.jpg" />

<style>

@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;}

iframe { display:none;}

}

@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;}

iframe { position:absolute; bottom:-30px; left:50%; margin-left:-25px; opacity:0.1; transition:all 0.4s; -webkit-transition:all 0.4s; width:50px;}
iframe:hover {opacity:1;}

}

table { position:absolute; width:100%; height:100%; top:0px; left:0px;}

</style>

</head>

<body onLoad="dotime()">

<table><td height="100%" width="100%" align="center" valign="middle">
<h1 id="t"></h1><br>
<h2 id="h"></h2>
</td></table>

</body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">


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);
}

</script>

</html>

	<!DOCTYPE html><html><head><title>Hex Clock</title><meta charset="UTF-8" ><link href='http://fonts.googleapis.com/css?family=Open+Sans:800,400,300' rel='stylesheet' type='text/css'>

	<!--
	CREDIT TO:
	http://whatcolourisit.scn9a.org/ - Page Design
	/u/antennas_to_heaven - Improvements
	-->

	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
	<meta name="description" content="what colour is it?"/>

	<meta property="og:title" content="What colour is it?" />
	<meta property='og:locale' content="en_GB"/>
	<meta property='og:description' content="the time....... now in colour."/>
	<meta property="og:type" content="Website" />
	<meta property='og:site_name' content="SCN9A"/>
	<meta property="og:url" content="http://whatcolourisit.scn9a.org/" />
	<meta property="og:image" content="http://scn9a.org/whatcolourisit/1.jpg" />

	<style>

	@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;}

	iframe { display:none;}

	}

	@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;}

	iframe { position:absolute; bottom:-30px; left:50%; margin-left:-25px; opacity:0.1; transition:all 0.4s; -webkit-transition:all 0.4s; width:50px;}
	iframe:hover {opacity:1;}

	}

	table { position:absolute; width:100%; height:100%; top:0px; left:0px;}

	</style>

	</head>

	<body onLoad="dotime()">

	<table><td height="100%" width="100%" align="center" valign="middle">
	<h1 id="t"></h1><br>
	<h2 id="h"></h2>
	</td></table>

	</body>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript">


	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);
	}

	</script>

	</html>