From 51fffd7f5a40c4b29e2a7b43a6cdc93b5669ce9b Mon Sep 17 00:00:00 2001 From: karolina0372 Date: Wed, 17 Jun 2026 00:23:32 +0300 Subject: [PATCH 1/3] add solution --- readme.md | 2 +- src/index.html | 5 +++- src/styles/index.scss | 69 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 74 insertions(+), 2 deletions(-) diff --git a/readme.md b/readme.md index b55608052f..d970569079 100644 --- 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 `` with your GitHub username and copy the links to the `Pull Request` description: -- [DEMO LINK](https://.github.io/layout_stop-watch/) +- [DEMO LINK](https://karolina0372.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 index 272a196488..3d2273c0e9 100644 --- a/src/index.html +++ b/src/index.html @@ -17,6 +17,9 @@ /> -

Stop watch

+
+
+
+
diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..fe9a008e80 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,72 @@ +@mixin hand($width, $height, $bg-color) { + position: absolute; + left: 50%; + top: 50%; + width: $width; + height: $height; + background-color: $bg-color; +} + body { margin: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; +} + +.stopwatch { + position: relative; + width: 80vmin; + height: 80vmin; + border: 1vmin dotted #000; + border-radius: 50%; + + &__seconds { + @include hand(38vmin, 1.5vmin, #2c8000); + + transform-origin: left center; + animation: rotate 60s linear infinite; + } + + &__minutes { + @include hand(20vmin, 3vmin, #0700ff); + + transform-origin: left center; + animation: rotate 3600s steps(60) infinite; + } + + &::before { + content: ''; + position: absolute; + left: 50%; + top: 50%; + width: 5vmin; + height: 5vmin; + background-color: #f6a603; + border-radius: 50%; + transform: translate(-50%, -50%); + z-index: 1; + } + + &--speed-up { + .stopwatch__seconds { + animation-duration: 10s; + } + + .stopwatch__minutes { + animation-duration: 600s; + } + } +} + +@keyframes rotate { + from { + transform: translateY(-50%) rotate(-90deg); + } + + to { + transform: translateY(-50%) rotate(270deg); + } } From 301a76ef7e8b5fbe1863f2be9a64703eab24ddf7 Mon Sep 17 00:00:00 2001 From: karolina0372 Date: Wed, 17 Jun 2026 00:30:52 +0300 Subject: [PATCH 2/3] add fix after review --- src/styles/index.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/styles/index.scss b/src/styles/index.scss index fe9a008e80..9cad2c97de 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -63,10 +63,12 @@ body { @keyframes rotate { from { + transform-origin: left center; transform: translateY(-50%) rotate(-90deg); } to { + transform-origin: left center; transform: translateY(-50%) rotate(270deg); } } From 06cd62f6aa633da077aa340d4e21c986a326dcf9 Mon Sep 17 00:00:00 2001 From: karolina0372 Date: Wed, 17 Jun 2026 00:42:20 +0300 Subject: [PATCH 3/3] fix after review --- src/styles/index.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/styles/index.scss b/src/styles/index.scss index 9cad2c97de..778b3c55c1 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -26,14 +26,16 @@ body { &__seconds { @include hand(38vmin, 1.5vmin, #2c8000); - transform-origin: left center; + transform-origin: 0 50%; + transform: translateY(-50%) rotate(-90deg); animation: rotate 60s linear infinite; } &__minutes { @include hand(20vmin, 3vmin, #0700ff); - transform-origin: left center; + transform-origin: 0 50%; + transform: translateY(-50%) rotate(-90deg); animation: rotate 3600s steps(60) infinite; }