diff --git a/readme.md b/readme.md index b55608052..705aaaec5 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://IvanRyabukha.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..abca91bf2 100644 --- a/src/index.html +++ b/src/index.html @@ -1,5 +1,8 @@ - + - -

Stop watch

+ +
+
+ +
+ +
+
diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f1..659806d20 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,77 @@ -body { - margin: 0; +@keyframes move-hand { + 0% { + transform: rotate(0); + } + + 100% { + transform: rotate(360deg); + } +} + +.stopwatch { + &__body { + margin: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; + } + + &__watch { + position: relative; + width: 80vmin; + height: 80vmin; + + border: 1vmin dotted #000; + border-radius: 50%; + } + + &__minute { + position: absolute; + bottom: 40vmin; + left: 40vmin - 1.5vmin; + + height: 20vmin; + width: 3vmin; + + transform-origin: bottom center; + background-color: #0700ff; + animation: move-hand 3600s steps(60) infinite; + } + + &__second { + position: absolute; + bottom: 40vmin; + left: 40vmin - 0.75vmin; + + height: 38vmin; + width: 1.5vmin; + + transform-origin: bottom center; + background-color: #2c8000; + animation: move-hand 60s linear infinite; + } + + &__center { + position: absolute; + top: 40vmin - 2.5vmin; + left: 40vmin - 2.5vmin; + + height: 5vmin; + width: 5vmin; + + border-radius: 50%; + background-color: #f6a603; + } + + &--speed-up { + .stopwatch__second { + animation: move-hand 10s linear infinite; + } + + .stopwatch__minute { + animation: move-hand 600s steps(60) infinite; + } + } }