diff --git a/readme.md b/readme.md index 7ce9332a8..8244f1129 100644 --- a/readme.md +++ b/readme.md @@ -31,11 +31,11 @@ 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://taniakolesnik.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. -- [ ] Keyframes implemented using from/to + transform with rotate property -- [ ] Stopwatch is centered and has the correct arrows size -- [ ] All `Typical Mistakes` from the `BEM` lesson theory are checked. -- [ ] Code follows all the [Code Style Rules ❗️](https://mate-academy.github.io/layout_task-guideline/html-css-code-style-rules) +- [x] Keyframes implemented using from/to + transform with rotate property +- [x] Stopwatch is centered and has the correct arrows size +- [x] All `Typical Mistakes` from the `BEM` lesson theory are checked. +- [x] Code follows all the [Code Style Rules ❗️](https://mate-academy.github.io/layout_task-guideline/html-css-code-style-rules) diff --git a/src/index.html b/src/index.html index 272a19648..d69d25300 100644 --- a/src/index.html +++ b/src/index.html @@ -17,6 +17,14 @@ /> -

Stop watch

+
+
+
+
+
diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f1..bae072308 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,64 @@ body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; margin: 0; } + +.stopwatch { + position: relative; + height: 80vmin; + width: 80vmin; + border: 1vmin dotted #000; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + + @keyframes rotate-hand { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } + } + + &__minutes-hand { + position: absolute; + top: 20vmin; + height: 20vmin; + width: 3vmin; + background-color: #0700ff; + animation: rotate-hand 3600s steps(60) infinite; + transform-origin: center bottom; + + &--speed-up { + animation: rotate-hand 600s steps(60) infinite; + } + } + + &__seconds-hand { + position: absolute; + top: 2vmin; + background-color: #2c8000; + height: 38vmin; + width: 1.5vmin; + animation: rotate-hand 60s linear infinite; + transform-origin: center bottom; + + &--speed-up { + animation: rotate-hand 10s linear infinite; + } + } + + &__centre { + position: absolute; + background-color: #f6a603; + height: 5vmin; + width: 5vmin; + border-radius: 50%; + } +}