diff --git a/Art/mitul-bhatia-keyboardanimation/index.html b/Art/mitul-bhatia-keyboardanimation/index.html new file mode 100644 index 000000000..27b0420f6 --- /dev/null +++ b/Art/mitul-bhatia-keyboardanimation/index.html @@ -0,0 +1,30 @@ + + + + + + immersive-3D-billboard + + + + +
+
+
+
+
+ +
+
+
+
+
+ +
+

QUANTUM

+

IMMERSIVE INTERFACE

+
+
+
+ + \ No newline at end of file diff --git a/Art/mitul-bhatia-keyboardanimation/meta.json b/Art/mitul-bhatia-keyboardanimation/meta.json new file mode 100644 index 000000000..e1e2d40c1 --- /dev/null +++ b/Art/mitul-bhatia-keyboardanimation/meta.json @@ -0,0 +1,4 @@ +{ + "artName": "immersive-3D-billboard", + "githubHandle": "mitul-bhatia" +} \ No newline at end of file diff --git a/Art/mitul-bhatia-keyboardanimation/styles.css b/Art/mitul-bhatia-keyboardanimation/styles.css new file mode 100644 index 000000000..e776ddff0 --- /dev/null +++ b/Art/mitul-bhatia-keyboardanimation/styles.css @@ -0,0 +1,171 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + transform-style: preserve-3d; +} + +body { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); + perspective: 2000px; + font-family: 'Arial', sans-serif; + overflow: hidden; + background-attachment: fixed; +} + +.scene { + width: 800px; + height: 500px; + position: relative; + transform-style: preserve-3d; + animation: sceneRotate 20s infinite linear; +} + +.billboard { + position: absolute; + width: 100%; + height: 100%; + background: linear-gradient(145deg, #2c3e50, #34495e); + border-radius: 20px; + box-shadow: 0 40px 80px rgba(0,0,0,0.4); + transform: + rotateY(45deg) + rotateX(10deg) + translateZ(-100px); + overflow: hidden; +} + +.layer { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + transition: all 0.5s ease; +} + +.layer-1 { + background: linear-gradient(225deg, rgba(41,128,185,0.2), rgba(52,152,219,0.2)); + transform: translateZ(50px) rotate(10deg); + opacity: 0.7; + filter: blur(2px); +} + +.layer-2 { + background: linear-gradient(45deg, rgba(44,62,80,0.3), rgba(52,73,94,0.3)); + transform: translateZ(100px) rotate(-5deg); + opacity: 0.5; + filter: blur(1px); +} + +.digital-overlay { + position: absolute; + width: 100%; + height: 100%; + background: + repeating-linear-gradient( + 0deg, + rgba(0,255,255,0.02), + rgba(0,255,255,0.02) 1px, + transparent 1px, + transparent 3px + ), + repeating-linear-gradient( + 90deg, + rgba(0,255,255,0.02), + rgba(0,255,255,0.02) 1px, + transparent 1px, + transparent 3px + ); + transform: translateZ(150px); + opacity: 0.3; +} + +.content { + position: absolute; + top: 50%; + left: 50%; + transform: + translate(-50%, -50%) + translateZ(200px); + text-align: center; + color: #ecf0f1; + z-index: 10; +} + +.title { + font-size: 4rem; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 10px; + background: linear-gradient(to right, #00f260, #0575e6); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + text-shadow: 0 15px 30px rgba(0,0,0,0.4); + animation: titlePulse 3s infinite alternate; +} + +.subtitle { + font-size: 1.5rem; + letter-spacing: 5px; + margin-top: 20px; + opacity: 0.8; +} + +.geometric-elements { + position: absolute; + width: 100%; + height: 100%; + transform: translateZ(100px); + pointer-events: none; +} + +.geometric-element { + position: absolute; + background: rgba(255,255,255,0.05); + transform: rotate(45deg); + opacity: 0.3; +} + +@keyframes sceneRotate { + 0% { transform: rotateY(0deg); } + 100% { transform: rotateY(360deg); } +} + +@keyframes titlePulse { + 0% { + transform: scale(1); + text-shadow: 0 10px 20px rgba(0,0,0,0.3); + } + 100% { + transform: scale(1.05); + text-shadow: 0 15px 40px rgba(0,0,0,0.5); + } +} + +/* Generate geometric elements */ +.geometric-element:nth-child(1) { + width: 100px; + height: 100px; + top: 20%; + left: 10%; + background: linear-gradient(45deg, #00f260, #0575e6); +} +.geometric-element:nth-child(2) { + width: 80px; + height: 80px; + bottom: 30%; + right: 15%; + background: linear-gradient(135deg, #ff6a00, #ee0979); +} +.geometric-element:nth-child(3) { + width: 120px; + height: 120px; + top: 60%; + right: 5%; + background: linear-gradient(225deg, #2c3e50, #3498db); +} \ No newline at end of file