Merge pull request #2873 from mitul-bhatia/immersive-3D-billboard

Immersive 3 d billboard
zero-to-mastery · Oct 31, 2024 · ecef073 · ecef073
2 parents 17f5ee9 + d2b1ef3
commit ecef073
Show file tree

Hide file tree

Showing 3 changed files with 205 additions and 0 deletions.
diff --git a/Art/mitul-bhatia-keyboardanimation/index.html b/Art/mitul-bhatia-keyboardanimation/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+    <meta charset="utf-8" />
+    <title>immersive-3D-billboard</title>
+    <link href="./styles.css" rel="stylesheet" />
+</head>
+
+<body>
+    <div class="scene">
+        <div class="billboard">
+            <div class="layer layer-1"></div>
+            <div class="layer layer-2"></div>
+            <div class="digital-overlay"></div>
+
+            <div class="geometric-elements">
+                <div class="geometric-element"></div>
+                <div class="geometric-element"></div>
+                <div class="geometric-element"></div>
+            </div>
+
+            <div class="content">
+                <h1 class="title">QUANTUM</h1>
+                <p class="subtitle">IMMERSIVE INTERFACE</p>
+            </div>
+        </div>
+    </div>
+</body>
+  </html>
diff --git a/Art/mitul-bhatia-keyboardanimation/meta.json b/Art/mitul-bhatia-keyboardanimation/meta.json
@@ -0,0 +1,4 @@
+{
+    "artName": "immersive-3D-billboard",
+    "githubHandle": "mitul-bhatia"
+}
diff --git a/Art/mitul-bhatia-keyboardanimation/styles.css 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); 
+}