From ee4b6e722046146cd96d3aa37d1f22a7ab4df94d Mon Sep 17 00:00:00 2001 From: Yevheniia Andropova Date: Tue, 21 Jan 2025 00:15:21 +0200 Subject: [PATCH 1/2] add task solution --- readme.md | 2 +- src/index.html | 6 +++- src/styles/index.scss | 67 ++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 72 insertions(+), 3 deletions(-) diff --git a/readme.md b/readme.md index b55608052..4cadea0bc 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://eugenia-andropova.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..81be8238f 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..1e2782c90 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,68 @@ -body { +body, +html { margin: 0; + padding: 0; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +@keyframes rotate { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.stopwatch { + width: 80vmin; + height: 80vmin; + border: 1vmin dotted #000; + border-radius: 50%; + position: relative; + + &__minutes-hand { + height: 20vmin; + width: 3vmin; + background-color: #0700ff; + position: absolute; + top: 20vmin; + left: calc(50% - 1.5vmin); + transform-origin: 50% 100%; + animation: rotate 600s steps(60) infinite; + } + + &__second-hand { + height: 38vmin; + width: 1.5vmin; + background-color: #2c8000; + position: absolute; + top: 2vmin; + left: calc(50% - (1.5vmin / 2)); + transform-origin: 50% 100%; + animation: rotate 10s linear infinite; + } + + &__center { + height: 5vmin; + width: 5vmin; + background-color: #f6a603; + border-radius: 50%; + position: absolute; + top: calc(50% - 2.5vmin); + left: calc(50% - 2.5vmin); + } + + &.speed-up { + &__minutes-hand { + animation-duration: 600s / 6; + } + + &__seconds-hand { + animation-duration: 10s / 6; + } + } } From a980bdd32bdfdc1afd90fcbdea1f601a35484da2 Mon Sep 17 00:00:00 2001 From: Yevheniia Andropova Date: Tue, 21 Jan 2025 00:24:50 +0200 Subject: [PATCH 2/2] add task solution --- src/index.html | 2 +- src/styles/index.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/index.html b/src/index.html index 81be8238f..925048861 100644 --- a/src/index.html +++ b/src/index.html @@ -17,7 +17,7 @@ /> -
+
diff --git a/src/styles/index.scss b/src/styles/index.scss index 1e2782c90..e7e5c8c4b 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -56,12 +56,12 @@ html { left: calc(50% - 2.5vmin); } - &.speed-up { + &--speed-up { &__minutes-hand { animation-duration: 600s / 6; } - &__seconds-hand { + &__second-hand { animation-duration: 10s / 6; } }