diff --git a/readme.md b/readme.md index b55608052..cc34f0492 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://nataliaso23.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..753adaba9 100644 --- a/src/index.html +++ b/src/index.html @@ -1,7 +1,7 @@ - + Stop watch - -

Stop watch

+ +
+
+
+
+
+
diff --git a/src/index.scss b/src/index.scss new file mode 100644 index 000000000..a44d01c8f --- /dev/null +++ b/src/index.scss @@ -0,0 +1,3 @@ +@import '/src/styles/utils/variables'; +@import '/src/styles/blocks/page'; +@import '/src/styles/blocks/watch'; diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..eb637a7b5 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,6 @@ +.page { + @extend %flex-centering; + + margin: 0; + height: 100vh; +} diff --git a/src/styles/blocks/watch.scss b/src/styles/blocks/watch.scss new file mode 100644 index 000000000..55ed191b7 --- /dev/null +++ b/src/styles/blocks/watch.scss @@ -0,0 +1,63 @@ +%flex-centering { + display: flex; + justify-content: center; + align-items: center; +} + +.stopwatch { + @extend %flex-centering; + + width: $stopwatch-size; + height: $stopwatch-size; + border: 1vmin dotted #000; + border-radius: 50%; + + &__circle { + @extend %flex-centering; + + height: $stopwatch-circle-size; + width: $stopwatch-circle-size; + background-color: #f6a603; + border-radius: 50%; + position: relative; + } + + &__minutes-hand { + width: $minutes-hand-width; + height: $minutes-hand-height; + background-color: #0700ff; + position: absolute; + bottom: $start-hand-position; + z-index: -2; + animation: spin 3600s steps(60, jump-none) infinite; + transform-origin: bottom; + + &--speed-up { + animation-duration: 600s; + } + } + + &__seconds-hand { + width: $seconds-hand-width; + height: $seconds-hand-height; + background-color: #2c8000; + position: absolute; + bottom: $start-hand-position; + z-index: -1; + animation: spin 60s linear infinite; + transform-origin: bottom; + + &--speed-up { + animation-duration: 10s; + } + } +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 000000000..7117feddf --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,7 @@ +$stopwatch-size: 80vmin; +$stopwatch-circle-size: 5vmin; +$minutes-hand-height: 20vmin; +$minutes-hand-width: 3vmin; +$seconds-hand-height: 38vmin; +$seconds-hand-width: 1.5vmin; +$start-hand-position: $stopwatch-circle-size / 2;