Merge pull request #8 from ruhirani011/main

Animated_Watch
kishanrajput23 · Oct 16, 2021 · 9de5d42 · 9de5d42
2 parents 5451c03 + 14b1729
commit 9de5d42
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 0 deletions.
diff --git a/Animated_Watch/Readme.md b/Animated_Watch/Readme.md
@@ -0,0 +1,7 @@
+# Animated Watch
+
+A Simple Animated Clock made using HTML & CSS .
+
+
+
+![screenshot](screenshot1.jpeg)
diff --git a/Animated_Watch/index.html b/Animated_Watch/index.html
@@ -0,0 +1,19 @@
+<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>Animated Watch</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div id="circle">
+            <div id="in-circle"></div>
+           <div id="hour"></div>
+        <div id="min"></div>
+        <div id="sec"></div>
+        </div>
+
+    </div>
+</body>
+</html>
diff --git a/Animated_Watch/screenshot1.jpeg b/Animated_Watch/screenshot1.jpeg
diff --git a/Animated_Watch/style.css b/Animated_Watch/style.css
@@ -0,0 +1,76 @@
+body {
+    background-color: rgb(165, 232, 236);
+display: flex;
+
+
+}
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+#circle {
+ background-color: #eeebdd;
+ border: 21px solid rgb(19, 2, 2);
+ border-radius: 50%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 500px;
+ height: 500px;
+ bottom: 0;
+right: 0;
+margin: auto;
+
+
+}
+#in-circle {
+background-color: rgb(0, 0, 0);
+position: absolute;
+top: 50%;
+left: 0%;
+bottom: 50%;
+right: 0%;
+z-index: 5;
+
+margin: auto;
+border-radius: 50%;
+height: 40px;
+width: 40px;
+}
+#hour {
+background-color: rgb(23, 81, 175);
+height: 180px;
+width: 3%;
+position: absolute;
+left: 48.5%;
+bottom: 50%;
+animation: rotateit 43200s linear infinite ;
+
+}
+#min {
+background-color: brown;
+height: 220px;
+width: 3%;
+position: absolute;
+transform-origin: bottom;
+left: 48.5%;
+bottom: 50%;
+animation: rotateit 3600s linear infinite;
+
+}
+#sec {
+    background-color: rgb(161, 185, 20);
+    height: 230px;
+    width: 2.5%;
+    position: absolute;
+    transform-origin: bottom;
+    margin: auto;
+    left: 49%;
+    bottom: 50%;
+    animation: rotateit 60s linear infinite;
+}
+@keyframes rotateit {
+    0%{transform:rotate(0deg);}
+    100%{transform: rotate(360deg);}
+}