Merge pull request #1042 from lagan-dev/improve-analog-clock

TusharKesarwani · web-flow · commit 22e531ebcb31 · 2023-06-23T02:09:00.000+05:30
improved analog clock
diff --git a/Projects/Analog Clock/index.html b/Projects/Analog Clock/index.html
@@ -7,12 +7,23 @@
 </head>
 <body>
 <div class="bg"></div>
-
     <div class="clock">
       <div class="clock-face">
         <div class="hand hour-hand"></div>
         <div class="hand min-hand"></div>
         <div class="hand second-hand"  ></div>
+        <div class="number number1">1</div>
+        <div class="number number2">2</div>
+        <div class="number number3">3</div>
+        <div class="number number4">4</div>
+        <div class="number number5">5</div>
+        <div class="number number6">6</div>
+        <div class="number number7">7</div>
+        <div class="number number8">8</div>
+        <div class="number number9">9</div>
+        <div class="number number10">10</div>
+        <div class="number number11">11</div>
+        <div class="number number12">12</div>
       </div>
     </div>
 <script src="script.js"></script>
diff --git a/Projects/Analog Clock/style.css b/Projects/Analog Clock/style.css
@@ -1,7 +1,6 @@
 html {
-      
     background-size: cover;
-    font-family: 'helvetica neue';
+    font-family: 'helvetica neue',sans-serif;
     text-align: center;
     font-size: 10px;
   }
@@ -16,11 +15,12 @@ html {
     flex: 1;
     min-height: 100vh;
     align-items: center;
+    justify-content: center;
   }
 
   .clock {
-    width: 60rem;
-    height: 60rem;
+    width: 45rem;
+    height: 45rem;
     border: 20px solid white;
     border-radius: 50%;
     margin: 50px auto;
@@ -37,20 +37,67 @@ html {
     position: relative;
     width: 100%;
     height: 100%;
-    transform: translateY(-3px); /* account for the height of the clock hands */
+    transform: translateY(-3px); /*account for the height of the clock hands*/
   }
 
+  .clock-face::after {
+    content: '';
+    background-color: #000;
+    width: 25px;
+    height: 25px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    border-radius: 50%;
+    z-index: 11;
+  }
+
+  .number {
+    --rotate: 0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    transform: rotate(var(--rotate));
+    color: #fff;
+  }
+
+  .number1 { --rotate: 30deg; }
+  .number2 { --rotate: 60deg; }
+  .number3 { --rotate: 90deg; }
+  .number4 { --rotate: 120deg; }
+  .number5 { --rotate: 150deg; }
+  .number6 { --rotate: 180deg; }
+  .number7 { --rotate: 210deg; }
+  .number8 { --rotate: 240deg; }
+  .number9 { --rotate: 270deg; }
+  .number10 { --rotate: 300deg; }
+  .number11 { --rotate: 330deg; }
+
   .hand {
+    --rotation: 0;
     width: 50%;
-    height: 6px;
-    background: black;
+    height: 3px;
     position: absolute;
     top: 50%;
-    transform-origin: 100%;
-    transform: rotate(90deg);
-   
+    left: 50%;
+    background-color: rgb(0,0,0);
+    transform-origin: left;
+    transform: translateX(-50%);
+    z-index: 10;
+  }
+  .hand.hour-hand {
+    width: 40%;
+    height: 10px;
   }
-  .second-hand {
+
+  .hand.min-hand {
+    width: 45%;
+    height: 7px;
+  }
+
+  .hand.second-hand {
     background: rgb(179, 16, 94);
-    
   }
+
