diff --git a/Clock/image/background.png b/Clock/image/background.png
new file mode 100644
index 0000000..641d669
Binary files /dev/null and b/Clock/image/background.png differ
diff --git a/Clock/image/clock.png b/Clock/image/clock.png
new file mode 100644
index 0000000..4c428db
Binary files /dev/null and b/Clock/image/clock.png differ
diff --git a/Clock/index.html b/Clock/index.html
new file mode 100644
index 0000000..b2384fb
--- /dev/null
+++ b/Clock/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Day3</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="container">
+        <div class="circle">
+            <div class="inner">
+                <div class="sec"></div>
+                <div class="min"></div>
+                <div class="hour"></div>
+            </div>
+        </div>
+    </div>
+    <script>
+
+        setInterval(() => {
+            d = new Date(); //object of date()
+            hr = d.getHours();
+            min = d.getMinutes();
+            sec = d.getSeconds();
+            hr_rotation = 30 * hr + min / 2; //converting current time
+            min_rotation = 6 * min;
+            sec_rotation = 6 * sec;
+
+            hour=document.querySelector(".hour")
+            minute=document.querySelector(".min")
+            second=document.querySelector(".sec")
+
+            hour.style.transform = `rotate(${hr_rotation}deg)`;
+            minute.style.transform = `rotate(${min_rotation}deg)`;
+            second.style.transform = `rotate(${sec_rotation}deg)`;
+        }, 500);
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Clock/style.css b/Clock/style.css
new file mode 100644
index 0000000..bedd1c1
--- /dev/null
+++ b/Clock/style.css
@@ -0,0 +1,94 @@
+body{
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+    display: flex;
+     justify-content: center; 
+    align-items: center; 
+    background: url(./image/background.png);
+   background-color: rgb(77, 51, 51); 
+    
+}
+.container{
+  
+    height: 40vw;
+    width: 40vw;
+}
+.circle{
+
+    position: absolute;
+    border-radius: 50%;
+    border: 5px solid grey; 
+    background:orangered;
+    padding: 30px;
+    top: 10%;
+
+    
+}
+
+.inner{
+position: relative;
+    background: url("./image/clock.png") no-repeat;
+    background-size: cover;
+    background-color: aliceblue;
+    
+    height: 400px;
+    width: 400px;
+    border-radius: 50%;
+    display: inline-block;
+    padding: 17px;
+
+}
+.sec{
+    position: relative;
+    height: 150px;
+    width: 3px;
+    left: 196px;
+    top:50px;
+    background:black;
+   transform-origin: bottom;
+    /* transform: rotate(0deg); */
+    /* animation: sec_anim 60s linear infinite; */
+}
+
+.min{
+    position: relative;
+    height: 130px;
+    width: 5px;
+    left: 195px;
+    top:-80px;
+
+    background:black;
+   transform-origin: bottom;
+    transform: rotate(0deg);
+    /* animation: min_anim 3600s linear infinite; */
+}
+.hour{
+   position: relative;
+    height: 110px;
+    width: 7px;
+    left: 194px;
+    top:-190px;
+
+    background:black;
+   transform-origin: bottom;
+    transform: rotate(0deg);
+    /* animation: hour_anim 216000s linear infinite; */
+}
+
+
+/* When Js Is not being Used */
+
+/* @keyframes sec_anim{
+    from{transform:rotate(0deg);}
+    to{transform:rotate(360deg);}   
+}
+@keyframes min_anim{
+    from{transform:rotate(336deg);}
+    to{transform:rotate(360deg);}   
+}
+@keyframes hour_anim{
+    from{transform:rotate(24deg);}
+    to{transform:rotate(360deg);}   
+} */
\ No newline at end of file
