From c2607c576878aa0305b8ea18b4927112cbfc5c94 Mon Sep 17 00:00:00 2001 From: ILLIA Stasiuk Date: Tue, 31 Dec 2024 20:29:41 +0100 Subject: [PATCH] add task solution --- readme.md | 2 +- src/index.html | 6 +++- src/styles/index.scss | 69 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 75 insertions(+), 2 deletions(-) diff --git a/readme.md b/readme.md index b55608052..75436bc3d 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://greyhoundIlya.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..1e245fe35 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..3829fbb27 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,72 @@ body { margin: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #f0f0f0; +} + +.stopwatch { + position: relative; + width: 80vmin; + height: 80vmin; + border: 1vmin dotted #000; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; +} + +.stopwatch__center { + position: absolute; + width: 5vmin; + height: 5vmin; + background-color: #f6a603; + border-radius: 50%; + z-index: 2; +} + +.stopwatch__hand { + position: absolute; + top: 50%; + left: 50%; + transform-origin: 50% 100%; + transform: translate(-50%, -100%); + z-index: 1; +} + +.stopwatch__hand--second { + width: 1.5vmin; + height: 38vmin; + background-color: #2c8000; + animation: rotate-second 60s linear infinite; +} + +.stopwatch__hand--minute { + width: 3vmin; + height: 20vmin; + background-color: #0700ff; + animation: rotate-minute 3600s steps(60) infinite; +} + +.stopwatch--speed-up .stopwatch__hand--second { + animation-duration: 10s; +} + +.stopwatch--speed-up .stopwatch__hand--minute { + animation-duration: 600s; +} + +@keyframes rotate-second { + to { + transform: translate(-50%, -100%) rotate(360deg); + } +} + +@keyframes rotate-minute { + to { + transform: translate(-50%, -100%) rotate(360deg); + } }