From b0fa6314337ea2fe39651225645e9ff5445647b5 Mon Sep 17 00:00:00 2001 From: Yevhenia_SS Date: Fri, 20 Dec 2024 16:31:38 +0200 Subject: [PATCH] task done --- readme.md | 2 +- src/index.html | 6 +++- src/styles/index.scss | 72 ++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 77 insertions(+), 3 deletions(-) diff --git a/readme.md b/readme.md index b55608052..d1ce4e365 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://Yevhenia-S.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 272a19648..358555708 100644 --- a/src/index.html +++ b/src/index.html @@ -17,6 +17,10 @@ /> -

Stop watch

+
+
+
+
+
diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f1..b6e290a74 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,73 @@ -body { +$stopwatch-size: 80vmin; +$circle-size: 5vmin; +$minute-hand-length: 20vmin; +$minute-hand-width: 3vmin; +$second-hand-length: 38vmin; +$second-hand-width: 1.5vmin; + +html { margin: 0; + padding: 0; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.stopwatch { + position: relative; + width: $stopwatch-size; + height: $stopwatch-size; + border-radius: 50%; + border: 1vmin dotted #000; + display: flex; + justify-content: center; + align-items: center; + + &__circle { + position: absolute; + z-index: 1; + width: $circle-size; + height: $circle-size; + background-color: #f6a603; + border-radius: 50%; + } + + &__minute-hand { + position: absolute; + width: $minute-hand-width; + height: $minute-hand-length; + background-color: #0700ff; + bottom: 50%; + transform-origin: center bottom; + animation: rotate 3600s steps(60) infinite; + } + + &__second-hand { + position: absolute; + width: $second-hand-width; + height: $second-hand-length; + background-color: #2c8000; + bottom: 50%; + transform-origin: center bottom; + animation: rotate 60s linear infinite; + } + + @keyframes rotate { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + } +} + +.stopwatch--speed-up { + .stopwatch__seconds-hand { + animation-duration: 10s; + } + .stopwatch__min-hand { + animation-duration: 600s; + } }