<div class="clock">
      <img src="https://dl.dropbox.com/s/f3b3lyanili7zl2/clock%20template-01.svg?raw=1">
      <div class="hour hand" id="hour"></div>
      <div class="minute hand" id="minute"></div>
      <div class="seconds hand" id="seconds"></div>
</div>
        
<a href="https://youtu.be/pQkglcDPo28" target="_blank">
  Watch Me Code &nbsp;<i class="fa fa-youtube-play" aria-hidden="true"></i> 
</a>
	

body{
    background: url(https://dl.dropbox.com/s/8bojjv34k37t16m/Webp.net-resizeimage%20%282%29.jpg?raw=1) no-repeat center center fixed;
    background-size: cover;
    width: 100%;
    height: 100vh;
    padding: 0;
    margin: 0;
}
.clock{
    height: 320px;
    width: 320px;
    background-color: rgba(255,255,255,0.06);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    border-radius: 50%;
      position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-box-shadow: 30px 30px 35px rgba(0,0,0,0.25);
            box-shadow: 30px 30px 35px rgba(0,0,0,0.25);
    border: 2px solid rgba(255,255,255,0.1);
}
img{
    opacity: 0.6;
}
.hand{
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    background-color: rgba(255,255,255,0.2);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    border-radius: 5px;
    -webkit-transform-origin: bottom;
        -ms-transform-origin: bottom;
            transform-origin: bottom;
}
.hour{
    height: 60px;
    width: 10px;
    top: 100px;
}
.minute{
    height: 80px;
    width: 5px;
    top: 80px;
}
.seconds{
    height: 90px;
    width: 3px;
    top: 70px;
}

a{
    color: #ffffff;
    font-family: "Poppins",sans-serif;
    font-weight: 500;
    position:absolute;
    right:20px ;
    top:20px;
    border:3px solid #ffffff;
    border-radius: 5px;
    text-decoration:none;
}
a>.fa{
  color: #FF0000;
}
@media screen and (min-width: 451px) {
  a{
    font-size: 18px;
     padding:8px 12px 8px 12px;
  }
}

@media screen and (max-width: 450px) {
  a{
    font-size: 12px;
     padding:5px 8px 5px 8px;
  }
}

var hour = document.getElementById("hour");
var minute = document.getElementById("minute");
var seconds = document.getElementById("seconds");

var set_clock = setInterval(
    function clock(){
        var date_now = new Date();
        var hr = date_now.getHours();
        var min = date_now.getMinutes();
        var sec = date_now.getSeconds();

        var calc_hr = (hr * 30) + (min / 2);
        var calc_min =    (min * 6)  ;
        var calc_sec = sec * 6 ;

        hour.style.transform = "rotate(" + calc_hr + "deg)";
        minute.style.transform = "rotate(" + calc_min + "deg)";
        seconds.style.transform = "rotate(" + calc_sec + "deg)";
    }, 1000);