MAKE A CLOCK EASILY , FREE:
Make A clock with simple coding. I make this Clock with several times that's why I can't show you step by step. That's why i upload it with output, and I give you the source code in my blogger site.
Hope you will like it. If you like it then leave a comment for more like this, and hit the subscribe button. I will make more html,css project, javascript project, problem solving with Java, Java pattern, Basically i love to work with Java. that's why i will upload my all problem solving in Java. If you need any help, just ping me, i will help you , take it from me.
Here is the Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Style.css"/>
<title>Clock</title>
<style>
*{
margin:0px;
padding:0px;
}
body{
width:100%;
height:100vh;
background:linear-gradient(#FF3C50, #FF5540) ;
display:flex ;
align-items:center;
justify-content:center;
}
.clock{
width:310px;
height:310px;
background:#222831 url("https://i.postimg.cc/90CnnmJ5/clock-face-2879896.png") ;
background-size:cover;
position:absolute;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
border: 20px solid #222831;
box-shadow:5px 5px 50px black inset,
5px 0px 20px #1E1E20BD;
}
.dot{
width:20px;
height:20px;
background-color:#313134;
position:absolute;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
border: 2px solid #222831;
z-index:100;
}
#hr{
position:absolute;
width:100px;
height:100px;
display:flex;
justify-content:center;
}
#min{
position:absolute;
width:250px;
height:250px;
display:flex;
justify-content:center;
}
#sec{
position:absolute;
width:290px;
height:290px;
display:flex;
justify-content:center;
}
#hr:before{
content:'';
position:absolute;
width:8px;
height:70px;
background-color:#fff ;
top:-25px;
border-radius:20px;
}
#min:before{
content:'';
position:absolute;
width:5px;
height:100px;
background-color:#fff;
top:30px;
border-radius:20px;
}
#sec:before{
content:'';
position:absolute;
width:2px;
height:150px;
background-color:#FF052E;
top:20px;
border-radius:10px;
}
.link{
position:absolute;
top:90%;
left:50%;
transform:translate(-50%,-50%);
background-color:#0D56DE;
width:250px;
text-align:center;
color:white;
font-weight:999;
font-size:4vw;
height:35px ;
font-size:20px;
padding-top:5px;
border-radius:5px;
margin-bottom:5vw;
}
</style>
</head>
<body>
<div class="clock">
<div class="dot"></div>
<div id="hr"></div>
<div id="min"></div>
<div id="sec"></div>
</div>
<a href="https://youtu.be/uz8c6zHeaOM"><div class="link">Subscibe Plz
</div></a>
<script type="text/javascript" charset="utf-8">
setInterval(()=>{
var day =new Date();
var hh=day.getHours();
var mm =day.getMinutes();
var ss =day.getSeconds();
const hour =30*hh+mm/2;
const minute =6*mm;
const second=6*ss;
hr.style.transform=`rotatez(${hour}deg)`;
min.style.transform=`rotatez(${minute}deg)`;
sec.style.transform=`rotatez(${second}deg)`;
}), 1000;
</script>
</body>
</html>