mate-academy · bobuskyi · Mar 5, 2025 · Mar 5, 2025 · Mar 5, 2025 · Mar 5, 2025
diff --git a/readme.md b/readme.md
@@ -32,7 +32,7 @@ This is possible because [we use the Parcel library](https://en.parceljs.org/scs
 ## Checklist
 
 ❗️ Replace `<your_account>` with your GitHub username and copy the links to the `Pull Request` description:
-- [DEMO LINK](https://<your_account>.github.io/layout_stop-watch/)
+- [DEMO LINK](https://bobuskyi.github.io/layout_stop-watch/)
 
 ❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it.
 

diff --git a/src/index.html b/src/index.html
@@ -17,6 +17,10 @@
     />
   </head>
   <body>
-    <h1>Stop watch</h1>
+    <div class="stopwatch stopwatch--speed-up">
+      <div class="stopwatch__dot"></div>
+      <div class="stopwatch__minutes"></div>
+      <div class="stopwatch__seconds"></div>
+    </div>
   </body>
 </html>
diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -1,3 +1,74 @@
+@import 'variables';
+@import 'mixins';
+
 body {
+  display: flex;
+  height: 100vh;
   margin: 0;
+  align-items: center;
+  justify-content: center;
+}
+
+.stopwatch {
+  width: $watch-size;
+  height: $watch-size;
+  border-radius: 50%;
+  border: $border-size dotted $color-black;
+
+  &__dot {
+    @include aligin-center;
+
+    width: $dot-size;
+    height: $dot-size;
+    border-radius: 50%;
+    background: $color-orange;
+    transform: translateY(-50%);
+    z-index: 3;
+  }
+
+  &__minutes {
+    @include aligin-center;
+    @include watch-animation(3600s);
+
+    width: $minutes-width;
+    z-index: 1;
+
+    &::before {
+      background: $color-blue;
+      content: '';
+      display: block;
+      width: $minutes-width;
+      height: $minutes-height;
+      position: absolute;
+      top: -$minutes-height;
+    }
+  }
+
+  &__seconds {
+    @include aligin-center;
+    @include watch-animation(60s);
+
+    width: $seconds-width;
+    z-index: 2;
+
+    &::before {
+      background: $color-green;
+      content: '';
+      display: block;
+      width: $seconds-width;
+      height: $seconds-height;
+      position: absolute;
+      top: -$seconds-height;
+    }
+  }
+
+  &--speed-up {
+    .stopwatch__minutes {
+      animation-duration: 600s;
+    }
+
+    .stopwatch__seconds {
+      animation-duration: 10s;
+    }
+  }
 }
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
@@ -0,0 +1,21 @@
+@mixin aligin-center {
+  position: absolute;
+  top: 50%;
+  margin: 0 auto;
+  left: 0;
+  right: 0;
+}
+
+@keyframes watch {
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@mixin watch-animation($speed) {
+  animation: watch $speed steps(360, end) infinite;
+}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -0,0 +1,14 @@
+// Colors
+$color-black: #000;
+$color-orange: #f6a603;
+$color-blue: #0700ff;
+$color-green: #2c8000;
+
+// Sizes
+$watch-size: 80vmin;
+$dot-size: 5vmin;
+$border-size: 1vmin;
+$minutes-width: 3vmin;
+$minutes-height: 20vmin;
+$seconds-width: 1.5vmin;
+$seconds-height: 38vmin;