commit 15dd836f41b8ce86e7c844b9d0951b08f9be3f1e Author: MrEidam <126872183+MrEidam@users.noreply.github.com> Date: Mon Nov 13 22:01:04 2023 +0100 Version - 1 :p diff --git a/index.html b/index.html new file mode 100644 index 0000000..be7fed4 --- /dev/null +++ b/index.html @@ -0,0 +1,30 @@ + + + + + + Cube - Time + + + + +
+
+
+ +

+ + +

+ + +

+ + +

+ +
+
+ + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..533d720 --- /dev/null +++ b/main.js @@ -0,0 +1,11 @@ +setInterval(() => { + let mm; + if(new Date().getMinutes()<=9){ + mm = '0' + new Date().getMinutes(); + }else{ + mm = new Date().getMinutes(); + } + document.querySelectorAll('.side').forEach((e) => { + e.innerHTML = `${new Date().getHours()} : ${mm}`; + }) +}, 1000); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..6ebc385 --- /dev/null +++ b/style.css @@ -0,0 +1,91 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} +body{ + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #050505; +} +.cube{ + position: relative; + width: 300px; + height: 300px; + transform-style: preserve-3d; + animation: animate 12s linear infinite; +} +@keyframes animate{ + from{transform: rotateX(-30deg) rotateY(0deg);} + to{transform: rotateX(-30deg) rotateY(360deg);} +} +.cube div{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; +} +.cube div span{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(#151515, #00ec00); + transform: rotateY(calc(90deg * var(--i))) translateZ(150px); +} +.top{ + position: absolute; + top: 0; + left: 0; + width: 300px; + height: 300px; + background: #222; + transform: rotateX(90deg) translateZ(150px); +} +.top::after{ + content: ''; + position: absolute; + top: 0; + left: 0; + width: 300px; + height: 300px; + background: #00ec00; + transform: translateZ(-300px); +} +.top::before{ + content: ''; + position: absolute; + top: 0; + left: 0; + width: 300px; + height: 300px; + background: #0f0; + transform: translateZ(-380px); + filter: blur(20px); + box-shadow: + 0 0 120px rgba(0,255,0,0.2), + 0 0 200px rgba(0,255,0,0.4), + 0 0 300px rgba(0,255,0,0.6), + 0 0 400px rgba(0,255,0,0.8), + 0 0 500px rgba(0,255,0,1); +} +.side{ + color: #fff; + position: relative; + width: 100%; + height: 100%; + transform: translateZ(50rem); + text-align: center; + display: flex; + justify-content: center; + align-items: center; + font-size: 4em; + text-shadow: 0 0 50px #050505; +} \ No newline at end of file