Untitled

<html>
<head><style>
body{
background-color:black;
color:white;
font-size:36pt;
}
img{
	height:100%;
}
#text {
	position:absolute;
	padding-left: 200px;
}
div{
display:inline-block;
}

</style></head>
<body>
<div id='pic'>
<img src="https://cdn.star.nesdis.noaa.gov/GOES16/ABI/FD/GEOCOLOR/20182882115_GOES16-ABI-FD-GEOCOLOR-1808x1808.jpg"></img>
</div>
<div id='text'><p id='utc'></p>
<p id='local'></p>
</div>
</body>
<script>


function startTime() {
  var today = new Date();
  var zh = today.getUTCHours();
  var h = today.getHours();
  var zm = today.getUTCMinutes();
  var m = today.getMinutes();
  var zs = today.getUTCSeconds();
  var s = today.getSeconds()
  if (zh > 24) {
    zh = zh - 24;
  }
  if(h > 24){
	h = h - 24;
  }
  if (zh < 0) {
    zh = zh + 24;
  }
  if (h < 0) {
    h = h + 24;
  }
  zh = checkTime(zh);
  zm = checkTime(zm);
  zs = checkTime(zs);

  h = checkTime(h);
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('utc').innerHTML = 'GMT-0 Time: ' + zh + ":" + zm + ":" + zs;
  document.getElementById('local').innerHTML = 'Local Time: ' + h + ":" + m + ":" + s;
  var t = setTimeout(function() {
    startTime()
  }, 500);
}

function checkTime(i) {
  if (i < 10) {
    i = "0" + i
  };
  return i;
}

startTime()
</script>
</html>