diff --git a/JS CLOCK/index.html b/JS CLOCK/index.html new file mode 100644 index 0000000..e4a8d1a --- /dev/null +++ b/JS CLOCK/index.html @@ -0,0 +1,32 @@ + + + + + + Document + + + + +
+ +
+ + + \ No newline at end of file diff --git a/JS CLOCK/styles.css b/JS CLOCK/styles.css new file mode 100644 index 0000000..08b265a --- /dev/null +++ b/JS CLOCK/styles.css @@ -0,0 +1,216 @@ +* { + margin: 0; + padding: 0; +} + +.wrapper { + height: 100vh; + width: 100%; + background-color: #eff1ea; + font-family: 'Josefin Sans', sans-serif; + float: left; +} + +#clock { + width: 280px; + height: 280px; + background: #25283D; + border: 18px solid #86a515; + border-radius: 50%; + margin: 200px auto 60px; + position: relative; + box-shadow: inset 0 5px 25px #f0ec0a80, 0 5px 25px #f0d9d980, 0 5px 30px #bdc73080, 0 5px 35px #fffbfbf6, 0 5px 40px #c76d6d80, 0 5px 45px #224d5a80; +} + +#clock:before { + content: ''; + position: absolute; + width: 280px; + height: 280px; + left: -18px; + top: -10px; + border: 18px solid #CCCCCC; + border-radius: 50%; + z-index: -2; +} + +#clock:after { + content: ''; + width: 18px; + height: 18px; + background: #c7d8f8; + position: absolute; + border-radius: 50%; + left: calc(50% - 9px); + top: calc(50% - 9px); + box-shadow: 0 2px 4px #00000026; +} + +#clock li { + list-style-type: none; + position: absolute; +} + +.numbers { + position: absolute; + width: 90%; + height: 90%; + padding: 5%; + text-align: center; +} + +.numbers span { + display: block; + color: #dbe7fd; + font-size: 38px; + text-shadow: 0 5px 18px #00000026, 0 2px 3px #00000033; +} + +.numbers:nth-child(1) { + transform: rotate(30deg); +} + +.numbers:nth-child(1) span { + transform: rotate(-30deg); +} + +.numbers:nth-child(2) { + transform: rotate(60deg); +} + +.numbers:nth-child(2) span { + transform: rotate(-60deg); +} + +.numbers:nth-child(3) { + transform: rotate(90deg); +} + +.numbers:nth-child(3) span { + transform: rotate(-90deg); +} + +.numbers:nth-child(4) { + transform: rotate(120deg); +} + +.numbers:nth-child(4) span { + transform: rotate(-120deg); +} + +.numbers:nth-child(5) { + transform: rotate(150deg); +} + +.numbers:nth-child(5) span { + transform: rotate(-150deg); +} + +.numbers:nth-child(6) { + transform: rotate(180deg); +} + +.numbers:nth-child(6) span { + transform: rotate(-180deg); +} + +.numbers:nth-child(7) { + transform: rotate(210deg); +} + +.numbers:nth-child(7) span { + transform: rotate(-210deg); +} + +.numbers:nth-child(8) { + transform: rotate(240deg); +} + +.numbers:nth-child(8) span { + transform: rotate(-240deg); +} + +.numbers:nth-child(9) { + transform: rotate(270deg); +} + +.numbers:nth-child(9) span { + transform: rotate(-270deg); +} + +.numbers:nth-child(10) { + transform: rotate(300deg); +} + +.numbers:nth-child(10) span { + transform: rotate(-300deg); +} + +.numbers:nth-child(11) { + transform: rotate(330deg); +} + +.numbers:nth-child(11) span { + transform: rotate(-330deg); +} + +#second { + width: 100%; + height: 100%; + animation: sec 60s steps(60, end) infinite; +} + +#second:after { + content: ''; + width: 4px; + height: 107px; + border-radius: 2px; + background: #FD2E62; + position: absolute; + left: calc(50% - 2px); + top: 55px; + box-shadow: 1px 2px 3px #00000026; +} + +#minute { + width: 100%; + height: 100%; + animation: sec 3600s steps(60, end) infinite; +} + +#minute:after { + content: ''; + width: 8px; + height: 79px; + border-radius: 4px 4px 2px 2px; + background: #bed4fd; + position: absolute; + left: calc(50% + 30px); + top: 29%; + transform: rotate(-120deg); + box-shadow: -1px 0 5px #00000026; +} + +#hour { + width: 100%; + height: 100%; + transform: rotate(120deg); +} + +#hour:after { + content: ''; + width: 12px; + height: 65px; + border-radius: 6px 6px 3px 3px; + background: #07f3dfb4; + position: absolute; + left: calc(50% - 4px); + top: 50%; + box-shadow: 1px 0 4px #00000026; +} + +@keyframes sec { + to { + transform: rotate(360deg); + } +} \ No newline at end of file