Merge pull request #1726 from Abhishantpadam/main

Fixed the Orientation of Clock Face and their Numbers

Author: TusharKesarwani

Projects/Analog Clock/index.html

@@ -12,18 +12,18 @@
         <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 class="number number1"><div class="inner1">1</div></div>
+        <div class="number number2"><div class="inner2">2</div></div>
+        <div class="number number3"><div class="inner3">3</div></div>
+        <div class="number number4"><div class="inner4">4</div></div>
+        <div class="number number5"><div class="inner5">5</div></div>
+        <div class="number number6"><div class="inner6">6</div></div>
+        <div class="number number7"><div class="inner7">7</div></div>
+        <div class="number number8"><div class="inner8">8</div></div>
+        <div class="number number9"><div class="inner9">9</div></div>
+        <div class="number number10"><div class="inner10">10</div></div>
+        <div class="number number11"><div class="inner11">11</div></div>
+        <div class="number number12"><div class="inner12">12</div></div>
       </div>
     </div>
 <script src="script.js"></script>

Projects/Analog Clock/style.css

@@ -38,19 +38,20 @@ html {
     width: 100%;
     height: 100%;
     transform: translateY(-3px); /*account for the height of the clock hands*/
+    transform: rotate(180deg);
   }
 
   .clock-face::after {
     content: '';
-    background-color: #000;
+    background-color: #000000;
     width: 25px;
     height: 25px;
     position: absolute;
-    top: 50%;
+    top: 50.8%;
     left: 50%;
     transform: translate(-50%,-50%);
     border-radius: 50%;
-    z-index: 11;
+    z-index: 10;
   }
 
   .number {
@@ -63,17 +64,31 @@ html {
     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; }
+  .number1 { --rotate: 210deg; }
+  .number2 { --rotate: 240deg; }
+  .number3 { --rotate: 270deg; }
+  .number4 { --rotate: 300deg; }
+  .number5 { --rotate: 330deg; }
+  .number6 { --rotate: 360deg; }
+  .number7 { --rotate: 30deg; }
+  .number8 { --rotate: 60deg; }
+  .number9 { --rotate: 90deg; }
+  .number10 { --rotate: 120deg; }
+  .number11 { --rotate: 150deg; }
+  .number12 { --rotate: 180deg; }
+
+  .inner1 { transform: rotate(-30deg); }
+  .inner2 { transform: rotate(-60deg); }
+  .inner3 { transform: rotate(-90deg); }
+  .inner4 { transform: rotate(-120deg); }
+  .inner5 { transform: rotate(-150deg); }
+  .inner6 { transform: rotate(-180deg); }
+  .inner7 { transform: rotate(-210deg); }
+  .inner8 { transform: rotate(-240deg); }
+  .inner9 { transform: rotate(-270deg); }
+  .inner10 { transform: rotate(-300deg); }
+  .inner11 { transform: rotate(-330deg); }
+
 
   .hand {
     --rotation: 0;
@@ -89,15 +104,23 @@ html {
   }
   .hand.hour-hand {
     width: 40%;
-    height: 10px;
+    height: 7px;
+    border-radius: 8px 8px 8px 8px ;
+    z-index: 11;
   }
 
   .hand.min-hand {
     width: 45%;
     height: 7px;
+    border-radius: 8px 8px 8px 8px ;
+    z-index: 11;
   }
 
   .hand.second-hand {
+    content: '';
     background: rgb(179, 16, 94);
+    border-radius: 8px 8px 8px 8px ;
+    z-index: 12;
+    width: 50%;
   }