Add clock-face

2 months ago · 4277bd0384
2 changed files with 93 additions and 2 deletions
--- a/index.html
+++ b/index.html
@ -5,10 +5,27 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
-    <title>Document</title>
+    <title>Clock</title>
 </head>
 <body>
-    
+    <div class="clock">
+        <div class="dot"></div>
+        <div class="hands hrs" id="hrs"></div>
+        <div class="hands min" id="min"></div>
+        <div class="hands sek" id="sek"></div>
+        <div class="nums n01">I</div>
+        <div class="nums n02">II</div>
+        <div class="nums n03">III</div>
+        <div class="nums n04">IV</div>
+        <div class="nums n05">V</div>
+        <div class="nums n06">VI</div>
+        <div class="nums n07">VII</div>
+        <div class="nums n08">VIII</div>
+        <div class="nums n09">IX</div>
+        <div class="nums n10">X</div>
+        <div class="nums n11">XI</div>
+        <div class="nums n12">XII</div>
+    </div>
    <script src="main.js"></script>
 </body>
 </html>
--- a/main.css
+++ b/main.css
@ -0,0 +1,74 @@
+body {
+    background-color: #e5e5e5;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+}
+
+.clock {
+    width: 300px;
+    height: 300px;
+    background-color: #adadad;
+    border-radius: 50%;
+    border: 1px solid black;
+    position: relative;
+}
+
+.clock .nums {
+    --rotation: 0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    transform: rotate(var(--rotation));
+    font-size: medium;
+}
+
+.clock .n01 {
+    --rotation: 30deg;
+}
+
+.clock .n02 {
+    --rotation: 60deg;
+}
+
+.clock .n03 {
+    --rotation: 90deg;
+}
+
+.clock .n04 {
+    --rotation: 120deg;
+}
+
+.clock .n05 {
+    --rotation: 150deg;
+}
+
+.clock .n06 {
+    --rotation: 180deg;
+}
+
+.clock .n07 {
+    --rotation: 210deg;
+}
+
+.clock .n08 {
+    --rotation: 240deg;
+}
+
+.clock .n09 {
+    --rotation: 270deg;
+}
+
+.clock .n10 {
+    --rotation: 300deg;
+}
+
+.clock .n11 {
+    --rotation: 330deg;
+}
+
+.clock .n12 {
+    --rotation: 360deg;
+}