From 69a68c19ec38b495c3b94bba6978915c285b215f Mon Sep 17 00:00:00 2001 From: Denys Piddubnyi Date: Sat, 19 Oct 2024 20:48:28 +0300 Subject: [PATCH] add task solution --- readme.md | 2 +- src/index.html | 6 +++- src/styles/index.scss | 79 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 85 insertions(+), 2 deletions(-) diff --git a/readme.md b/readme.md index 4e9dc714d..e590384f1 100644 --- a/readme.md +++ b/readme.md @@ -28,7 +28,7 @@ In addition to the basic functionality create a BEM modifier called `speed-up` f ## Checklist ❗️ Replace `` with your Github username and copy the links to `Pull Request` description: -- [DEMO LINK](https://.github.io/layout_stop-watch/) +- [DEMO LINK](https://PODDN.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..fa17dbd4b 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..4c982a210 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,82 @@ +@keyframes rotate-seconds { + from { + transform: translate(-50%, -100%) rotate(0deg); + } + to { + transform: translate(-50%, -100%) rotate(360deg); + } +} + +@keyframes rotate-hours { + from { + transform: translate(-50%, -100%) rotate(0deg); + } + to { + transform: translate(-50%, -100%) rotate(360deg); + } +} + body { margin: 0; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; +} + +.stopwatch { + display: flex; + border: 1vmin dotted #000; + border-radius: 50%; + height: 80vmin; + width: 80vmin; + + &__center { + display: flex; + position: relative; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + height: 5vmin; + width: 5vmin; + border-radius: 50%; + background-color: #f6a603; + z-index: 1; + } + + &__minute-hand { + display: flex; + position: absolute; + top: 50%; + left: 50%; + height: 20vmin; + width: 3vmin; + background-color: #0700ff; + z-index: 0; + transform-origin: bottom; + animation: rotate-hours 3600s steps(60) infinite; + } + + &__second-hand { + display: flex; + position: absolute; + top: 50%; + left: 50%; + height: 38vmin; + width: 1.5vmin; + background-color: #2c8000; + z-index: 0; + transform-origin: bottom; + animation: rotate-seconds 60s linear infinite; + } +} + +.stopwatch--speed-up { + .stopwatch__minute-hand { + animation-duration: 600s; + } + + .stopwatch__second-hand { + animation-duration: 10s; + } }