html clock

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    html {
        width: 100%;
        margin: 0;
        font-family: "Helvetica";
    }
    body {
        width: 60em;
        margin: 2em auto;
        background: steelblue;
        position: relative;
    }
    .datediv {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: absolute;
        left: 0;
        top: 0;
        border:1px solid white;
        margin: auto;
    }
    .time {
        margin-bottom: 1em;
        position: relative;
        width: 100%;
    }
    .date {
        margin: 1em 0;
        position: relative;
    }
</style>

    <body>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

var date = new Date();

var maxDays =  new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
            var hours = ((date.getHours() / 24) * 50) + 10;
            var minutes = (date.getMinutes() / 60) * hours;
            var seconds = (date.getSeconds() / 60) * minutes;

var months = (((date.getMonth() + 1) / 12) * 50) + 10;
            var days = (date.getDate() / maxDays) * months;

$('.second').css("width", seconds + "em").css("height", seconds + "em");
            $('.minute').css("width", minutes + "em").css("height", minutes + "em");
            $('.hour').css("width", hours + "em").css("height", hours + "em");
            $('.time').css("height", hours + "em");

$('.day').css("width", days + "em").css("height", days + "em");
            $('.month').css("width", months + "em").css("height", months + "em");
            $('.date').css("height", months + "em");

setTimeout(newClock, 1000);
        })()
        </script>

https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js