diff --git a/readme.md b/readme.md index b55608052..668d4c5e3 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://NataliiaVdovyna.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..55b87625f 100644 --- a/src/index.html +++ b/src/index.html @@ -1,3 +1,4 @@ + @@ -16,7 +17,14 @@ href="./styles/index.scss" /> - -

Stop watch

+ + +
+
+
+
+
+
+
diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..6c5183126 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,10 @@ +.page { + margin: 0; + + display: flex; + justify-content: center; + align-items: center; + + height: 100vh; + width: 100%; +} diff --git a/src/styles/blocks/watch.scss b/src/styles/blocks/watch.scss new file mode 100644 index 000000000..b64d385cd --- /dev/null +++ b/src/styles/blocks/watch.scss @@ -0,0 +1,59 @@ +.watch { + position: relative; + box-sizing: border-box; + border: 1vmin dotted #000; + border-radius: 50%; + width: $size-of-watch; + height: $size-of-watch; + + &-min { + height: $height-of-min; + width: $width-of-min; + background-color: #0700ff; + position: absolute; + + left: calc(50% - ($width-of-min / 2)); + top: calc(50% - ($height-of-min)); + + z-index: 1; + transform-origin: 50% 100%; + animation: hand 3600s linear infinite; + animation-timing-function: steps(60); + + &--speed-up { + animation-duration: 600s; + } + } + + &-sec { + height: $height-of-sec; + width: $width-of-sec; + + background-color: #2c8000; + position: absolute; + + left: calc(50% - ($width-of-sec / 2)); + top: calc(50% - ($height-of-sec)); + + transform-origin: 50% 100%; + animation: hand 60s linear infinite; + + &--speed-up { + animation-duration: 10s; + } + } + + &-center { + width: $diameter-of-circle; + height: $diameter-of-circle; + + border-radius: 50%; + background-color: #f6a603; + + position: absolute; + z-index: 3; + + left: calc(50% - ($diameter-of-circle / 2)); + top: calc(50% - ($diameter-of-circle / 2)); + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f1..a44d01c8f 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,3 @@ -body { - margin: 0; -} +@import '/src/styles/utils/variables'; +@import '/src/styles/blocks/page'; +@import '/src/styles/blocks/watch'; diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 000000000..68db54117 --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,19 @@ +$size-of-watch: 80vmin; + +$width-of-min: 3vmin; +$height-of-min: 20vmin; + +$height-of-sec: 38vmin; +$width-of-sec: 1.5vmin; + +$diameter-of-circle: 5vmin; + +@keyframes hand { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +}